In the first lesson, we learnt how to make images editable by using <editable> tags around them, like this:
<editable name="image" label="Image"> <img src="" alt="" height="auto" width="600"> </editable>
This would give you fields for the src, alt text, height and width of the image. Sometimes you may not want this, for example if you didn't want the height or width of an image to be editable.
We can use fields to define exactly what appears in the editor, instead of Taxi automatically giving us these four fields.
Let's say we want the src and the alt text to have fields but we want height and width locked down. Find the image module in your HTML and inside the editable add a field for the image with the type set to src.
<editable name="image" label="Image"> <field type= "src" name="src" label="Image"></field>
Now in the <img> tag, in addition to your src attribute, add a replace-src attribute. The value of this needs to be the name of the image field above, placed inside these brackets: {{ }}.
<img src="" replace-src="{{src}}">
The image you add to the image field in the editor will get used in the replace-src attribute.
You don't need to have replace-src and src in your Email Design System, just having replace-src will work as you need in Taxi. Having both can be useful when viewing the EDS outside of Taxi as it will act as the image before you upload to your account.
Now, do the same thing with the alt text. Include a field with a name and a label, with the type set to text. Then in the <img> tag, add a replace-alt attribute, with the value matching the name of your field.
<field type="text" name="alt" label="Alt Text"></field>
<img src="" replace-src="{{src}}" alt="" replace-alt="{{alt}}">
Let's upload this EDS with the updated image module and see what's changed. If you don't have access to Taxi, here's a video showing how these fields will work.