How do I show the previous, next and next+1 posts on a page? (Half way there)


#1

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>

#2

I think I’ve failed to understand where the issue lies. What part of this is failing?


#3

Hey Joe – Currently this piece of code shows only the previous and next posts. I’d like to show the previous post, the next post and the next next post (the post after the next post).


#4

Try page.next.next.url. If I follow correctly that should get you there.


#5

Nailed it, thank you for all the help!