How to set header image in grav blog page

1

I have the following line of code in my grav CMS blog.html.twig file:

{% set blog_image = page.media.images|first.grayscale().contrast(20).brightness(-100).colorize(-35,81,122) %}

Where can i add this image ? do i add it in the admin panel ? where exactly do i add it ?

2

If you’re using the admin panel, under ‘Page Media’ for the blog item. Or you could just put the images in the same folder as the page.

1 Like
3

@gnat great ! TY that works perfect

4

Glad it helped. These are but basics of how Grav works. Cheers!

1 Like
5

Hi, but if i would want a different image in item? Because in the blog post in the page of the blog there is the image put in the same folder but i would want display a different image or nothing in the header of article…how can i do it? Sorry for mistakes…english isn’t my language…

6

It depends…

  • What is the theme you are using?
  • What (and hence the template) are you looking at:
    • The header of page blog.md?
    • The header of each item listed on page blog.md?
    • The header of page item.md?
1 Like
7

Hi, thank you for your answer. My theme is Antimatter, and i want to change the header image of the article, the item page that now is the same of the preview post in the blog post. When I put the first image, it set both the blog post summary and in the header of blog item. I don’t want the same image…

8

And I’m looking the blog.item.html

9

@semplicewebsite Would you like to show different images for the blog item in the list ('blog.html.twig') and on the blog item itself ('item.html.twig')?

Unfortunately that option is not build in… Both pages use 'partials/blog_item.html.twig' to display the blog item.

But it can be done by yourself using Theme Inheritance.

One way of doing it could be:

  1. Create a child theme using $ bin/plugin devtools newtheme. In the wizard choose ‘inheritance’ and ‘antimatter’
  2. Copy 'partials/blog_item.html.twig' from Antimatter to same folder in your new theme.
  3. In 'user/themes/<your theme>/blueprints/item.yaml' duplicate the fields named ‘header.header_image’ and ‘header.header_image_file’ and append ‘_list’ to the names.
    Now your can add image properties specific for items in the list.
  4. In 'user/themes/<your theme>/templates/partials/blog_item.html.twig':
    • Remove the following statements at the top of the template.
      {% set header_image = page.header.header_image|defined(true) %}
{% set header_image_file = page.header.header_image_file %}
    • Create an if-statement right above the part that displays the header, like:
      {# Note: truncate is set in template `'blog.html.twig'` and passed to `'partials/blog_item.html.twig'` #}
{% if truncate %}
    {% set header_image = page.header.header_image_list|defined(true) %}
    {% set header_image_file = page.header.header_image_file_list %}
{% else %}
    {% set header_image = page.header.header_image|defined(true) %}
    {% set header_image_file = page.header.header_image_file %}
{% endif %}

This should do it…

2 Likes
10

Thank you…it seems simply and complicated at the same time…I’ll try it…thank you so much to have spent many time for me… I’ll know you if works!!

11

I don’t understand where can i put the command line…i use windows…

12

There is no an italian instruction?

13

Mi dispiace…

My script presumed a Unix OS. Have you considered to set up Windows Subsystem for Linux? I’m running Windows 10 and moved all my development to WSL and love it.

You can replace step 1. by creating a child theme manually. Follow steps 1-5 from the docs Theme Inheritance.

Please don’t hesitate to ask for further assistance if you get stuck.

14

Thank. You again!!! I’ll try it now!!!

15

I don’t know how can I do it but it works!!! Thank you so much!!!

16

If you don’t know how you did it… then it is time to start studying the docs… :wink:

17

Thank you…really…have a good evening…