robbin.works

Statamic wrap modifier

20 Jul, 2019 // 1 min read

Lately, I have been using Statamic's wrap modifier more and more. A very simple yet powerful modifier to help clean up my templates a little bit.

Simply put, it wraps a string with a given HTML tag, it also has the nice benefit of returning null if there is no data – making standard if statements rather reduntant.

Consider we have the following yaml;

title: Hello, World

Usually when we conditionally display something, it would look something like this;

{{ if title }}
  <h1>{{ title }}</h1>
{{ /if }}

Sure, one if statement like this isn't the end of the world, but what if the project grows bigger and you end up having like 5-10 if statements in your template? Rather messy.

Fortunately, we can clean this up simply by using the built-in wrap modifier in Statamic;

{{ title | wrap:h1 }}

Want to add classes to your element? Sure, no problem – You may add Emmet-style CSS classes to the tag;

{{ title | wrap:h1.fast.furious }}

Above example will give you the following output:

<h1 class="fast furious">Hello, World</h1>

Simple yet powerful.

Reference; https://docs.statamic.com/modifiers/wrap

👨🏻‍💻

~ Robbin

#statamic