Chaining Variable Modifiers

Variables, whether output within tags or free standing global variables, are the primary mechanism for presenting your content. Variable modifiers give you a way to precisely control what that output on an individual basis, without altering the content itself.

A variable modifier is a method name linked to a single variable with a colon. For instance, if you want to limit the length of the displayed entry title to 80 characters, you could use limit modifier like this:

{title:limit characters="80"}

Starting with ExpressionEngine 7.3, variable modifiers can be chained together, allowing you to make multiple modifications. For example, say you’re using abbreviations in the entry title, but you’d like to expand those when the entry is displayed on the front-end. At the same time, you want to keep the title short. You can do both at once by using multiple modifiers:

{title:replace:limit find="EE" replace="ExpressionEngine" characters="80"}

The chained modifiers are applied left-to-right. In the above example, that means that first the replacement of “EE” with “ExpressionEngine” in displayed entry title is made and then it gets shortened to 80 characters. The order of parameters does not matter, but the order of the modifiers does.

Each modifier has its own set of parameters and most of the time it will know which parameters it should use. In rare cases when the same parameter name is used by different modifiers, you can specify which modifier the parameter belongs to by prefixing the parameter with the modifier name, colon-separated. So the equivalent of the above example would be:

{title:replace:limit limit:characters="80" replace:find="EE" replace:replace="ExpressionEngine"}

Chaining modifiers can become very handy when applying on-the-fly image manipulations.

Suppose we have a File Grid field named images that contains, well, images. Let’s output a gallery of images that are:

a) first, resized to 250 px wide b) then, cropped to 200x200px c) lastly, converted to webp format

We can do this with a single template tag:

<ul>
{images}
    <li>{images:file:resize:crop:webp resize:width="250" crop:width="200" crop:height="200" crop:x="25" crop:y="25" crop:maintain_ratio="n" wrap="image"}</li>
{/images}
</ul>

You can use modifiers on most ExpressionEngine variables, including:

• All Channel Fields
• URL Segment Variables
• Embed Variables
• Layout Variables
• Template Route Variables
• Standard Global Variables
• User-defined Template Variables
• Most add-ons (those that use native APIs for parsing variables)

Yuri