I’m creating an area at the end of a post that I would like to show links to the previous post, the next post and the post after the next post. The solution needs to be able to fallback and loop back around the post list from the start if there isn’t a next/previous post.
So far I’ve been able to show the previous and next post. If there isn’t a previous post it’ll show the latest post and if there isn’t a next post it’ll show the first ever post.
It’ll work like:
Previous post | Next post | Next post +1
Any help would be hugely appreciated!
<ul>
<li>
<!-- Show the previous post -->
{% if page.previous.url %}
<a href="{{ page.previous.url }}">
<figure>
<img src="{{ page.previous.thumbnail }}">
<figcaption><p>{{ page.previous.title }}</p></figcaption>
</figure>
</a>
{% else %}
<!-- If there is no previous post, show the oldest post -->
{% for post in site.categories.projects limit:1 %}
<a href="{{ post.url }}">
<figure>
<img src="{{ post.thumbnail }}">
<figcaption><p>{{ post.title }}</p></figcaption>
</figure>
</a>
{% endfor %}
{% endif %}
</li>
<li>
<!-- Show the next post -->
{% if page.next.url %}
<a href="{{ page.next.url }}">
<figure>
<img src="{{ page.next.thumbnail }}">
<figcaption><p>{{ page.next.title }}</p></figcaption>
</figure>
</a>
{% else %}
<!-- If there is no next post, sort the posts and show the latest post -->
{% assign sorted = (site.categories.projects | sort: 'date') %}
{% for post in sorted limit:1 %}
<a href="{{ post.url }}">
<figure>
<img src="{{ post.thumbnail }}">
<figcaption><p>{{ post.title }}</p></figcaption>
</figure>
</a>
{% endfor %}
{% endif %}
</li>
<li>
<!-- Show the post after the next post here -->
<!-- If there is no post after the next post, show the latest post -->
</li>
</ul>