With the release of our much improved new email editor this morning, I wanted to share the details of our new template language that takes advantage of all the exciting new features. Before I dig into the details though, you’ll be pleased to know these changes are much more evolutionary than revolutionary. Much of the language remains unchanged, some has been tweaked and we have a couple of new tags on the block.
To recap last week’s announcement, the new editor lets you put anything in a repeater, design multiple layouts within the same repeater and includes a much nicer WYSIWYG editor for your clients to work with. I’ll walk through the changes we’ve made to support this, but you can also jump to the full template language documentation to see it all at once.
One important thing to note is that we’ve automatically converted all your templates to the updated language for you behind the scenes. There’s no need for you to do any extra work, and all of your existing templates will continue to work in the new editor. Of course, if you do spot a problem with one of your existing templates, please let us know and we’ll get to the bottom of it for you right away.
Now that you can have any combo of elements in a repeater, the old
<$description$> tags were a little confusing. These have been replaced with the more generic
<multiline> tags. Like their predecessors, singlelines are great for simple text that doesn’t need any special formatting like image captions, titles, dates, etc. Multilines expose our new WYSIWYG editor and are for much longer passages of text that might require formatting.
We’ve also moved towards a more HTML-like opening and closing tag structure. here’s how the tags look:
<singleline>Headline goes here</singleline>
This code would create an editable text input with the default text of “Headline goes here”.
<multiline>Story goes here</multiline>
This code would create a WYSIWYG field with the default text of “Story goes here”.
A cleaner way to handle images
We’ve done away with the awkward
<$imagesrc$> tag and added a simple attribute you can add to any image in your template. Just by including
editable="true" in any image, it can be changed by a client. If you want to include a default image, just reference it in the
src attribute like any regular image. Here’s the code:
<img src="this_is_a_fallback.jpg" width="300" editable="true">
As always, the width of the image is required so we can automatically resize an image your clients add if it’s larger. You can also provide alt text for any images, which will be used by default when the image is replaced and can be updated easily by your client within the editor.
The all new
Now that we’ve thrown out the single title and description limitation, we needed a simple way for you to label each editable field in a template. The new
label attribute does just that.
<singleline label="Image caption">Describe the photo
</singleline> would create an editable single line field with the label “Image caption” and the default text “Describe the photo”.
By combining the new label attribute and adding your own default text for all fields, you can set simple guidelines for your clients right in the template code that makes it extremely easy for them to work with. Here’s an example for a photography email template that clearly explains what goes where. Just place this code inside a repeater:
<image src="" width="300" editable="true" label="The Photo">
<singleline label="Image caption">Describe the photo</singleline>
<multiline label="Photographer bio">Introduce this photographer and share the story behind this particular shot</multiline>
This will appear in the editor like so:
This tag is awesome. It’s a simple idea, but gives you complete flexibility in the types of template designs you can build. In a nutshell, the
<layout> tag lets you build multiple layouts inside a single repeater.
For example, you might want the first item in a repeater to have an image aligned to the right, and in the next item aligned to the left. Or, you might want to have two repeating items that are just simple text, then throw in a gallery of images, then switch back to text again.
This is done by wrapping each alternate design in its own
<layout> tag within a
<repeater>. Here’s an example where the first layout has an image floated right, and the second has it floated left.
<image src="image.jpg" editable="true" align="right">
<image src="image.jpg" editable="true" align="left">
Each time your client adds a new item to this repeater, it will simply cycle through the layouts you have set in the template. You can add as many layouts as you like, and each layout can include any combo of elements.
Give each layout a label
You can go one step further with your layouts by throwing in a
label attribute. By labelling each layout in the same repeater, we’ll show your client a handy drop down each time they add a new item that lets them choose which layout they want to use. Here’s the code:
<layout label="New feature">
So, if you don’t include a label we just cycle through each layout in the order they appear in your template. Throw in a label and we let your client choose what they want to use and when. It’s your call.
Populating a table of contents
Previously, you had to add the
toc="true" attribute to a repeater, and we’d just use the title in that repeater to populate a table of contents. Now we’ve moved away from title tags, you’ll need to tell us which
<singleline> in a repeater should be used to build your table of contents. This is done with the new
For example, you have a table of contents set up in your template, and you want the main headline in each repeating item to populate it automatically. Here’s how this would look:
<singleline label="Headline" repeatertitle="true"></singleline>
In keeping with the HTML-like structure of our template language, the old
<$repeatertitle$> tag, which tells us where to place each item in your table of contents layout has been updated to
This also means you can populate a table of contents from multiple repeaters, which is something we’ve had a lot of requests for. These will appear in the order they appear in your template code.
Date tags tweaked
For consistency, date tags have also been tweaked by removing the dollar symbol. For example, the old
<$currentday$> tag has been simplified to
<currentday>. Check the full documentation for examples of all date fields.
To dive straight into the new language, you can check out the full documentation, or get your hands dirty with the sample template below. This is the same template used in last week’s video demo, is mobile optimized and includes a lot of the new tags such as layout and label.
One of the biggest aims of this update to the editor and template language was to try and make the migration as simple as possible. Hopefully we’ve struck a balance between giving you all loads more flexibility in how you design templates, whilst still retaining the simple template language to make it all happen.
This is step one of something that we’ll continue to evolve, but in the mean time we can’t wait for you guys to start importing designs that were never previously possible.