Sort by newest date?

[grahambushell]

Hello,

I'm trying to create a collection of the latest posts (limited to 4) on the homepage of my 11ty site.

Everything is currently working as expected, apart from the posts being limited from the oldest onwards.
What I mean by this is that it's currently displaying the 4 oldest posts and then limiting the rest. What I'm actually trying to achieve is the posts showing the 4 latest/newest (ordered by date) and then limiting the rest.

Here's my code:

{% for post in collections.posts reversed limit:4 %}
  <a href="{{ post.url }}" class="flexContainer">
    <h3>{{ post.data.title }}</h3>
    <time>{{ post.data.date | date: "%d %B '%y" }}</time>
  </a>
{% endfor %}

Is there a way to easily achieve this?

[pdehaan]

I think you might be seeing harttle/liquidjs#312 (I think you’re using liquids templates).
You might need a custom filter to grab the first/last 4 items.

Possibly something like:

---
posts: [1,2,3,4,5,6,7,8]
---

{%- assign _posts = posts | head: -4 -%}
{% for post in _posts reversed %}
  {{ post }}
{% endfor %}

{% comment %}
  8
  7
  6
  5
{% endcomment %}

// .eleventy.js
module.exports = eleventyConfig => {
  eleventyConfig.addFilter("head", (arr, count) => {
    if (count < 1) {
      return arr.slice(count);
    }
    return arr.slice(0, count);
  });
  return {
    // ...
  };
};

[grahambushell]

Thanks for the response - Yes that looks like a very similar issue to what I'm describing.

Thanks for sending over the code - I've just tried the custom filter with the code you attached and that seems to now filter the [1,2,3...] on the page in reverse order (just as I had wanted).

Do you know how would I go about adding in the filter to my original code in order to pull through the posts instead of [1,2,3,...] in the same fashion as the original?

[pdehaan]

Try something like this:

{%- assign recent_posts = collections.posts | head: -4 -%}
{% for post in recent_posts reversed %}
  <a href="{{ post.url | url }}" class="flexContainer">
    <h3>{{ post.data.title }}</h3>
    <time>{{ post.data.date | date: "%d %B '%y" }}</time>
  </a>
{% endfor %}

[grahambushell]

I managed to get it working with the following liquid code:

{% assign postCount = 4 %}
{% assign postList = collections.posts | reverse %}
{% for post in postList limit:postCount %}
  <a href="{{ post.url }}" class="flexContainer mb-05">
    <h3 class="link">{{ post.data.title }}</h3>
    <time class="small default">{{ post.data.date | date: "%d %B '%y" }}</time>
  </a>
{% endfor %}