Rules are useful for reducing the number of templates and modules required by allowing small changes to be turned on and off in the editor.

You can also set blocks of HTML to be removed if a given piece of content is not present, for example you can remove an entire call to action button if there is no text content for the link.

There are two basic operations that can be carried out and two common ways of triggering them:

Remove content

The first operation is removal, an element can simply be completely removed from the html along with all of its children when a condition is met. The second operation is to remove an outer element but leave the any inner elements in the html. This is called remove_outer and is usually used to remove a link tag from around another element. This way, for example, the user can be given a choice in the editor of whether and image should work as a link or not.

Rules can be invoked by a checkbox field, which appears as an ‘on/off’ switch in the editable or by looking at other fields and seeing if they are empty or not. An empty field is treated the same way as ‘off’ from a checkbox whereas if there is any text in the field it is treated as ‘on’. This is useful for doing things like completely removing a headline section if no headline text is entered or altering spacing when content is present.

A simple rule example:

Let us imagine there is a christmas tree in our weekly newsletter that we only want to be switched on for seasonal emails. We can put in a checkbox field to turn it on/off and on the image tag we use a remove_unless rule.

<field name="christmas_tree" label="is it christmas?" type="checkbox"></field>
<img src="tree.png" rule="{% remove_unless christmas_tree %}"/>

The rule means ‘remove this image tag unless the christmas tree checkbox is switched on’. The ‘rule’ attribute is telling Taxi to interpret this as a rule and the {% remove_unless %} tag means apply the ‘remove’ rule unless the condition is met.

Instead of a checkbox we will now use a text field to control our rule:

<editable name="headline_text_removal">
<field name="headline_text" type="text"></field>
<h1 rule="{% remove_unless headline_text %}" replace="{{ headline_text }}"/>Headline</h1>
</editable>

In this case we want the <h1> tag to disappear when there is no headline text. The rule does exactly that.

Only remove a tag

The remove_outer_if and remove_outer_unless rules behave in a similar way but leave the content of the tag in place. This is often used to allow an image to be switched between working as a link and just being an image.

<editable name="image_with_optional_link">
 <field name="enable_link" type="checkbox"></field>
 <field name="link_url" type="url"></field>
 <field name="image_src" type="src"></field>
  <a rule="{% remove_outer_unless enable_link %}" replace-href="{{link_url}}">
   <img replace-src="{{image_src}}">
  </a>
</editable>

Note that the rule attribute for remove_outer_if goes on the element that will be removed, rather than the inner element that is preserved, so in this case it goes on the <a> tag (which gets removed if the rule condition is met), not the <img> tag (which survives in either case).

Diving in deeper

The content of rule, replace and replace- attributes in Taxi are interpreted using the liquid template language. This was developed by shopify for use in e-commerce. It is a powerful language.

Topics not covered in this guide include:

  • Using liquid to provide defaults when no content is entered
  • Iterating through lists
  • Use of filters for presenting content in different ways

To find out more about the liquid template language visit www.liquidmarkup.org


Next: Utility Tags