Presents pagination options allowing the user to navigate through news listing pages.
Copy the following HTML into your news blog listing template file.
The default file is found at: /templates/modules/news/news_blog/news_blog_listing.twig.html
Options
- padding (line 6) - The number of links presented either side of the current page number.
{% if paging.max > 1 %}
<p class="paging">
Page {{ paging.current }}
of {{ paging.max }}
showing {{ paging.total }} articles</p>
<div class="paging clearfix">
{% set padding = 3 %}
{% set start = paging.current - padding %}
{% if start < 1 %}
{% set end = padding - start + paging.current + 1 %}
{% set start = 1 %}
{% else %}
{% set end = paging.current + padding %}
{% endif %}
{% if end > paging.max %}
{% set start = paging.current - padding - (end - paging.max) %}
{% set end = paging.max %}
{% endif %}
{% if start < 1 %}
{% set start = 1 %}
{% endif %}
{% if paging.current > 1 %}
<span class="previous"><a href="{{ paging.previous }}">«</a></span>
{% endif %}
{% for i in start..end %}
{% if i == paging.current %}
<span class="selected"><a href="./?page={{ i }}">{{ i }}</a></span>
{% else %}
<span><a href="./?page={{ i }}">{{ i }}</a></span>
{% endif %}
{% endfor %}
{% if paging.current < paging.max %}
<span class="next"><a href="{{ paging.next }}">»</a></span>
{% endif %}
</div>
{% endif %}
Example CSS
Copy the following CSS into your template's CSS file.
.paging {
text-align: center;
margin: 20px 0 10px;
}
.paging {
width: 225px;
margin: 0 auto 20px;
}
.paging span a {
float: left;
width: 25px;
text-align: center;
line-height: 22px;
color: #666;
}
.paging li.selected a {
color: #000;
}