Subscribe

Creating a custom Eleventy filter

✍️

Let's see how you can make your own custom filter in Eleventy.

23 Jan, 2021 Β· 3 min read

I wanted to make this article a bit bigger but hit a roadblock when trying to use filters in Eleventy.

So I decided to dedicate this article to showcasing how filters can work in Eleventy.

A filter is a function we can extend in our frontend by calling the pipe | delimiter followed by the function.

{
  {
    someVar | uppercase;
  }
}

The uppercase is then counted as our filter.

Eleventy Filter types

Eleventy knows quite a few filter types, as mentioned on their documentation on Filters

module.exports = function(eleventyConfig) {
  // Liquid Filter
  eleventyConfig.addLiquidFilter("uppercase", function(value) { … });

  // Nunjucks Filter
  eleventyConfig.addNunjucksFilter("uppercase", function(value) { … });

  // Handlebars Filter
  eleventyConfig.addHandlebarsHelper("uppercase", function(value) { … });

  // JavaScript Template Function
  eleventyConfig.addJavaScriptFunction("uppercase", function(value) { … });

  // or, use a Universal filter (an alias for all of the above)
  eleventyConfig.addFilter("uppercase", function(value) { … });
};

We are going to use the Universal filter method.

What I missed in the documentation was the ability to add parameters to the function.

Adding arguments to the filter

So far, we have been talking about an uppercase filter, but we want to make a filteredPosts one.

What it should do:

Filter posts and slice the first {x} from the results

You might wonder why?

Because my layout uses three different layouts, it made more sense to split them out.

{% set firstItem = pagination.items[0] %}
{% set secondItem = pagination.items[1] %}
{% set postListItems = pagination.items | filteredPosts(2) %}

Here you can see how I set my variables.

You might have spotted the filter already! And, more importantly, how the argument is passed to it.

filteredPosts(argument)

Building the filtered post filter

We need to modify our .eleventy.js file to build this filter.

config.addFilter('filteredPosts', function (value, argument) {
  return modifiedValue;
});

This is our universal filter that accepts the argument. It consistently receives the value, but the second part is the argument.

We want to strip out the first 2 elements, for which we can use the slice method.

I had some issues using slice vs. splice, but a quick refresh on those made me realize we can use splice to modify the incoming value, remove the first 2 elements and return it.

config.addFilter('filteredPosts', function (value, limit) {
  value.splice(0, limit);
  return value;
});

That makes sure the first two elements are cut from the array since we already assigned them to their variables.

Adding multiple arguments

We can of course, also send multiple arguments to our Eleventy Filter.

{% set postListItems = collections.posts | filteredPosts(0, 2) %}

And receive them as such:

config.addFilter('filteredPosts', function (value, from, limit) {
  value.splice(from, limit);
  return value;
});

We could even set default values:

config.addFilter('filteredPosts', function (value, from = 0, limit = 2) {
  value.splice(from, limit);
  return value;
});

There you go. I hope this helps someone create their own cool filters with Eleventy 🀩.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

Eleventy creating a static JavaScript search

19 Jun, 2021 Β· 5 min read

Eleventy creating a static JavaScript search

Eleventy JSON endpoint with posts

18 Jun, 2021 Β· 3 min read

Eleventy JSON endpoint with posts

Join 1372 devs and subscribe to my newsletter