Previous and Next links with a Collections

Share
1

Through some trail and error I figured out that the filters previous and next only work on pages and posts. Unless I was doing something very wrong, I was trying to use them on a filtered collection and they were not returning the results that I expected. They returned items that should not have even been in my collection. Since I finally got it working the way I wanted to, I thought I would share and see if there was a better way to do all this.

The site.portfolio query is my collection, and I use two sets of filters to subset the collection to a particular category AND sort it by Year in reverse. page.type matches the custom category name so that I am getting previous and next items within the same collection subset.

{% comment %} 
  Previous / Next functions
  Assign variables from the entire portfolio collection
{% endcomment %}
{% assign items_raw = site.portfolio | where: 'type', page.type %}
{% assign items = items_raw | sort: 'year' | reverse %}

{% if items.size > 1 %}
  {% comment %}
    Store the index position of the matching items
  {% endcomment %}
  {% for item in items %}
    {% if item.title == page.title %}
      {% assign item_index = forloop.index %}
    {% endif %}
  {% endfor %}
  
  {% assign prev_index = item_index | plus: 1 %}
  {% assign next_index = item_index | minus: 1 %}
  
  {% for item in items %}
    {% if forloop.index == prev_index %}
      {% assign prev = item %}
    {% endif %}
    {% if forloop.index == next_index %}
      {% assign next = item %}
    {% endif %}
  {% endfor %}

  <p>
    {% if prev %}
      <a href="{{ prev.url }}" class="prev" title="{{ prev.title }}">&lt; Older</a>
    {% endif %}
    {% if prev and next %}
      <span> | </span>
    {% endif %}
    {% if next %}
      <a href="{{ next.url }}" class="next" title="{{ next.title }}">Newer &gt;</a>
    {% endif %}
  </p>
{% endif %}

Again, Iā€™m pretty happy with how it is working (seems to be quick and performant on build) but if there is a better way to do this, please chime in.

1 Like
2

Hi, thanks for the code. Any way to add next/previous post link in same category?

3

In My Personal Project Using Post Look With Prev Next Button, I am Sharing The Code Below:

{% if page.collection %}
{% assign posts = site[page.collection]  %}

{% if posts.size > 1 %}
  {% assign prevurl = posts.last.url | remove: ".html" %}
  {% assign nexturl = posts.first.url | remove: ".html" %}
{% endif %}

{% for links in posts %}
  {% if links.title == page.title %}
    {% unless forloop.first %}
      {% assign prevurl = prev.url %}
    {% endunless %}
    {% unless forloop.last %}
      {% assign next = posts[forloop.index] %}
      {% assign nexturl = next.url %}
    {% endunless %}
  {% endif %}
  {% assign prev = links %}
{% endfor %}
{% endif %}

<div class="ui vertical segment left aligned episodes-segment">
    <div class="ui text container">
       <div class="ui header"><span class="title">Podcast</span> Episodes</div>

      {% for episode in site.episodes limit:"1" %}
      
      <div class="ui grid recent-episode">
          <div class="five wide column image">
              {% if forloop.index == 1 %}
              <img src="{{episode.episode_image}}" alt="{{episode.title}}">
              {% endif %}
              <ul class="buttons pagination">
                {% if posts.size > 0 %}
                {% if prevurl %}
                  <li>
                    <a class="ui button" href="{{prevurl | replace: '.html',''}}">Next Episode</a>
                  </li>
                  {% endif %}
                  {% if nexturl %}
                  
                  <li>
                    <a class="ui button previousEpisode {% if forloop.index == 1 %} disabled {% endif %}" href="{{nexturl | replace: '.html',''}}">Previous Episode</a>
                  </li>
                  
                  {% endif %}
                  {% endif %}
                  <li><a class="ui button" href="{{site.url}}/pages/podcasts">View All Episodes</a></li>
            </ul>
          </div>
          {% if forloop.index == 1 %}
          <div class="eleven wide column content"> 
            {{episode.content}}
            {% include social_share.html %}
            <div class="read-more-button">
                <a href="{{episode.url}}" class="ui button read-more">Read More</a>
              </div>
          </div>
          {% endif %}
      </div>
      
      {% endfor %}
    </div> 
 </div>

If Any Developer Want To Work With Me Or Want To Work Together email me "rubel2585@gmail.com"

5
6

For Previous and Next links with a Collection, here is a snippet:

{% capture the_collection %}{{page.collection}}{% endcapture %}

  {% if page.collection %}
    {% assign  document = site[the_collection] %}
  {% endif %}

{% for links in document  %}
  {% if links.title == page.title %}
    {% unless forloop.first %}
      {% assign prevurl = prev.url %}
    {% endunless %}
    {% unless your_collection_name.last.url %}
      {% assign next = document[forloop.index] %}
      {% assign nexturl = next.url %}
    {% endunless %}
  {% endif %}
  {% assign prev = links %}
  {% if page.collection %}
    {% assign  document = site[the_collection] %}
  {% endif %}

{% for links in document  %}
  {% if links.title == page.title %}
    {% unless forloop.first %}
      {% assign prevurl = prev.url %}
    {% endunless %}
    {% unless your_collection_name.last.url %}
      {% assign next = document[forloop.index] %}
      {% assign nexturl = next.url %}
    {% endunless %}
  {% endif %}
  {% assign prev = links %}
{% endfor %}{% endfor %}

You can then use:

{% if prevurl %}<a href="{{ prevurl }}"> {{ page.previous.title }}</a>{% endif %}

{% if nexturl %}<a href="{{ nexturl }}">{{ page.next.title }}</a>{% endif %}