topic Re: Blog Pagination – show more pages in CMS Development

Blog Pagination – show more pages

eyeson — Tue, 10 Nov 2020 09:23:48 GMT

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.

Lisa

Re: Blog Pagination – show more pages

dennisedson — Tue, 10 Nov 2020 18:16:47 GMT

Hey @eyeson !

Welcome to the Community!

Let me introduce you to smart folks here

@alyssamwilie, @Kevin-C , @Stephanie-OG , meet @eyeson 😀

How would any of you go about solving this one?

Re: Blog Pagination – show more pages

Kevin-C — Wed, 11 Nov 2020 13:58:31 GMT

Hey @eyeson and thanks @dennisedson

I'll circle back to this friday!

Re: Blog Pagination – show more pages

alyssamwilie — Thu, 12 Nov 2020 04:59:07 GMT

@eyeson

I believe this snippet from the Developer Code Gallery does what you're looking for - https://designers.hubspot.com/code-gallery/entry/us/dontgojasonwaterfalls-blog-numbered-pagination

Re: Blog Pagination – show more pages

eyeson — Thu, 12 Nov 2020 09:25:27 GMT

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

Re: Blog Pagination – show more pages

eyeson — Thu, 12 Nov 2020 12:59:49 GMT

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!