Make it easy to upload images to the Taxi editor and control the src, height, width and alt text.
The first thing we're going to do is create some modules (reusable blocks of HTML) and make parts of them editable so you can change things like images, links and text.
You can use our HTML to add Taxi syntax or you can use your own.
First, let's create some modules out of our HTML. In the code we've provided there is the HTML for a logo, an image, some text and the footer content. We're going to make modules for the image and the text blocks.
We'll start with the image module. In the HTML, directly above the start of the code for your image block add a <module> tag.
Navigate to this comment <!-- start of image module --> and add the <module> tag directly below it.
Give the module tag a name and a label attribute. A name is mandatory and the label is optional but recommended. The name can't have any spaces but the label can include anything you need.
<!-- start of image module --> <module name="image_module" label="Full Width Image"> <table>
And then directly below the last bit of HTML needed for this image module, close the <module> tag. Look for the closing comment that reads end of image module'.
</td> </tr> </table> </module> <!-- end of image module -->
All the HTML inside of these tags will act as one module in Taxi.
Now that we have created a module we will need to make part of it editable.
In this module there is an <a> tag and an <img> tag. We're going to make this editable so you'll be able to change them in Taxi.
Directly above the <a> tag, add an <editable> tag, and just like with the module, give it a name and a label.
Then directly after the closing </a> tag close the <editable> tag, so essentially wrapping the editable around this piece of HTML.
<!-- start of linked image --> <editable name="linked_image" label="Linked Image"> <a href="https://www.taxiforemail.com"> <img src="https://place-puppy.com/600x400" alt="" height="auto" width="640"> </a> </editable>
Taxi recognises the href, src, alt, height and width attributes inside the editable and automatically generates fields for those parts of the HTML, so there is no need to do anything additional to the <editable> tags. Now, whenever you make a change to one of these fields in the editor, this change will be reflected in the HTML and you'll be able to update your email.
Now that we have our module and we've made and image and a link in that module editable, let's upload it to Taxi and see how it behaves. In your account go to Email Design Systems > Add new and upload or paste your HTML.
For more details on this process, check out this helpful article.
If you don't have access to Taxi just yet, then below is a video demonstrating how this Syntax will look in the editor.
You've now completed the first lesson; let's move on to the next step in becoming a Taxi Syntax expert.
