CSS missing with {% do paginate() %}

[ulab]

trafficstars

When doing pagination using the Twig function paginate(), the plugin's CSS is not being added as an asset.

This is probably, because onPageInitialized() checks if the page header has header.content.pagination set - which the page doesn't since I am doing it in the twig template.

[Heraes-git]

@ulab : I have the same problem, when using a collection and a pagination in a modular page (seems that the way modular pages are designed, doesn't allow events to point to the instant they are processed).

As a workaround, just add, in your base.html.twig, the asset (you can condition it to a route, as I did) :

{% if page.route == "/your_page" %}
  {% do assets.addCss('plugin://pagination/css/pagination.css', {'group':'workaround'}) %}
{% endif %}
{{ assets.css('workaround') }}

I've assigned it to a group, for more control, but that's totally optional.

[Heraes-git]

I forgot one thing : you have to declare a pagination: true in your frontmatter, even if you use {% do paginate() %} !

Just take care of not using a limit: frontmatter field while using a {% do paginate() %} !

Here's the way the plugin works (I discovered that after 2 hours of debugging) :

• Or you set all the options in the frontmatter (pagination: true, limit: [integer]). It will generate automatically the pagination if you just used the call of the plugin's template at the end of your template.
• Or you use a single pagination: true, and you use a {% do paginate() %}, and pass it the collection and the limit. But you can't do both technics !

So, here how I adapted my code to solve that conflict :

{# *** Collection preprocessing *** #}
{% if page.collection %}
	{% set collection = page.collection() %}
	{% set limit = page.header.content.limit ?: '2' %}
{% else %}
	{% set limit = '5' %}
	{% set collection_options = { items: {'@page.children': page.url}, 'limit': limit, 'order': {'by': 'date', 'dir': 'desc'}, 'pagination': true } %}
	{% set collection = page.collection(collection_options) %}
{% endif %}
{# *** /Collection preprocessing *** #}
{% if config.plugins.pagination.enabled and collection.params.pagination and not page.header.content.limit %}
	{% do paginate(collection, limit) %}
{% endif %}

{% for item in collection %}
... Things to display the items...
{% endfor %}

{% if config.plugins.pagination.enabled and collection.params.pagination %}
		{% include "partials/pagination.html.twig" with {'base_url':page.url, 'pagination':collection.params.pagination} %}
{% endif %}

[ulab]

As a workaround I have just added the pagination's CSS directly in the twig template where I am using it, but I still think it is a bug.

{# I should not be required to do this, should I? #}
{% do assets.addCss('plugin://pagination/css/pagination.css') %}

Mine seems to work without setting pagination: true in the frontmatter. But yes, IIRC I was not able to use the limit option this way and had to do it in the paginate() function instead:

{% set options = { 'items': '@self.descendants', 'filter': {'type': 'blogpost'}, 'order': {'by': 'date', 'dir': 'desc'}} %}
{% set collection = page.collection(options) %}
{% do paginate( collection, 3 ) %}

[Heraes-git]

@ulab Depends how you added it. Just doing a :

{% do assets.addCss('plugin://pagination/css/pagination.css') %}

isn't enough. Because this instruction has to be processed during the page's HTML <header> construction. So if you place it like that in your sub-template, it won't work. A template is generally extending the base.html.twig : so in your page's template wich is extending the base, you have to write things between blocks. So if you're not directly adding the snippet in the base.html, do this instead (if you extends it) :

 {% block stylesheets %}
    {{ parent() }}
    {% if page.route == "/your_page" %}
        {% do assets.addCss('plugin://pagination/css/pagination.css', {'group':'workaround'}) %}
    {% endif %}
    {{ assets.css('workaround') }}
{% endblock %}

and in your base.html.twig :

{% block stylesheets %}
    {% do assets.addCss(... your usual stylesheets...) %}
{% endblock %}

[ulab]

It works fine by just adding it to the template. The keyword is "defferred assets" which have been around since last major release I think.

    {% block assets deferred %}
        {{ assets.css()|raw }}
    {% endblock %}

[Heraes-git]

Ok, fine. I knew about the deferred thing, but didn't know that adding a {{ assets.css() }} anywhere would work if using the deferred keyword. Thx.