Winter CMS resources and help articles

Simple and to the point. Optimized by the community.

Create a custom pagintion for the Winter.Blog Plugin.

0
by qroft, last modified on June 22nd, 2022

When using the Winter Blog plugin the component also creates you an example pagination with a left arrow together with the word "Last", then ALL PAGES followed by a right arrow and the word "Next".

The problem is that with many items, the pagination can become very big and depending on how you CSS it, it might break into a second row.

So instead of having a pagination like PREVIOUS 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14 - 15 - 16 NEXT

The following code allows you to have something like this: PREVIOUS 5 - 6 - 7 - 8 - 9 NEXT

{% if posts.currentPage < posts.lastPage - 4 %}
        {% for page in posts.currentPage..posts.currentPage + 4 %}
                <a href="{{ this.page.baseFileName | page({ (blogPosts.pageParam): page }) }}" class="{{ posts.currentPage == page ? 'active' : null }} item">{{ page }}</a>
        {% endfor %}
{% else %}
        {% for page in posts.currentPage..posts.lastPage  %}
        <a href="{{ this.page.baseFileName | page({ (blogPosts.pageParam): page }) }}" class="{{ posts.currentPage == page ? 'active' : null }} item">{{ page }}</a>
        {% endfor %}
{% endif %}

On the first and second line the number "4" defines how many items you want to be shown between the PREVIOUS and the NEXT button.

Discussion

0 comments

We use cookies to measure the performance of this website. Do you want to accept these cookies?