Menu

It is a good practice to control how an Email Design System can change depending on the content it is holding, so that the page layout will adapt automatically without the editor needing to do anything. 

In this example we will look at how to remove an empty column when an image is removed, when the column is built using the Hybrid div approach.

Here is an example module:


And how we might code this module:

<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center; vertical-align: top; font-size: 0;"><div style="width: 320px; display: inline-block;padding:0;margin:0; vertical-align: top;">
        <editable name="image"><img src="http://placehold.it/320x200"></editable>
        </div><!--[if (gte mso 9)|(IE)]></td><td width="320" style="text-align: center; vertical-align: top; font-size: 0;"><![endif]--><div style="width: 320px; display: inline-block;padding:0;margin:0; vertical-align: top;">
        Column 2 content
        </div></td>
    </tr>
</table>

As the image is editable, there is a chance that an editor could remove the image. In which case, we should remove the image code entirely, along with it's containing column div, and then make the second column span the full width.

We can use rules to do this. We can find out the field name we need to reference from the implied default for an editable image (spoiler: it's editables.editablename.src). In this example we'll use rule="{% show_if editables.image.src %}"

We'll add that rule to the div containing the image:

<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center; vertical-align: top; font-size: 0;"><div style="width: 320px; display: inline-block;padding:0;margin:0; vertical-align: top;" rule="{% show_if editables.image.src %}">
        <editable name="image"><img src="http://placehold.it/320x200"></editable>
        </div><!--[if (gte mso 9)|(IE)]></td><td width="320" style="text-align: center; vertical-align: top; font-size: 0;"><![endif]--><div style="width: 320px; display: inline-block;padding:0;margin:0; vertical-align: top;">
        Column 2 content
        </div></td>
    </tr>
</table>

We also need to add this to a few more places. The Outlook conditional code is no longer required as this will just be one column instead of two, so we can wrap a content tag around it and apply the same rule. 

It's important to ensure there aren't any spaces in the HTML around the Outlook conditional code, to avoid issues when the Hybrid div technique is used, so be careful to avoid that (don't worry, Taxi won't add any extra spaces).

<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center; vertical-align: top; font-size: 0;"><div style="width: 320px; display: inline-block;padding:0;margin:0; vertical-align: top;" rule="{% show_if editables.image.src %}">
        <editable name="image"><img src="http://placehold.it/320x200"></editable>
        </div><content rule="{% show_if editables.image.src %}"><!--[if (gte mso 9)|(IE)]></td><td width="320" style="text-align: center; vertical-align: top; font-size: 0;"><![endif]--></content><div style="width: 320px; display: inline-block;padding:0;margin:0; vertical-align: top;">
Column 2 content
        </div></td>
    </tr>
</table>

We can also remove the second div, as now it's not that useful. We can use an outer rule to do that, to remove the div but not its contents

rule="{% show_outer_if editables.image.src %}"

Lastly, we can add an extra rule to the second div, that will make it perform a bit better in the Taxi editor. Even though we're removing it in the final exported HTML, it will still exist in the editor, and therefore it's width:320px; property will be applied. We can add an extra rule in a replace-style attribute to change that to 100% for the Taxi editor, like so:

{%if editables.image.src =='' %}width: 100%;{%else%}width: 320px;{%endif%}

This should then mean that when an image is removed, the text column covers the full width of the module:


Complete Snippet

HTML

<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center; vertical-align: top; font-size: 0;"><div style="width: 320px; display: inline-block;padding:0;margin:0; vertical-align: top;" rule="{% show_if editables.image.src %}">
        <editable name="image"><img src="http://placehold.it/320x200"></editable>
        </div><content rule="{% show_if editables.image.src %}"><!--[if (gte mso 9)|(IE)]></td><td width="320" style="text-align: center; vertical-align: top; font-size: 0;"><![endif]--></content><div style="width: 320px; display: inline-block;padding:0;margin:0; vertical-align: top;" replace-style="{%if editables.image.src =='' %}width: 100%;{%else%}width: 320px;{%endif%}display: inline-block;padding:0;margin:0; vertical-align: top;" rule="{% show_outer_if editables.image.src %}">
Column 2 content
        </div></td>
    </tr>
</table>

← Back to /Code