CSS only loaded on first page call, but not thereafter

Support Themes & Styling
1

I have a funky problem : A page loads correctly the first time, but “forgets” to load a required css file on refresh. When I say “forgets” I mean that the <link href="/user/themes/myquark/css/mautic.css" type="text/css" rel="stylesheet"> just is included on the first call.

image
image501×545 7.73 KB
>> image

The css is loaded from within the page.md

---
title: contact
body_classes: 'modular header-image fullwidth'
menu: contact
onpage_menu: false
content:
    items: '@self.modular'
process:
    twig: true
---
{% do assets.addCss('theme://css/mautic.css') %}

## Entrer en contact

par Courrier :

<snip> 

---

## Rester en contact

Abonnez-vous à notre liste de diffusion

[plugin:mautic](1)

[mi=explore]

with

{% extends 'partials/base.html.twig' %}

{% block content %}

{% set cols = page.content|split('<hr />') %}

<div class="columns">
    <div class="column col-6">
        {{ cols[0]|raw }}
    </div>
    <div class="column col-6">
        {{ cols[1]|raw }}
    </div>
</div>
{% endblock %}

Any ideas ? This is 1.7-RC3.

Thanks!

2

Have you tried with
Enable Timestamps on Assets
in the System Configuration?

– Harald

3

Firstly, I can reproduce the behaviour you are seeing.

I guess the following is happening:
A page’s content is only rendered once and then stored in cache. So the assets.addCss() in the content of the page is only being called the first time it is accessed. The next time, the content is fetched from cache. addCss() will not be executed again.
After clearing the cache, disabling the cache, or marking the cache stale, the page will be rendered again.

A twig template is executed every time and hence addCss() is executed every time.

Try added the addCss() inside the template and it should work fine.

You can take a simple test by adding the following to both the template and the page instead of your addCss():

{{ "now"|date("F jS \\a\\t g:i:sa") }}

Enable cache and disable cache and see what happens.

4

Thanks, Harald.

Just tried (and cleaned the cache) : no difference.

But I played with other configuration settings, and disabling the caching solves the issue.

Not sure disabling the cache is what I want, but it may be a first hint to track the problem down.

Thanks again!

5

Thanks pamtbaau.

So I moved the addCss to the html.twig, and now all is working as expected.

Which is, though, against my intention which is to load the css only on pages where I need it. And duplicating the template just for that is not elegant.

Just found out that if I disable caching in frontmatter, things work. I’ll leave it there.

---
title: contact
cache_enable: false
process:
    twig: true
---
{% do assets.addCss('theme://css/mautic.css') %}

blablabla

Thanks all, that solution is good enough for me.
Closed.

6

I wonder if disabling cache for the page is a good solution. It may be in your use-case.

Alternatives:

  • You could add a template ‘contact.html.twig’ and use that template for your contact page. Add the addcss to that template.
  • You could add an if statement inside your default twig and test if the contact page is being processed and if so call addCss(). This if-statement will only be a very small penalty.
7

Now that’s something.

Came across the never_cache_twig: true frontmatter setting and I am confused.

When I add this instead of disabling the cache altogether, things work as well.

The doc says it “will allow you to add a processing logic that can change dynamically on each page load”, which isn’t my case. The doc continues “rather than caching the results and storing it for each page load.” So apparently the output of my addCss is NOT cached, although static.

Looks like a bug to me. What are your thoughts.

((https://learn.getgrav.org/16/content/headers#never-cache-twig))

8

It sure isn’t. On the other hand, it’s a very small page and I would have accepted the penalty over having to juggle with templates and such. I pretty much like the concept of adding things via twig.

And it seems that never_cache_twig: true is getting me even closer.