Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This Liquid loop for Jekyll sorts a collection by date in reverse order
{% comment %}
*
* This loop loops through a collection called `collection_name`
* and sorts it by the front matter variable `date` and than filters
* the collection with `reverse` in reverse order
*
* To make it work you first have to assign the data to a new string
* called `sorted`.
*
{% endcomment %}
<ul>
{% assign sorted = (site.collection_name | sort: 'date') | reverse %}
{% for item in sorted %}
<li>{{ item.title }}</li>
{% endfor %}
</ul>
@brutalcrozt

This comment has been minimized.

Copy link

commented Aug 31, 2016

thanks tricky parent-thesis 😄

@nelsonauner

This comment has been minimized.

Copy link

commented Sep 24, 2016

👍

@claudiomateluna

This comment has been minimized.

Copy link

commented Nov 20, 2016

life saving thanks a lot

@stegua

This comment has been minimized.

Copy link

commented Jan 2, 2017

Thanks, tip quite useful... and it was the first result I found on Google!

@asilvadesigns

This comment has been minimized.

Copy link

commented Jan 24, 2017

Awesome, thanks!

@uboubo

This comment has been minimized.

Copy link

commented Feb 27, 2017

Thanks a lot for your solution!
In my case, I had to change
{% for item in sorted %}
to
{% for collection_name_item in sorted %}.
But again - thank you very much!

@johnpitchko

This comment has been minimized.

Copy link

commented May 26, 2017

Just what I needed, thanks! More reason to learn Liquid.

@sio4

This comment has been minimized.

Copy link

commented Sep 28, 2017

Great! I cannot found it from official site and github repository of jekyll! Thanks!
What I changed is:

{% assign projects = (site.projects | sort: 'date') | reverse %}

to

{% assign mid = site.projects | sort: 'date' %}
{% assign projects = mid | reverse %}

since I faced with the following message:

Liquid Warning: Liquid syntax error (line 1): Expected dotdot but found pipe in "{{(site.projects | sort: 'date') | reverse }}" in projects.html
@sio4

This comment has been minimized.

Copy link

commented Sep 28, 2017

I tested again with some others, and code below also works for my env:

{% assign projects = site.projects | reverse %}
{% for post in projects %}
<...>
@Jrschellenberg

This comment has been minimized.

Copy link

commented Oct 15, 2017

A wonderful, concise solution. You have my thanks!

@anshulsamar

This comment has been minimized.

Copy link

commented Dec 24, 2017

Thank you!!

@88kbbq

This comment has been minimized.

Copy link

commented May 1, 2018

I'm going nuts here trying to loop through all items in a collection.
The index.md uses the home.html template
I want to sort all the items in my tabs collection to display in my home template:

<div id="content">
 	{% for item in site.tabs %}
        {% assign item = site.tabs | sort: 'order' %}
 	{{ item }}
 	{% endfor %}
</div>

The items in the tabs collection use the tab.html template:

<div class="wrapper red">
<div class="tag">
    <div class="tag-title jcenter acenter center">
      <h1 class="title center">{{ item.title }}</h1>
    </div>
    <div class="tag-text center">{{ content }}</div>
    <div class="tag-action center">
      <a class="h3 barbecue-btn my2" href="{{ site.baseurl }}/{{ item.link }}">{{ item.action }}</a>
    </div>
</div>
</div>

An item in the tabs collection has yaml:

---
layout: "tab"
title: "AUTHENTIC AMERICAN BARBECUE"
link: "locations.html"
action: "Find Locations"
order: "1"
---

Treat your family, friends, and special guests to real American BBQ at your next event.

Help

@kyletaylored

This comment has been minimized.

Copy link

commented Nov 29, 2018

I'm going nuts here trying to loop through all items in a collection.
The index.md uses the home.html template
I want to sort all the items in my tabs collection to display in my home template:

@88kbbq you actually seem to be doing it right, just remove the quotes from your order property in your front matter. I used the same approach and it's working for me. (I know this was months ago, but figured for the future lurkers!)

@rmfranciacastillo

This comment has been minimized.

Copy link

commented Feb 19, 2019

Sweet script! I was just looking for something like this 👍

@sylhare

This comment has been minimized.

Copy link

commented Apr 29, 2019

According to Liquid Documentation, now you can just do:

{% for item in site.collection_name reversed %}

I tried it on my theme and both methods give the same output. 😉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.