CMS Development

paulpf
Member

Blog pagination with loop

SOLVE

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 >
 Screen Shot 2018-01-02 at 18.52.39.png
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,

0 Upvotes
1 Accepted solution
paulpf
Solution
Member

Blog pagination with loop

SOLVE

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

View solution in original post

2 Replies 2
roisinkirby
HubSpot Product Team
HubSpot Product Team

Blog pagination with loop

SOLVE

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

0 Upvotes
paulpf
Solution
Member

Blog pagination with loop

SOLVE

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