Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pagination template component for Craft CMS. Excessive links are replaced by elipsis. More info: http://craftsnippets.com/articles/ellipsis-pagination-component-for-craft-cms
{# v2 #}
{# http://craftsnippets.com/articles/ellipsis-pagination-component-for-craft-cms #}
{# requires pageInfo variable #}
{# settings #}
{% set neighbours = 1 %}
{# symbols #}
{% set prev = '❮' %}
{% set next = '❯' %}
{% set dots = "…" %}
{# single numeric link #}
{% macro numericLink(url, number, current) %}
<li>
<a href="{{url}}" data-number="{{number}}" class="pagination-link {{current ? 'is-current' : null}}" aria-label="{{current ? 'current page'|t : 'go to page'|t ~ ' ' ~ number}}" {{current ? 'aria-current="page"'}}>{{number}}</a>
</li>
{% endmacro %}
{# next/prev link #}
{% macro textLink(url, content, aria, number) %}
<li>
<a href="{{url}}" data-number="{{number}}" class="pagination-link" aria-label="{{aria}}">{{content|raw}}</a>
</li>
{% endmacro %}
{# ellipsis #}
{% macro ellipsis(content) %}
<li>
<span class="pagination-ellipsis">{{content|raw}}</span>
</li>
{% endmacro %}
{# pagination logic #}
{% if pageInfo is defined and pageInfo.totalPages > 1 %}
{% import _self as self %}
{# seomatic #}
{# https://github.com/nystudio107/craft-seomatic#pagination-and-seo #}
{% if seomatic is defined %}
{% do seomatic.helper.paginate(pageInfo) %}
{% endif %}
{# url attributes #}
{% set urlParams = craft.app.request.getQueryStringWithoutPath() is not empty ? '?' ~ craft.app.request.getQueryStringWithoutPath() %}
<nav class="pagination" role="navigation" aria-label="{{'pagination'|t}}">
<ul class="pagination-list">
{# previous #}
{% if pageInfo.prevUrl %}
{{ self.textLink(pageInfo.prevUrl~urlParams, prev, 'previous page'|t, pageInfo.currentPage - 1) }}
{% endif %}
{# first #}
{% if pageInfo.currentPage - neighbours > 1 %}
{{ self.numericLink(pageInfo.firstUrl~urlParams, '1') }}
{% endif %}
{# ellipsis before current #}
{% if pageInfo.currentPage - neighbours > 2 %}
{{ self.ellipsis(dots) }}
{% endif %}
{# links before current #}
{% for page, url in pageInfo.getPrevUrls(neighbours) %}
{{ self.numericLink(url~urlParams, page) }}
{% endfor %}
{# current #}
{{ self.numericLink('', pageInfo.currentPage, true) }}
{# links after current #}
{% for page, url in pageInfo.getNextUrls(neighbours) %}
{{ self.numericLink(url~urlParams, page) }}
{% endfor %}
{# ellipsis after current #}
{% if pageInfo.totalPages - pageInfo.currentPage > neighbours + 1 %}
{{ self.ellipsis(dots) }}
{% endif %}
{# last #}
{% if pageInfo.currentPage + neighbours < pageInfo.totalPages %}
{{ self.numericLink(pageInfo.lastUrl~urlParams, pageInfo.totalPages) }}
{% endif %}
{# next #}
{% if pageInfo.nextUrl %}
{{ self.textLink(pageInfo.nextUrl~urlParams, next, 'next page'|t, pageInfo.currentPage + 1) }}
{% endif %}
</ul>
</nav>
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.