Templating / Paging content

When you have more records than you'd like to display on one page, Bolt will paginate your records. To display the pager, add a pager function.

{% setcontent entries = "entries" latest limit 25  %}

{% for entry in entries %}
    {{ entry.title }}
{% endfor %}

{{ pager() }}

Number of records per page¶

Number of records per page on listing pages¶

To configure the number of records per page on a listing page, set the listing_records option for the ContentType in contenttypes.yaml:

    pages:
        name: Pages
        singular_name: Page
        ...
        listing_records: 10 

If there are more than 10 pages, the content will be paginated.

Number of records per page using setcontent¶

If you're using setcontent to fetch records, you can limit the number of records per page by using the limit directive:

{% setcontent pages = 'pages' limit 10 %}
{{ pager(pages) }}

Displaying the pager¶

To show the pager, use the pager function in your twig template:

{{ pager() }}

Pager templates¶

Bolt comes with three partial templates for displaying the pager:

• _pager_basic.html.twig renders a plain html pager
• _pager_bootstrap.html.twig renders a Bootstrap pagination component
• _pager_bulma.html.twig renders a Bulma pagination component

For example, use the following to render the Bulma pagination component:

{{ pager(template='@bolt/helpers/_pager_bulma.html.twig') }} 

If you'd like to define your own pager from scratch, just copy /vendor/bolt/core/templates/helpers/_pager_basic.html.twig to your own theme folder, and rename it to something like mypager.twig. Then, pass the name as an extra parameter to the pager function:

{{ pager(template='mypager.twig') }}

Pager previous and next classes¶

The pagination next and previous link classes can be customized by passing the relevant parameters to the pager() function.

To customize the previous link class use

{{ pager(previous_link_class="my-custom-previous-class") }}

To customize the next link class use

{{ pager(next_link_class="my-custom-next-class") }}

Pager options¶