Add frontmatter option to reverse pagination collection

[zachleat]

Just spitballing here.

---
pagination:
  reverse: true
---

Raised in #192

[zachleat]

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

The enhancement backlog can be found here: https://github.com/11ty/eleventy/issues?utf8=%E2%9C%93&q=label%3Aneeds-votes+sort%3Areactions-%2B1-desc+

Don’t forget to upvote the top comment with 👍!

[johanbrook]

👍 for something like this.

I've followed the guide on posts pagination (a vanilla blog post setup), and simply can't get it to reverse the complete posts collection before paginating it.

Example:

---
title: Writings
layout: layouts/main
pagination:
  data: collections.post
  size: 10
---

{%- for post in posts -%}
  <!-- Will sort all posts in ascending order, then paginate on 10 per page -->
{%- endfor -%}

{%- for post in posts | reverse -%}
  <!-- Will paginate on 10 per page, then sort in descending order -->
{%- endfor -%}

Feels like a pretty prio use case 💞

[paulrobertlloyd]

(Comment largely copied from #147, as requested by @zachleat. It would seem this issue has been reported a few times now!)

Currently, I have the following collection defined in my config:

eleventy.addCollection('note', collection => {
  return collection.getFilteredByGlob('**/notes/**/*.md').reverse();
});

which I paginate like so:

---
title: Notes
pagination:
  data: collections.note
  size: 5
---
{% for item in pagination.items %}
  {{ item }}
{% endfor %}

This results in the following – and correct – pagination (10 being the most recent item, 1 the oldest):

--- Page 1 ---
10
9
8
7
6
--- Page 2 ---
5
4
3
2
1

Now, I’d been hoping that I could do away with defining so many collections in my config, and instead use tags. However, as there’s no means of declaratively reversing a collection before it gets paginated, items are now paginated like so:

--- Page 1 ---
1
2
3
4
5
--- Page 2 ---
6
7
8
9
10

Using Liquid’s reversed filter on the forloop doesn’t help here, as that results in the following:

--- Page 1 ---
5
4
3
2
1
--- Page 2 ---
10
9
8
7
6

Basically, there needs to be a means of reversing the order of items in a collection and/or the order of paginated pages. Maybe something like:

---
pagination:
  data: collections.note
  size: 5
  reversed: true
---

or perhaps:

---
pagination:
  data: collections.note.reversed
  size: 5
---

[paulrobertlloyd]

@zachleat Had a thought regarding this. Perhaps rather than (or in addition to) reversing a collection’s order at the pagination level, perhaps there should be an option to set a default order at the global (or folder) config level? As my site displays content from newest to oldest, pretty much every collection I’m using requires reversal before it can being used because 11ty sorts collections from oldest to newest by default. Essentially, 11ty could provide a means of using .reverse() for use within data files.

[edwardhorsford]

@zachleat Had a thought regarding this. Perhaps rather than (or in addition to) reversing a collection’s order at the pagination level, perhaps there should be an option to set a default order at the global (or folder) config level?

I'm reversing the order of pretty much everything for the same reason.

[zachleat]

reverse: true will be included in 0.7.0 but the global preference idea surfaced by @paulrobertlloyd is a separate enhancement issue that needs upvotes: #367. Thanks y’all!

[zachleat]

Docs here https://www.11ty.io/docs/pagination/#how-to-reverse-a-data-set-prior-to-pagination

[paulrobertlloyd]

Thanks @zachleat! As to document the impact of this change, I’ve now been able to remove 33 lines from my config where I was globbing files to create collections and then reversing them.

I’d be able to simplify my setup further by setting the default globally – indeed, still having to hack around this limitation in places, but progress all the same. Thanks again for all you hard work on this project!

[zachleat]

Awesome @paulrobertlloyd! That’s a good win.