Separate Images for Mobile

Including different images for mobile and desktop can be achieved through a combination of HTML and CSS classes. Taxi Syntax makes sure these images are easily editable without the need for any of the technical knowledge.

In this example, we're going to show how to have a different mobile image for a module that uses a background image.

Before adding Taxi Syntax, you can include the mobile background image in the <table> tag of the module and then the desktop image in the <td> of the module.

<table style="min-width:100%; background: url(https://place-puppy.com/300x300) top center / cover no-repeat;" >
<tr>
<td background="https://place-puppy.com/600x301">

The above code will show the background image in the <td> on desktop and mobile. In order to hide this on mobile, add in a media query in the head of your Email Design System and include a class called clearbg.

<style type="text/css">
@media screen and (max-device-width:660px), screen and (max-width:660px) {
.clearbg {
 background-image: none!important;
}
</style>

Wherever this class is applied, the background image won't be shown on devices of 660px width and below. Therefore we can apply it to the <td> with the desktop background image.

<table style="min-width:100%; background: url(https://place-puppy.com/300x300) top center / cover no-repeat;" >
<tr>
<td background="https://place-puppy.com/600x301" class="clearbg">

Now, this background image will be hidden on mobile and you'll see the background image from the table on smaller screens.

Now that we have the relevant HTML and CSS we can make the two images editable in Taxi.

First, include two image fields, one for the mobile image and one for the desktop image.

<field type="src" name="desk_image" label="Desktop Image"></field>
<field type="src" name="mob_image" label="Mobile Image"></field>

Then in the table, use a replace-style attribute, and instead of the image url include the name of the mobile image field.

<table style="min-width:100%; background: url(https://place-puppy.com/300x300) top center / cover no-repeat;" replace-style="min-width:100%; 
background: url({{mob_image}}) top center / cover no-repeat;"> 
</table>

And in the <td>, include a replace-background attribute with the name of the desktop image field.

<td background="https://place-puppy.com/600x301" replace-background="{{desk_image}}" 
class="clearbg"></td>

So that is how you can make desktop and mobile images editable without any technical knowledge needed from the person creating the email.

The image you put into the mobile image field will get used in the <table> and the image you put into the desktop image field will get used in the <td>, but the clearbg class will make sure only the relevant one shows on mobile.

With Taxi Syntax you can add even more flexibility to this module so that if you do want the same image on mobile and desktop you can. You won't be forced to have different images if that's not what's needed for an email.

In the <table> you can include a rule around the mobile image to make sure it is removed if nothing is input in that field.

<table replace-style="min-width:100%; {% if mobimage %}background: url({{mobimage}}) top center / cover no-repeat;{% endif %}"> 
</table>

If the mobile image field has an image in it you'll see that image on mobile, but if not then the background: url part of the style attribute will get removed.

Of course, we still have our clearbg class on the <td> so if we left it like that, no image would show on mobile. So we also need a rule on this class to make sure it is removed if there is no mobile image chosen in the editor.

<td background="https://place-puppy.com/600x301" replace-background="{{desk_image}}" replace-class="{% if mob_image %}clearbg{% endif %}"> 
</td>

This means if there is an image in the mobile image field then this class will get used and the desktop image will be removed. However, if there is no mobile image, then there will be no class and the desktop image will be shown on mobile.

Back to Coding for Mobile