Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Assets manager add Swiper css and js files

Solved by Karmalakas View solution

Started by Norbert 4 years ago · 5 replies · 359 views

4 years ago

On the main page and some subpages I use Swiper. That's why I decided to separate
it from main theme.js file and include it via assets manager cms GRAV.

In the directory user/themes/abm/assets/css and user/theme/abm/assets/js I have placed the appropriate files.

In the file user/themes/abm/templates/partials/swiper the code:

TWIG

{% do assets.addCss('theme://assets/css/swiper-bundle.min.css') %}
{% do assets.addJs('theme://assets/js/swiper-bundle.min.js', { group: 'bottom', priority: 110 }) %}

<div class="swiper-container {{ swiper.container.classes }}" {{ swiper.container.data|raw }}>
    {% if swiper.thumbs %}
    <div class="swiper-main">
    {% endif %}

    <div class="swiper {{ swiper.swiper.classes }}">
        <div class="swiper-wrapper {{ swiper.wrapper.classes }}">
            {% block swiperWrapper %}{% endblock %}
        </div>

    </div>

    {% if swiper.thumbs %}
    </div>
    {% endif %}

    {% block swiperThumbs %}{% endblock %}
    {% block swiperStatic %}{% endblock %}
</div>

On localhost everything works, but after uploading to the server I have the following problem.

After clearing the cache, the page is displayed ok but only the first time. Each subsequent page view and there are no links to Swiper's .css and .js in the code.

4 years ago

what does your base template look like, in a part of asset blocks?

4 years ago

user/themes/abm/templates/partials/base.html.twig:

HTML

<!DOCTYPE html>
<html lang="{{ html_lang }}">
    <head>
        {% block head %}
            {% include 'partials/head/head.html.twig' %}
        {% endblock head %}

        {% block assets deferred %}
            {{ assets.css()|raw }}
            {{ assets.js()|raw }}
        {% endblock %}
    </head>

    <body class="{{ body_classes }}">
       {% block body %}
           ...

           {% block bottom %}
               {% include 'partials/blocks/footer/js.html.twig' %}
           {% endblock %}
       {% endblock %}
    </body>
</html>

user/themes/abm/templates/partials/head/head.html.twig:

TWIG

{% include 'partials/head/partials/metadata.html.twig' %}
{% include 'partials/head/partials/favicons.html.twig' %}
{% include 'partials/head/partials/css.html.twig' %}
{% include 'partials/head/partials/js.html.twig' %}

user/themes/abm/templates/partials/head/css.html.twig:

TWIG

{% block stylesheets %}
  {% do assets.add('theme://'~dir~'/assets/css/plugins.css', 110) %}
  {% do assets.add('theme://'~dir~'/assets/css/style.css', 110) %}
  {% do assets.add('theme://'~dir~'/assets/css/colors/'~config.theme.theme~'.css', 110) %}
{% endblock %}

user/themes/abm/templates/partials/head/js.html.twig:

TWIG

{% block javascripts %}
    {% do assets.addJs('theme://'~dir~'/assets/js/plugins.js', {group:'bottom'}) %}
    {% do assets.addJs('theme://'~dir~'/assets/js/theme.js', {group:'bottom'}) %}
{% endblock %}

last edited 12/09/22 by Norbert

4 years ago

Now I thought about it. The difference between the localhost environment and the one on the server is that:

localhost site.yaml:

YAML

cache:
  enabled: false

server site.yaml:

YAML

cache:
  enabled: true

And in fact, when I enable cache on localhost, the symptoms are the same. The first time everything is ok. Each time there are no more attached files.

4 years ago Solution

Check this issue thread on Github, It might give you some ideas. I suspect the reason of the problem is the same. Or at least closely related

4 years ago

Never_cache_twig: true
in the page frontmatter and works. Thx.

It's a pity, though, because I thought the following effect could be achieved.
In the Swiper's twig template, I place references to the css and js files necessary for its operation (as shown above), and then in any other template file, e.g.:
partials/blocks/hero/slider:

TWIG

{% embed "partials/swiper/swiper.html.twig" with {
    swiper: {
        container: {
            classes: 'swiper-container swiper-hero',
            data: 'data-effect="fade" data-margin="0" data-items="1"'
        },
    }}%}
    {% block swiperWrapper %}
        {% for image in images %}
            {% include "partials/blocks/hero/slider/slide.html.twig" with {
                index: loop.index0
            }%}
        {% endfor %}
    {% endblock %}
{% endembed %}

And I don't have to worry about anything anymore. In the current situation, I have Swiper's .css and .js files only on pages where it is needed (super), but I have to remember about the proper configuration.

Topic	Replies	Views	Activity
Grav 2 + Admin2: custom page blueprint fields not showing in Admin Themes & Styling · by Pedro M, 2 months ago	4	195	2 months ago
Change page background colour Themes & Styling · by Ian, 2 months ago	3	91	2 months ago
Customizing Blog Post Layout Using "Summary Size and Separator" Themes & Styling · by Norbert, 2 years ago	11	451	3 months ago
Fork of the Knowledge Base theme Themes & Styling · by Lukáš Findeis, 3 months ago	0	45	3 months ago
Oxygen theme not working right Themes & Styling · by Sebadamus, 4 months ago	5	125	3 months ago

Suggested topics