Jekyll Filters - Where and Group_By

      9 mins read.  

Jekyll Filters - Where and Group_By

Jekyll filters like sort and group by are used to modify the output in a certain fashion for our convenience. I have described a few methods to sort Jekyll posts by categories, tags and other front matter values.

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 post

What 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.



  • Increase Jekyll Build Speed - 15 Mar 2017
  • Jekyll Instant Search in 3 simple steps! - 25 Feb 2017
  • Jekyll Filters - Where and Group_By - 15 Feb 2017
  • Most commonly used Jekyll Liquid Tags - 20 Dec 2016
  • Night Mode Toggle Across the Website! - 12 Nov 2016
  • What 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

    
    
    
    
  • Adding Custom Domain to Github Pages Website
  • Adding Facebook Like Button to Jekyll Blog
  • Adding Sitemap to Jekyll Blog
  • Adding Top Bar to Websites
  • Best Way to Add or Create New Pages in Jekyll
  • Let’s arrange it in the reverse order of alphabets.

    {% assign sorted-posts = site.posts | sort: 'title' | reverse %}
    {% for post in sorted-posts limit: 5 %}
    <li>{{post.title}}</li>
    {% endfor %}

    Output

    
    
    
    
  • Why did I start WebJeda?
  • Why did I choose Jekyll over WordPress?!
  • The easiest search option for Jekyll
  • The Unconventional Share Bar for Jekyll without using JS!
  • Sync Files and Folders with Github Pages
  • What we see here is that the posts are rendered in reverse alphabetical order. I have used thos feature in a website of mine to arrange podcasts by author, in the homepage.

    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

    
    
    
    
  • Night Mode Toggle Across the Website!
  • 14 Ways to Customize your Company Website
  • The easiest search option for Jekyll
  • Optimize Font Awesome to ridiculously low size of 10KB!
  • 13 Tested ways to Speed up Jekyll Blog
  • Sort 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

    
    
    
    
  • Increase Jekyll Build Speed
  • Jekyll Instant Search in 3 simple steps!
  • Jekyll Filters - Where and Group_By
  • Most commonly used Jekyll Liquid Tags
  • Night Mode Toggle Across the Website!
  • 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 Sharath

    This 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.

    This article is written by sharath.dt Follow him @webjeda.