How to specifically address frontmatter?

i am building my site with the blog skeleton.
now i’m in the process of customizing the antimatter theme.
i’ve changed the header (no more .js) and now i’m having difficulties telling the site to use a specific header image.
i would like to define the name of the image in, maybe like this: banner_img: banner.jpg, and then use the variable (??.banner_img.??) in base.html.twig

  • however all pages would have to be able to find it form the blog’s root. right now they are choosing images from the current page’s folder.

what i tried:

  • page.find('/blog').media.images|first - i have no control over which image gets chosen, other than renaming the images.

alternatively, i would like some twig syntax that would allow me to search that particular folder for, say, images starting with bg, and choose the first from that, but the starts_with filter only returns true or false…

How about:

{{ page.find('/blog').header.banner_img }}

That will get the value you set. If you just use a static name for the header you could do something like:

{{ page.find('/blog').media['blog-header.jpg'].html }}

To display a specific image on any page.

so now i have this in my base.html.twig:

{% set site_header_image = page.find('/blog').header.banner_img %}
{% if site_header_image %}
<header id="header" style="background-image: url({{ site_header_image.url }});">

and my frontmatter has this:

title: Home
blog_url: blog
body_classes: fullwidth

banner_img: bg.png

but the background now stays white.
if i put the “banner_img: bg.png” in, it also stays white…

as for the second solution, i’d rather not edit the twig template each time i want to change the background.

well most likely you have a CSS/HTML issue… what does the output of that <header> tag look like in the rendered page?

You can try using the Grav debugger and doing a:

{{ dump(site_header_image) }}

To ensure you got the correct value for the header image (it will dump the value into the messages tab of the debug bar).

it shows an empty url():
<header id="header" style="background-image: url();">
as i said, it works fine when i choose page.find('/blog').media.images|first instead.

ok, this is what the dump shows:

[2016-03-11 20:45:14] grav.CRITICAL: Expected name or number in "partials/base.html.twig" at line 42 - Trace: #0 /full/path/vendor/twig/twig/lib/Twig/ExpressionParser.php(300): Twig_ExpressionParser->parseSubscriptExpression(Object(Twig_Node_Expre ssion_GetAttr)) #1 /full/path/vendor/twig/twig/lib/Twig/ExpressionParser.php(194): Twig_ExpressionParser->parsePostfixExpression(Object(Twig_Node_Express ion_Name)) #2 /full/path/vendor/twig/twig/lib/Twig/ExpressionParser.php(84): Twig_ExpressionParser->parsePrimaryExpression() #3 /full/path/vendor/twig/twig/lib/Twig/ExpressionParser.php(41): Twig_ExpressionParser->getPrimary() #4 /full/path/vendor/twig/twig/lib/Twig/ExpressionParser.php(559): Twig_ExpressionParser->parseExpression() #5 /full/path/vendor/twig/twig/lib/Twig/TokenParser/Set.php(39): Twig_ExpressionParser->parseMultitargetExpression() #6 /full/path/vendor/twig/twig/lib/Twig/Parser.php(187): Twig_TokenParser_Set->parse(Object(Twig_Token)) #7 /full/path/vendor/twig/twig/lib/Twig/TokenParser/Block.php(38): Twig_Parser->subparse(Ar ray, true) #8 /full/path/vendor/twig/twig/lib/Twig/Parser.php(187): Twig_TokenParser_Block->parse(Object(Twig_Token)) #9 /full/path/vendor/twig/twig/lib/Twig/Parser.php(100): Twig_Parser->subparse(NULL, false) #10 /full/path/vendor/twig/twig/lib/Twig/Environment.php(615): Twig_Parser->parse(Object(Twig_TokenStream)) #11 /full/path/vendor/twig/twig/lib/Twig/Environment.php(667): Twig_Environment->parse(Object(Twig_TokenStream)) #12 /full/path/vendor/twig/twig/lib/Twig/Environment.php(396): Twig_Environment->compileSource('{% set theme_co...', 'partials/base.h...') #13 /full/path/vendor/twig/twig/lib/Twig/Template.php(286): Twig_Environment->loadTemplate('partials/base.h...', NULL) #14 /full/path/vendor/twig/twig/lib/Twig/Environment.php(403) : eval()'d code(51): Twig_Template->loadTemplate('partials/base.h...', 'blog.html.twig', 1) #15 /full/path/vendor/twig/twig/lib/Twig/Environment.php(411): __TwigTemplate_4668f0e6bb71e7a02a1358128add2089143e10bc47732063c8c9702 5cf0cfa08_1249364161->__construct(Object(Grav\Common\Twig\TwigEnvironment)) #16 /full/path/vendor/twig/twig/lib/Twig/Template.php(286): Twig_Environment->loadTemplate('blog.html.twig', '1249364161') #17 /full/path/vendor/twig/twig/lib/Twig/Environment.php(403) : eval()'d code(19): Twig_Template->loadTemplate('blog.html.twig', 'blog.html.twig', 1, '1249364161') #18 /full/path/vendor/twig/twig/lib/Twig/Template.php(381): __TwigTemplate_4668f0e6bb71e7a02a1358128add2089143e10bc47732063c8c9702 5cf0cfa08->doDisplay(Array, Array) #19 /full/path/vendor/twig/twig/lib/Twig/Template.php(355): Twig_Template->displayWithErrorHandling(Array, Array) #20 /full/path/vendor/twig/twig/lib/Twig/Template.php(366): Twig_Template->display(Array) #21 /full/path/vendor/twig/twig/lib/Twig/Environment.php(347): Twig_Template->render(Array) #22 /full/path/system/src/Grav/Common/Twig/Twig.php(334): Twig_Environment->render('blog.html.twig', Array) #23 /full/path/system/src/Grav/Common/Grav.php(186): Grav\Common\Twig\Twig->processSite(NULL) #24 /full/path/vendor/pimple/pimple/src/Pimple/Container.php(113): Grav\Common\Grav::Grav\Common\{closure}(Object(Grav\Common\Grav)) #25 /full/path/system/src/Grav/Common/Grav.php(288): Pimple\Container->offsetGet('output') #26 /full/path/index.php(38): Grav\Common\Grav->process() #27 {main} [] []

and line 42 reads thusly:

{% set site_header_image = page.find('/blog').header.banner_img %}

i’m sorry, i think the previous output was wrong!

i cannot reproduce it anymore even with debug enabled.
it now seems that the header.image variable is returned properly (bg.png), but the url conversion header.banner_img.url or site_header_image.url returns emptiness.

i’m investigating…

i now set it like this:

{% set site_header_image = page.find('/blog').header.banner_img %}
{% if site_header_image %}
<header id="header" style="background-image: url({{ site_header_image }});">

(note the missing .url in the )
it works, but i have no clue why, and i’m not happy with that…

Ok, well site_header_image is just a string, you would still need to get the media:

<header id="header" style="background-image: url({{ page.find('/blog').media[site_header_image].url }});">

solved! thank you so much.
i’m slowly getting the hang of it.
did i already say how happy i am that i can hack away at files instead of using some clunky admin interface / database combination?