Developer guides
News blog pagination
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 %}
Page {{ paging.current }} of {{ paging.max }} showing {{ paging.total }} articles
{% 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 %}
«
{% endif %}
{% for i in start..end %}
{% if i == paging.current %}
{{ i }}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
{% if paging.current < paging.max %}
»
{% endif %}
{% endif %}
Example CSS
Copy the following CSS into your template's CSS file.
div.news div.listing p.paging { text-align: center; margin: 20px 0 10px; }
div.news div.listing div.paging { width: 225px; margin: 0 auto 20px; }
div.news div.listing div.paging span a {
float: left;
width: 25px;
text-align: center;
line-height: 22px;
color: #666;
}
div.news div.listing div.paging span.selected a { color: #000; }
div.news div.listing div.paging span.previous a {}
div.news div.listing div.paging span.next a {}
Is this page incomplete?
This documentation is in development.
If you cannot find what you are looking for then please contact us and we will try and prioritise the content for you.
© 2010 OmCore Ltd. All rights reserved - The Manse, Station Road, Plumpton Green, Lewes, East Sussex. BN7 3BX. UK