How to conditionally load external stylesheet on one page?

Support
1

Quite new at Grav and loving it so far, but at the moment I am struggling to find something that is very simple in for example WP.

For a site I am putting together I need to load Font Awesome on one page only.

Is it possible to load conditionally on a per page basis? I have found {% if singular %}, but that is too broad.

Any help more than welcome, because the Google doesn’t seem to be my friend today…

2

many threads about that

https://discourse.getgrav.org/search?q=assets%20per%20page

or

3

Thanks for your reply.

I went to the links you pointed to, but I fail to see how I can load a stylesheet on a specific page.

Perhaps better with an example of part of the <head>-section of mybase.html.twig`:

<head>
   <link rel='stylesheet' id='receptar-google-fonts-css' href='//fonts.googleapis.com/css?family=Roboto%7CRoboto+Condensed%3A400%2C300%7CAlegreya%3A400%2C700&#038;subset&#038;ver=44d4db587900ff753163772c910c3b34' type='text/css' media='all'/>
  <link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
  {% block stylesheets %}
    {% do assets.addCss('theme://genericons/genericons.css') %}
    {% do assets.addCss('theme://css/starter.css') %}
    {% do assets.addCss('theme://css/style.css') %}
    {% do assets.addCss('theme://css/colors.css') %}
    {% do assets.addCss('theme://css/jetpack.css') %}
{#     {% do assets.addCss('theme://css/lightbox.css') %} #}
    {% do assets.addCss('theme://css/custom.css') %}
  {% endblock %}
  {{ assets.css() }}

I would like to load the link to the Font Awesome stylesheet only on a specific page, not globally.

4

there are examples that works in the list of threads i provide.
Otherwise use

5

As it is for one page only I would prefer not to use a plugin for it.

I will plow through the list then…

Thx

6

The following thread has the answer to my question: Page-specific CSS (loads only on that page), which indeed was an entry in the list that @dimitrilongo gave in his initial reply.

The solution is to simply include the file inside tags in your page markdown.

7

don’t forget to extend {% extends 'partials/base.html.twig' %}

8

I tried that, but didn’t work, see below what I did:

In the twig of this page I added under {% extends 'partials/base.html.twig' %}

{% block stylesheets %}
    {% do assets.addCss('//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css') %}
{% endblock %}
9

try with calling parent()

{% block stylesheets %}
   {% do assets.addCss('//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css') %}
   {{ parent() }}
{% endblock %}
10

Yes, tried that too, but no joy either.

It’s okay, I have added <link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/> straight to the page’s .MD file and although not pretty, it saves installing a plugin.

I find it strange though that something that is so trivial in WP, seems to be so complicated with Grav (or Twig for that matter).

11

i tried it works for me

{% block stylesheets %}
   {% do assets.addCss('//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css') %}
   {{ parent() }}
{% endblock %}

as a WP dev, i switch all my small-medium project to Grav, much easier, faster,Rapid development et versionning so easy

12

Arghhhh, yup got it working now too. In systems.yaml I had css_pipeline: set to true and then it doesn’t work.

I’m with you on the switching over small and medium projects to Grav! I tried the Simply Static plugin (for WP), but Grav takes things to a whole different level!

13

If you serve font-awesome/4.7.0/css/font-awesome.css from your server you can set css_pipeline: true

14

Cool, that is good to know!

Many thanks for all your input and perseverance on this topic! I learned a lot :grinning:

15

Can anyone clarify one more point on this topic?

The offered solution does add the css on a per page basis. However, it prepends the called CSS to the top of the list. How can I specify it should be appended to the bottom of the css list?

For example, my base.html.twig has

x.css
y.css

When I modify a particular individual page template.html.twig to add z.css using this method, then the rendered order automatically becomes

z.css
x.css
y.css

because the Grav system by default prepends to the top of the list.

How can specify that it should instead append to bottom of the list?

The final result I need is

x.css
y.css
z.css

16

RESOLVED. The answer was in the documentation link previously provided.

The solution is to specify the priority number associated with the CSS file.

Grav assigns a default priority value of 10 and prepends page-specific (or plugin-specific) CSS files to the list of all CSS files from the base.html.twig which have that default priority value of 10 (i.e., all CSS files which by default have no priority specified).

To get an individual page-specific CSS file to be listed below all those normal CSS files, explicitly set a priority value of less than 10 to that unique asset.

{% block stylesheets %}
   {% do assets.addCss('theme://css/z.css', { priority: 5}) %}
   {{ parent() }}
{% endblock %}

And, so, while all the other style sheets have no priority value specified and therefore by default get assigned 10, this one has been explicitly set to priority 5 which forces Grav to list it below all the others.

Success. I now have the required cascade for the unique page:

x.css
y.css.
z.css

I hope this helps someone in the future.