Sorting Jekyll collections by custom variable

Jekyll collections front matter type

Template Supply is built with Jekyll, based on a collection called templates.

This collection has its own custom front matter variable, or type, with different attributes.

In this case, one variable would be software, another would be format, the ratio of each template, price, etc.

We can set our own front matter variables on top of the Jekyll defaults, that we can later access in Liquid.

This is particularly useful to sort collections that share some attributes. For example, the front matter for one template post could look like this:

---
title: Storyboard Theme for scope films
layout: product
software: Apple Keynote
format: DIN A4 landscape
ratio: 2.39:1
description_markdown: >-
  Apple Keynote Storyboard Theme Presentation for 2.39:1 aspect ratio.
date: 2020-01-30 09:24:48 +0100
last_modified_at: 2020-02-26 22:24:16 +0100
id:
price: 6.99+
text-button: How can I get this template?
image: /images/templates/keynote-storyboard-template.png
---

Now suppose we would like to browse only the Apple Keynote from the templates collection, Liquid templating language makes this simple to do.

In this post we look at how we can do this manually. First we need to write a page to sort the templates with the Apple Keynote variable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
title: Keynote themes and templates
subtitle: Editable templates for Apple Keynote
permalink: /keynote-themes/
hero: Keynote Themes
layout: default
---
{% assign templates = site.templates | where_exp: "template", "template.software contains 'Apple Keynote'" %}

{% for template in templates reversed %}
<li class="">
  <a href="{{ template.url }}" class="" title="{{template.title}}">
    {{ template.title }}
    <div class="">
    <time datetime="{{template.date}}" class="">{{ template.date | date_to_long_string }}</date>
  </a>
</li>
{% endfor %}

Sorting happens in line 8:


{% assign templates = site.templates | where_exp: "template", "template.software contains 'Apple Keynote'" %}

And that’s it, Liquid is pretty straightforward. We can now visit Keynote.