Blog Pagination – show more pages

[eyeson]

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 

[eyeson · Accepted solution]

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! 

[alyssamwilie]

@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

[eyeson]

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

[Kevin-C]

Hey @eyeson and thanks @dennisedson 

I'll circle back to this friday!

[dennisedson]

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?