Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Hero_image setting ignored

Solved by pamtbaau View solution

Started by jeff milton 8 years ago · 5 replies · 1534 views
8 years ago

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?

8 years ago

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:

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:

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?
8 years ago

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.

8 years ago

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

TWIG
{% 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.

@jeff.milton:
There probably is a better way that I will soon learn of

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.
last edited 08/07/18 by pamtbaau
8 years ago

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?

8 years ago Solution

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

You can then use:

TXT
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:

TXT
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

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 202 2 months ago
Themes & Styling · by Ian, 2 months ago
3 98 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 461 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 52 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 132 3 months ago