topic Re: Blog pagination with loop in CMS Development

Blog pagination with loop

paulpf — Wed, 03 Jan 2018 11:08:54 GMT

Hi,
I've come across several posts regarding pagination but I can't fix my problem.
I'm trying to run a loop for every pages I might have based on my contents and trying to :
display the current one, display the next one, and add a link for the other pages.
It is supposed to look like this (considering we are on the first page) but all I have so far is : 0 0 >

This is my code so far :

  <div class="p-n flex-row a-c">
    <a href="{{ content.post_slug }}" class="p-n c">
      <span>{{ current_page_num }}</span>
    </a>
    <a href="{{ content.next_post_slug }}" class="p-n">
      <span>{{ next_page_num }}</span>
    </a>
    <a href="{{ content.next_post_slug }}">
      <img src="/.../blue-arrow.svg" alt="blue arrow">
    </a>
  </div>

When I'm trying to run a foor loop on it I can't display what I want.
If anyone has an answer it would be greatly appreciated !

Best,

Re: Blog pagination with loop

roisinkirby — Fri, 02 Feb 2018 10:46:10 GMT

Hello @paulpf are you still experiencing this roadblock? If so let me know and I'll connect you with a design expert.

Re: Blog pagination with loop

paulpf — Fri, 02 Feb 2018 15:50:01 GMT

Hi,
No I've finally fixed it. All good thanks,

Here is the solution I found if anyone else need it

<div class="pagination wrapper flex-row space-between">
  {% if not simple_list_page %}
    <div class="pages-navigation flex-row align-center">
        {% if current_page_num > 1 %}
        {% set previous = current_page_num - 1 %}
        <a rel="nofollow" href="{{ blog_page_link(previous) }}"> 
            <img class="blue-arrow-reverse" src="" alt="blue arrow">
        </a>
      {% endif %} {% if current_page_num %}
      <a href="{{ content.post_slug }}" class="page-number current">
        <span>{{ current_page_num }}</span>
      </a>
      {% endif %} {% if next_page_num %}
      <a href="{{ blog_page_link(next_page_num) }}" class="page-number">
        <span>{{next_page_num }}</span>
      </a>
      <a rel="nofollow" href="{{ blog_page_link(next_page_num) }}">
        <img src="" alt="blue arrow">
      </a>
      {% endif %}
    </div>
  {% endif %}

Best.
Paul