CODEWITHSUNDEEP
jekyll
master
master

Reputation: 266

Looping Previous and Next Post in Jekyll

My Jekyll based portfolio currently lists projects in chronological order. I'm using page.previous and page.next to display the next and previous posts in my portfolio. When there is no 'previous' or 'next' project, there's a giant empty space.

How can I modify:

<section id="more-work">
    {% if page.previous %}
    <div class="left">
        <a class="equalize" href="{{page.previous.url}}" title="Previous Post: {{page.previous.title}}">
            <div>
                <h6> ← Previous Project </h6>
                <h4> {{page.previous.title}} </h4>
            </div>
        </a>
    </div>
    {% endif %} {% if page.next %}
    <div class="right">
        <a class="equalize" href="{{page.next.url}}" title="next Post: {{page.next.title}}">
            <div>
                <h6> Next Project →</h6>
                <h4> {{page.next.title}}</h4>
            </div>  
        </a>
    </div>
    {% endif %}
</section>

...so it loops over to the end of the list or beginning of the list?

Upvotes: 1

Views: 1171

Answers (1)

David Jacquel
David Jacquel

Reputation: 52819

This can do the job :

<section id="more-work">
    {% if page.previous %}
        {% assign previous = page.previous %}
    {% else %}
        {% assign previous = site.posts[0] %}
    {% endif %}
    <div class="left">
        <a class="equalize" href="{{site.baseurl}}{{previous.url}}" title="Previous Post: {{previous.title}}">
            <div>
                <h6> ← Previous Project </h6>
                <h4> {{previous.title}} </h4>
            </div>
        </a>
    </div>

    {% if page.next %}
        {% assign next = page.next %}
    {% else %}
        {%comment%}
           As the array index start at zero we substract 1 to the total count,
           we then get the last post index in the site.posts array
        {%endcomment%}
        {% assign last lastPostIndex = site.posts | size | minus: 1 %}
        {% assign next = site.posts[lastPostIndex] %}
    {% endif %}
    <div class="right">
        <a class="equalize" href="{{site.baseurl}}{{next.url}}" title="next Post: {{next.title}}">
            <div>
                <h6> Next Project →</h6>
                <h4> {{next.title}}</h4>
            </div>
        </a>
    </div>
</section>

Upvotes: 5

Related Questions