Blog Pagination – show more pages

Develop, Build & Integrate CMS Development
1

Hi!

I’m struggling with adding more pages to my pagination (as long as there are more available). Now, only the current and next page is shown. I want to show 2-3 pages in advance and maybe even the last page like in the Forum here:

This is my code now:

 <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) }}">
 <span class="btn"><i class="fa fa-angle-double-left" aria-hidden="true"></i></span>
 </a>
 {% endif %} {% if current_page_num %}
 <a href="{{ content.post_slug }}" class="page-number btn current">
 <span>{{ current_page_num }}</span>
 </a>
 {% endif %} {% if next_page_num %}
 <a href="{{ blog_page_link(next_page_num) }}" class="page-number btn">
 <span>{{next_page_num }}</span>
 </a>
 <a rel="nofollow" href="{{ blog_page_link(next_page_num) }}">
 <span class="btn"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
 </a>
 {% endif %}
 </div>
 {% endif %}
 </div>

I hope someone could help me. I’m not that experienced with code besides HTML/CSS.

Br

Lisa

2

Hey @eyeson !

Welcome to the Community!

Let me introduce you to smart folks here

@alyssamwilie, @Kevin-C , @Stephanie-OG , meet @eyeson :grinning_face:

How would any of you go about solving this one?

3

Hey @eyeson and thanks @dennisedson

I’ll circle back to this friday!

4

@eyeson
I believe this snippet from the Developer Code Gallery does what you’re looking for - HubSpot | Blog Numbered Pagination

5

That looks very promising! Thank you so much, I’ll try that right now!

6

I had to adapt it a little bit. Here’s the solution:

<div class="pagination wrapper flex-row space-between">
{% if not simple_list_page %} 

<div class="pages-navigation flex-row align-center">
 {% set page_list = [-2, -1, 0, 1, 2] %}
 {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
 {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
 {% elif current_page_num == 2 %}{% set offset = 1 %}
 {% elif current_page_num == 1 %}{% set offset = 2 %}
 {% else %}{% set offset = 0 %}{% endif %} 

 {% if current_page_num > 1 %}<a href="{{ blog_page_link(last_page_num) }}"><span class="btn"><i class="fa fa-angle-double-left" aria-hidden="true"></i></span>
 </a>{% endif %}
 {% if contents.total_page_count > 5 %}
 {% if current_page_num >= 4 %}
 <a class="page-number btn" href="{{ blog_page_link(1) }}"><span>1</span></a>
 <a class="elipses" href="{% if current_page_num <= 5 %}{{ blog_page_link(1) }}{% else %}{{ blog_page_link(current_page_num - 5) }}{% endif %}">...</a>
 {% endif %}
 {% endif %}

 {% for page in page_list %}
 {% set this_page = current_page_num + page + offset %}
 {% if this_page > 0 and this_page <= contents.total_page_count %}
 <a {% if this_page == current_page_num %} class="page-number btn current"{% else %}class="page-number btn"{% endif %} href="{{ blog_page_link(this_page) }}"><span>{{ this_page }}</span></a>
 {% endif %}
 {% endfor %}

 {% if contents.total_page_count > 5 %}
 {% if contents.total_page_count - current_page_num > 2 %}
 <a class="elipses" href="{% if contents.total_page_count - current_page_num <= 5 %}{{ contents.total_page_count }}{% else %}{{ blog_page_link(current_page_num + 5) }}{% endif %}">...</a>
 <a class="page-number btn" href="{{ blog_page_link(contents.total_page_count) }}"><span>{{ contents.total_page_count }}</span></a>
 {% endif %}
 {% endif %}
 {% if next_page_num %}<a href="{{ blog_page_link(current_page_num + 1) }}">
 <span class="btn"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
 </a>{% endif %}

</div>
 {% endif %}
 </div>

Thanks again for the input!