using liquid filters for advanced content formatting

By -

Understanding Liquid Filters in Jekyll

Liquid is the templating engine behind Jekyll, and filters are its powerful feature to manipulate content output. By applying filters, you can dynamically transform variables, format text, handle URLs, truncate content, and even perform logic-driven formatting directly inside your templates and posts.

Why Mastering Filters Matters

  • Enables cleaner and more efficient template structures
  • Reduces repetitive HTML and manual formatting
  • Improves maintainability and readability
  • Enhances SEO by controlling how metadata and content are rendered

Core Syntax of Liquid Filters

The basic syntax follows a pipe-style structure where a filter is applied after a variable:

{{ variable | filter }}

Multiple filters can be chained:

{{ variable | filter1 | filter2 }}

Commonly Used Liquid Filters

String Filters

  • capitalize: Capitalizes the first letter
  • upcase: Converts text to uppercase
  • downcase: Converts text to lowercase
  • replace: Replaces one string with another
  • strip_html: Removes all HTML tags
  • truncate: Shortens string to a specific length

Date and Time Filters

Dates in Jekyll are formatted using Liquid's date filter:

{{ page.date | date: "%B %d, %Y" }}

URL and Path Filters

  • relative_url: Resolves relative links
  • absolute_url: Converts to full URL based on site config

Math and Array Filters

  • size: Returns the length of an array or string
  • sort: Sorts arrays
  • join: Joins array elements into a string
  • uniq: Removes duplicates from arrays

Advanced Use Cases

Creating SEO-Friendly Excerpts

Use filters to generate clean summaries for meta descriptions:

{{ content | strip_html | truncatewords: 30 }}

Sanitizing Titles for URL Slugs

Convert post titles into clean, lowercase slugs:

{{ page.title | downcase | replace: ' ', '-' | replace: '.', '' }}

Highlighting Popular Tags

Sort and display most used tags using filter logic:

{% raw %}
{% assign sorted_tags = site.tags | sort: 'size' | reverse %}

    
  {% for tag in sorted_tags limit:5 %}
    
  • {{ tag[0] }}
    • 
  {% endfor %}


{% endraw %}

Rendering Author Bios from Data Files

Combine filters to dynamically render authors:

{% raw %}
{% assign author = site.data.authors[page.author] %}

{{ author.name | upcase }}


{{ author.bio | truncate: 100 }}

{% endraw %}

Custom Filters in Jekyll Plugins

If you're using GitHub Pages, you’re limited to safe filters. But in standalone Jekyll builds, you can create your own filters:

Example: Custom Word Count Filter

Create _plugins/word_count_filter.rb:

module Jekyll
  module WordCount
    def wordcount(input)
      input.split.size
    end
  end
end

Liquid::Template.register_filter(Jekyll::WordCount)

Now in your template:

{{ page.content | wordcount }}

Combining Filters for Dynamic Layouts

You can mix filters and conditionals for flexible content control. Example: Display a custom notice only on long articles:

{% raw %}
{% assign word_count = content | strip_html | number_of_words %}
{% if word_count > 2000 %}
  
This article is long and detailed. Use the table of contents to navigate.

{% endif %}
{% endraw %}

Liquid Filter Gotchas and Limitations

  • Filters cannot change variables permanently; use assign for that
  • You can’t pass complex logic into filters — they work on simple input
  • Some filters behave differently depending on data type (array vs. string)
  • Custom filters won’t work on GitHub Pages unless part of supported plugins

Case Study: Building a Dynamic Quote Component

A Jekyll site wanted to display rotating quotes in a hero section. Using Liquid filters, the developer built a JSON-driven loop with randomized output using sample and first filters. The final result delivered a fresh motivational message each page load without JavaScript.

Conclusion

Liquid filters are essential tools for anyone building with Jekyll. They allow advanced formatting, dynamic templating, and cleaner site logic — all while reducing redundancy. Mastering these filters unlocks powerful customization options for developers who want to create scalable, SEO-optimized, and easily maintainable sites.