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: