8. String filters in Liquid

Introduction

Liquid string filters allow us to modify string variables. In this example we have a heading variable in front matter we’re outputting as an h2:

---
layout: default
title: Home
heading: Fresh, homemade baked goods
---
<section class="hero">
  <div class="small-container">
    <h2>{{ page.heading }}</h2>
    <p class="sub-text">Bakery<strong>Store</strong> serves the freshest baked goods in San Francisco.</p>
  </div>
</section>
...

Let’s say we’re outputting heading string in multiple places across this page but each time, we want the output to be slightly different.

Replace

In this first instance, instead of saying “baked goods” we want it to say “baked bread”. This is an excellent use case for Liquid filters.

To use a filter we’ll add a “|” after the variable then pass it a filter, replace in this case:

...
<h2>{{ page.heading | replace: "goods", "bread" }}</h2>
...

Upcase

We can also chain filters together, so let’s make the heading uppercase as well:

...
<h2>{{ page.heading | replace: "goods", "bread" | upcase }}</h2>
...

Below is some examples of different string filters. Head over to the Cheat Sheet to see all filters you can use.