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>
@sukrosono

This comment has been minimized.

Copy link

@sukrosono sukrosono commented Aug 31, 2016

thanks tricky parent-thesis 😄

@nelsonauner

This comment has been minimized.

Copy link

@nelsonauner nelsonauner commented Sep 24, 2016

👍

@claudiomateluna

This comment has been minimized.

Copy link

@claudiomateluna claudiomateluna commented Nov 20, 2016

life saving thanks a lot

@stegua

This comment has been minimized.

Copy link

@stegua stegua 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

@asilvadesigns asilvadesigns commented Jan 24, 2017

Awesome, thanks!

@uboubo

This comment has been minimized.

Copy link

@uboubo uboubo 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

@johnpitchko johnpitchko commented May 26, 2017

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

@sio4

This comment has been minimized.

Copy link

@sio4 sio4 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

@sio4 sio4 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

@Jrschellenberg Jrschellenberg commented Oct 15, 2017

A wonderful, concise solution. You have my thanks!

@anshulsamar

This comment has been minimized.

Copy link

@anshulsamar anshulsamar commented Dec 24, 2017

Thank you!!

@88kbbq

This comment has been minimized.

Copy link

@88kbbq 88kbbq 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

@kyletaylored kyletaylored 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

@rmfranciacastillo rmfranciacastillo commented Feb 19, 2019

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

@sylhare

This comment has been minimized.

Copy link

@sylhare sylhare 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. 😉

@ccfz

This comment has been minimized.

Copy link

@ccfz ccfz commented Sep 25, 2019

I needed the collection to be sorted based on a specific date. Here is my code:

{% assign sortedWorkshops = site.workshops | sort: 'start_date' | reverse %}

      {% for workshop in sortedWorkshops %}

...
@dancingmonkey

This comment has been minimized.

Copy link

@dancingmonkey dancingmonkey commented Jul 24, 2020

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

It gives this error because you cannot use parenthesis

@Phlow

This comment has been minimized.

Copy link
Owner Author

@Phlow Phlow commented Jul 27, 2020

It works now without parenthesis.

<ul>
    {% assign sorted = site.projekte | sort: 'date' | reverse %}
    {% for item in sorted %}
    <li>{{ item.title }}</li>
    {% endfor %}
</ul>
@kuz3

This comment has been minimized.

Copy link

@kuz3 kuz3 commented Aug 3, 2020

ty!

@puppylpg

This comment has been minimized.

Copy link

@puppylpg puppylpg commented Sep 4, 2020

👍

@iamalfonse

This comment has been minimized.

Copy link

@iamalfonse iamalfonse commented Oct 20, 2020

Thanks so much for this, seriously 👍

@Phlow

This comment has been minimized.

Copy link
Owner Author

@Phlow Phlow commented Oct 21, 2020

@iamalfonse Your‘re welcome. This is how I feel, if I find useful code snippets :)

@NixImagery

This comment has been minimized.

Copy link

@NixImagery NixImagery commented Dec 19, 2020

Thanks, saved me screwing it up in a hurry. Elegant solution.

@Phlow

This comment has been minimized.

Copy link
Owner Author

@Phlow Phlow commented Dec 19, 2020

@NixImagery You're welcome. That's what gists are for :)

@NavidFehren

This comment has been minimized.

Copy link

@NavidFehren NavidFehren commented Jan 23, 2021

Great, thank you so much!!

@Phlow

This comment has been minimized.

Copy link
Owner Author

@Phlow Phlow commented Jan 23, 2021

@NavidFehren You‘re welcome.

@minheeyoon

This comment has been minimized.

Copy link

@minheeyoon minheeyoon commented May 11, 2021

Thank you so much!!!

@Phlow

This comment has been minimized.

Copy link
Owner Author

@Phlow Phlow commented May 11, 2021

@minheeyoon You‘re welcome. 😸

@wdzajicek

This comment has been minimized.

Copy link

@wdzajicek wdzajicek commented Aug 30, 2021

The date key is now default

As of Jekyll > v4.0.0 date, is the default key used for sorting collection items (provided the collection items have date keys.) The original liquid variable-assignment can be shortened:

<!-- `| sort: 'date '` can be omitted -->
{% assign sorted = site.collection_name | sort: 'date' | reverse %}
<!-- This will accomplish the same thing  -->
{% assign sorted = site.collection_name | reverse %}

By default, two documents in a collection are sorted by their date attribute when both of them have the date
key in their front matter. However, if either or both documents do not have the date key in their front matter,
they are sorted by their respective paths.
https://jekyllrb.com/docs/collections/#custom-sorting-of-documents

See Custom Sorting of Documents on the Collections page of Jekyll docs for more info.

@Phlow

This comment has been minimized.

Copy link
Owner Author

@Phlow Phlow commented Sep 3, 2021

I haven't tested your suggestion. But you write provided the collection items have date keys.

I think for being save it doesn't hurt, in case no date is associated, it doesnt count. What do you think?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment