bohan
September 26, 2017, 4:30pm
#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…
bohan
September 26, 2017, 5:15pm
#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 my
base.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&subset&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.
there are examples that works in the list of threads i provide.
Otherwise use
bohan
September 26, 2017, 5:24pm
#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
bohan
September 26, 2017, 5:30pm
#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.
don’t forget to extend {% extends 'partials/base.html.twig' %}
bohan
September 26, 2017, 5:46pm
#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 %}
try with calling parent()
{% block stylesheets %}
{% do assets.addCss('//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css') %}
{{ parent() }}
{% endblock %}
bohan
September 26, 2017, 6:32pm
#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).
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
bohan
September 26, 2017, 7:10pm
#12
dimitrilongo:
i tried it works for me
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!
If you serve font-awesome/4.7.0/css/font-awesome.css
from your server you can set css_pipeline: true
bohan
September 26, 2017, 8:30pm
#14
Cool, that is good to know!
Many thanks for all your input and perseverance on this topic! I learned a lot