Menu

First, we add three field tags: image source, height and width.

<field type="src" name="bgimage" label="Background image" default="http://placehold.it/640x200"></field>
<field type="number" name="bgwidth" label="Background width" default="640" hint="this should not include px"></field>
<field type="number" name="bgheight" label="Background height" default="200" hint="this should not include px"></field>

Then we have the table structure - we can add the background image url, height and width using replace and replace-attribute.

<table cellspacing="0" cellpadding="0" border="0" width="640" replace-width="{{bgwidth}}">
<tr>
<td align="center" valign="top" width="640" replace-width="{{bgwidth}}" height="200" replace-height="{{bgheight}}" background="http://placehold.it/640x200" replace-background="{{bgimage}}">

Inside that <td> we then have the Outlook conditional code. This is commented out, so Taxi will ignore this usually. However, as we want Taxi to update some of the variables inside the comment, we have to break it apart using the <escape> tags. 

We then use the <content> tag to tell Taxi to add in the variables for image src, height and width. Adding display:none to the <content> tag means the content won't be displayed in the preview when you use Taxi.

<escape><!--[if (gte mso 9)]><v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; width:</escape>
<content replace="{{width}}" style="display:none;">700</content>
<escape>px; height:</escape><content replace="{{height}}" style="display:none;">400</content><escape>px" src="</escape>
<content replace="{{bgimage}}" style="display:none;">https://via.placeholder.com/600</content><escape>" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block;position: absolute; width:</escape>
<content replace="{{width}}" style="display:none;">700</content>
<escape>px; height:</escape><content replace="{{height}}" style="display:none;">400</content><escape>px">
<v:fill opacity="0%" color="#FFFFFE" />
<v:textbox inset="0,0,0,0" >
<![endif]--></escape>

At the point of export, the <content> and <escape> tags will be removed, leaving a working Outlook conditional comment.

Complete Snippet

HTML

<field type="src" name="bgimage" label="Background image" default="http://placehold.it/640x200"></field>
<field type="number" name="bgwidth" label="Background width" default="640" hint="this should not include px"></field>
<field type="number" name="bgheight" label="Background height" default="200" hint="this should not include px"></field>
<table cellspacing="0" cellpadding="0" border="0" width="640" replace-width="{{bgwidth}}">
<tr>
<td align="center" valign="top" width="600" replace-width="{{bgwidth}}" height="200" replace-height="{{bgheight}}" background="http://placehold.it/640x200" replace-background="{{bgimage}}">
<escape><!--[if (gte mso 9)]><v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; width:</escape>
<content replace="{{bgwidth}}" style="display:none;">700</content>
<escape>px; height:</escape><content replace="{{bgheight}}" style="display:none;">400</content><escape>px" src="</escape>
<content replace="{{bgimage}}" style="display:none;">https://via.placeholder.com/600</content><escape>" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block;position: absolute; width:</escape>
<content replace="{{bgwidth}}" style="display:none;">700</content>
<escape>px; height:</escape><content replace="{{bgheight}}" style="display:none;">400</content><escape>px">
<v:fill opacity="0%" color="#FFFFFE" />
<v:textbox inset="0,0,0,0" >
<![endif]--></escape>

Put your content here

<escape><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></escape>
</td>
</tr>
</table>

← Back to /Code