Jekyll Filters are a wide range of parameters that can be used to modify the output produced by Liquid tags or objects. I will be describing two Jekyll filters which can be very useful in sorting post index. One is sort filter and the other is where filter.
If you’re not sure on how to use Liquid Synatax then I suggest you go through this article: How to use Liquid Syntax in Jekyll?.
Simple Jekyll Filters
Consider this example. I’m modifying the output of the page variable page.author which is sharathdt using string filters.
{{page.author}} = sharathdt
{{page.author | append: ' is a web designer'}} = sharathdt is a web designer
{{page.author | append: ' is a web designer' | remove: 'dt'}} = sharath is a web designer
{{page.author | append: ' is a web designer' | remove: 'dt' | capitalize}} = Sharath is a web designer
{{page.author | append: ' is a web designer' | remove: 'dt' | capitalize | replace: 'is', 'is a good'}} = Sharath is a good a web designer
{{page.author | append: ' is a web designer' | remove: 'dt' | capitalize | replace: 'is', 'is a good' | truncate: 15 }} = Sharath is a...
{{ "<h1>Title of a post</h1>" | strip_html }} : Title of a postWhat I have used above are simple string filters. They modify a string value. We need different way to handle array data produced by loops.
Apart from these string filters, there are plenty of other jekyll filters that may come in handy in different situations. Check them out here: Liquid Filters.
Advanced Jekyll Filters
I’m calling this advanced because these jekyll filters help us modify array outputs. An array is a set of multiple items. A list of posts that we generate in the index page is an array of posts. All the categories or tags we use in posts is an array.
Since these arrays are rendered inside a for loop, we cannot define filters right in the tag. We should filter the array first and then let it pass through the for loop.
Consider this example: Generate a list of posts arranged in alphabetical order.
We know that Jekyll sorts all the posts by date. What should we do to arrange it by their title?
Default Jekyll post list
Here is how a default post generation tag would look like. You can find this in almost all Jekyll blogs, mostly on the homepage.
{% for post in site.posts limit: 5 %}
<ul>
<li>{{post.title}} - {{post.date | date_to_string}}</li>
</ul>
{% endfor %}I’m limiting the number of posts to only 5.
Svelte Shopping Cart - 13 Feb 2021
Why do I like Svelte - 28 Jan 2021
How I built a free ecommerce website - Crocodaily - 08 Jun 2020
Jekyll Data - How it helps designing better websites? - 19 Oct 2019
CSS Grid Layout - Try It Now! - 25 Jan 2018What we observe here is that the posts are arranged by date. The latest one being at the top.
Consider this example where I have sorted posts by their title.
Sort Jekyll posts by title
We will be sorting the list first and then give it to the for loop for output.
{% assign sorted-posts = site.posts | sort: 'title' %}
{% for post in sorted-posts limit: 5 %}
<li>{{post.title}}</li>
{% endfor %}Output
Add or Edit Jekyll Posts through a Browser
Adding Custom Domain to Github Pages Website
Adding Facebook Like Button to Jekyll Blog
Adding Sitemap to Jekyll Blog
Adding Top Progress Bar to WebsitesLet’s arrange it in the reverse order of titles.
{% assign sorted-posts = site.posts | sort: 'title' | reverse %}
{% for post in sorted-posts limit: 5 %}
<li>{{post.title}}</li>
{% endfor %}Output
Why do I like Svelte
Why did I start WebJeda?
Why did I choose Jekyll over WordPress?!
Why I Switched To Google Domains?
The easiest search option for JekyllWhat we see here is that the posts are rendered in reverse alphabetical order.
Sort Jekyll posts by categories
Many times we want the posts to be divided into different categories and displayed as a list. This can be achieved by Jekyll’s new filter - where.
This filter is only available for Jekyll versions 2.5 or above.
Consider this website for example. Most of my posts are about Jekyll which will have a category jekyll. I also write posts on web designing which has a category Web-Design. Let’s filter out all the posts that have a category Web-Design.
{% assign sorted-posts = site.posts | where: "categories","Web-Design" %}
{% for post in sorted-posts limit: 5 %}
<li>{{post.title}}</li>
{% endfor %}Output
Svelte Shopping Cart
Why do I like Svelte
CSS Grid Layout - Try It Now!
Image Optimization
4 Steps To Migrate From WordPress To JekyllSort Jekyll posts by type
Jekyll posts now can be sorted by any Front Matter. It doesn’t have to be tags or categories. Let’s consider the value author. I have author mentioned in almost all my posts like below.
---
title: "Webjeda Jekyll Blog"
layout: post
author: sharathdt
categories: Jekyll Web-design
---Now, consider you have different authors who write articles on your blog. This can be a great way to separate posts from each author.
{% assign sorted-posts = site.posts | where: "author","sharathdt" %}
{% for post in sorted-posts limit: 5 %}
<li>{{post.title}}</li>
{% endfor %}Output
Svelte Shopping Cart
Why do I like Svelte
How I built a free ecommerce website - Crocodaily
Jekyll Data - How it helps designing better websites?
CSS Grid Layout - Try It Now!Checkout other filters here: Jekyll Filters
Jekyll group by filter
This is a jekyll filter which groups an array of items based on the property you give. The property can be categories, tags, author or any front matter.
Here is an example for Jekyll group by filter. Imagine you want your posts to be seggregated based on authors. Let’s say you’ve multiple authors and you mentions each authors name in the front matter as shown below,
---
title: "Webjeda Jekyll Blog"
layout: post
author: sharathdt
---There is a simple way to sort your posts based on authors.
{% assign items_grouped = site.posts | group_by: 'author' %}
{{items_grouped}}The output of the above code would be like this.
{"name"=>"sharath", "items"=>[#, #], "size"=>2}
{"name"=>"webjeda", "items"=>[#, #, #, #, #, #, #, #, #, #, #, #], "size"=>12}
{"name"=>"someone", "items"=>[#], "size"=>1}Which means that there are 3 authors sharath, webjeda and someone.
There are 2 posts from Sharath, 12 posts from Webjeda and 1 post from Someone.
The items fields are show with # sign which it is an array and we can dig deeper. I know that items_grouped is an array and items is an array.
{{items_grouped[0].items[0].title}}The output would be the title of the first article written by sharath
First Article Title by SharathThis might have gone over your head but let me give you a working code that sorts posts based on authors.
{% assign items_grouped = site.posts | group_by: 'author' %}
{% for group in items_grouped %}
<h3>{{group.name}}</h3>
{% for item in group.items %}
<p>{{item.title}}</p>
{% endfor %}
{% endfor %}Conclusion
Thanks to the developers at Github and other contributors who are adding new features to Jekyll which are making our life easy. Sorting posts based on parameters other than categories and tags was a little hard. But now, with newly added Jekyll filters, sorting is very easy.
Let me know if this has worked for you. Post your suggestions and feedback in the comment section.
