Taxi Syntax enables you to make any part of your template editable, including image sizes. If you need to have different image widths on mobile, using Taxi Syntax means you can control this too.
Image width on mobile is controlled through media queries and classes, and using these classes where needed throughout your HTML.
First, include all the possible widths you would need in the head of your Email Design System, inside a style tag.
<style type="text/css">
@media screen and (max-width: 639px) {
.fw95 {
width: 95%!important;
}
.fw90 {
width: 90%!important;
}
.fw85 {
width: 85%!important;
}
}
</style>
Then throughout your template you can use classes to control the widths of images on mobile devices. For example if you wanted to have the image at 85% on mobile.
<img class="fw85" src="">
At the moment, this is a static value so the image will always be 85% width on mobile.
To make it editable in Taxi, first you will need to add a dropdown field with all the mobile width options you want. The values of these will need to match the widths you have defined in your media query.
<field type="dropdown" name="mob_width" label="Mobile Image Width"> <choice value="95"></choice> <choice value="90"></choice> <choice value="85"></choice> </field>
Once you have this dropdown field you can reference it in all the classes where you want to control the mobile width. You'll need to make sure you use the replace-class attribute as you're using the liquid variable {{mob_width}}.
<img replace-class="fw{{mob_width}}">
Whatever option you choose in the dropdown will get used in the replace-class attribute, and this will control the mobile image width. For example, if you select 85 in the dropdown field, the code will be replace-class="fw85". This will then be linked with the CSS and media query you have included in the head of the HTML. Because only the number is coming from the dropdown, the fw' part of the class can be outside of the liquid variable.
<img replace-class="fw85">
This is why the classes in the media query need to match the values in the dropdown. The number you select in the dropdown gets pulled into the replace-class attribute and becomes a valid class linked to the mobile font sizes you have set in your media query.