Filter posts by current date and then for loop with limit

Question

I want to show only upcoming events on the homepage, and then limit to three. I'm able to loop through all the events, but I'm not able to figure out how to setup the filter.

I set this up originally but realized that the loop stops at the limit 3 I set:

{% capture now %}{{ 'now' | date: "%Y-%m-%d" }}{% endcapture %}
{% for event in site.events limit:3 %}
  {% capture date %}{{ event.date | date: "%Y-%m-%d" }}{% endcapture %}
  {% if date >= now %}

Therefore, I realize I need to setup the filter entirely outside the for loop, and then loop through that filtered array.

Here's what I was thinking would work instead, but it doesn't work:

{% capture now %}{{ 'now' | date: "%Y-%m-%d" }}{% endcapture %}
{% capture date %}{{ site.events | date: "%Y-%m-%d" }}{% endcapture %}
{% assign filtered_events = site.events | where_exp:"date", "date >= now" %}
{% for event in filtered_events limit:3 %}
<!--insert content-->
{% endfor %}

I know I probably need to use a where_exp which returns a filtered array that's that I can loop through but just can't figure out how to set this up. Thanks for the help!

Answer 1

I think the root cause of your where_exp not working is due having the mismatch date format from {{ 'now' | date: "%Y-%m-%d" }} and each events date field. I'm observing the default date format for *.md files in _posts is date: "%Y-%m-%d %H:%M".

Here is a similar question to yours that suggests normalizing the date formats for correct comparison.

How about simplifying your code by using site.time instead of now with a custom date format?

site.time

The current time (when you run the jekyll command).

I was able to get the below working in my small jekyll test environment using minima, .md files in my _posts directory.

{% assign filtered_posts = site.posts | where_exp: "post", "post.date >= site.time" %}
{% assign sorted-posts = filtered_posts | sort: 'post_date' | reverse %}
{% for event in sorted-posts limit:3 %}
    {{ event.id | inspect }}
{% endfor %}

Note: Added reverse sorting so that you only show the 3 closest posts to the time you calculated the current date using liquid/jekyll.

The output of {{ event.id | inspect }} is below when I ran the sample code above on 08-12-2019:

"/misc/2019/08/13/bar" "/misc/2019/08/14/lala" "/misc/2019/08/15/bar-opy"

The files in my _posts directory.

2016-05-19-super-short-article.md
2016-05-20-my-example-post.md
2016-05-20-super-long-article.md
2016-05-20-this-post-demonstrates-post-content-styles.md
2016-05-20-welcome-to-jekyll.md
2019-08-12-foo.md
2019-08-13-bar.md
2019-08-14-lala.md
2019-08-15-bar-opy.md
2019-08-16-bar.md