Hero_image setting ignored

Support Themes & Styling
1

I am running Grav with a child theme of Quark. In my page’s yaml frontmatter I have

hero_image: hanging.jpg

However, in the directory of the images, Grav/hero will find the first image it hits, which is anything that starts with an alphanumeric before ‘h’. To fix this I have to rename the image I want as the hero image to ‘00_hanging.jpg’ so that Grav/hero will always find it first.

Is there a YAML or other config option that I need to make it use the image defined in the page’s metadata?

2

By default, Quark looks inside the folder containing the page for the hero image.
Depending on the template, if field ‘hero_image’ is not set, or the image cannot be found, the first image in the page’s folder will be used.

For the modular page using /templates/modular/hero.html.twig:

{% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : page.media.images|first %}

For the blog page using /templates/blog.html.twig:

{% set blog_image = page.media.images[page.header.hero_image] ?: page.media.images|first %}

You say “However, in the directory of the images […]”?

  • Do you have a specific folder where you store your images?
  • Have you changed the templates?
  • Which template are you referring to?
3

I see. I am surprised it was not finding the image, as once I renamed it to 00_* it worked, but I will double chain again to make sure the correct image is actually there.

I store the images in the directory where the blog’s item.md is stored. There probably is a better way that I will soon learn of, but it is massively easier to keep all the resources I use for one post in one area.

I only referred to the item.md file, not a template, but the template in this case is blog-list-item.html.css (a slightly modified version of Quark’s same template)

Thank you very much for the response.

4

Ah, the blog-list-item.html.twig has yet another way of finding the image:

{% set image = page.media.images|first %}

It doesn’t look at the field ‘hero_image’ it just picks the first it finds in the page’s folder or none at all. Of course that can be changed in your template.

The best way is the way that suits you best…

  • If you have an image used by a single page, keeping it next to the page might suit you best.
  • If you reuse it in multiple places /pages/images might be a better location if you don’t want to keep copies. But then you have to change the template(s).
  • If it is part of the theme’s style/layout, /themes/mytheme/images might suite best.
5

Yes, I just discovered that myself. Ok, problem solved. So, I keep my site-wide images in user/images (in subdirs as well). Is there a specific advantage to putting them in user/pages/images or some other preferred location?

6

Keeping the images in /user/pages/images is suggested in the docs Where to put your media files.

You can then use:

page.find('/images').media['my-image.jpg']

If I put the images in /user/images I have not been able to use any form of page.find('/../images').media['my-image.jpg'], but had to use:

media_directory('user://images')['my-image.jpg']

And there may be other alternatives which I’m not aware of… (yet)

Advantages I see:

  • The documented way seems more easy to me.
  • The images are used in pages, so it makes sense to me to save them with the pages in `/user/pages/images’.
  • It is easier for my brain if my themes resemble in structure the docs and other themes.
1 Like