How to add common conditional banner image for blog post headers

1

I have added the images folder inside my pages folder, now in my template that loads each indivisual blog post , i have the following code:

{% set blog_image = page.find('/images').media['indivisual-article-banner.jpg'] %}

this does’t seem to work though as my blog image is not loaded at all.

How how do i retrieve my image saved in my images folder , also , i’d like to conditionally load this image I.E. check if the page header has a banner image set , and if not load the above generic header , so i guess i will need a or statement , i can check if the page has a header image by doing the following: page.header.header_image , but how do i pull up the generic header ?

EDIT::- i found this media object meathod, not ure how do i use it though !

2

Hi,

Are you sure there is a md file in your /images folder?

Because the twig you posted seems correct.

If you want this image to be used as a “fallback” you can use the |default filter like this

{{ page.header.header_image|default(blog_image) }}
1 Like
3

How do i set the blog_image to the image in my images folder ( name of default image is default_banner_image.jpg ).

The path of my images folder is user/pages/images.

4

The twig you posted:

{% set blog_image = page.find('/images').media['indivisual-article-banner.jpg'] %}

Is correct and should work if you have a md file in /user/pages/images

1 Like
5

My folder structure is the following:

  • images
  • 01.home
  • 02.blog
    • my-first-blog-post
      • default.md
    • blog.md
    • someimage.jpg

What i want to do is access the image inside the images folder and add it as a banner image for default.md inside my-first-blog-post. How do i do this ? hope this makes sense , basically i want to store images for generic use in my images folder.

6

You sure you have an md file in /images folder?

Also, you can enable debugger and add {{ dump(page.find(’/images).media }} and see what the output is in the debug bar.

1 Like
7

ok almost there , thanks for your patience in helping me out @paul .

So i have the following lines of code now:

{% set generic_main_banner_image = page.parent.media.images|first %}
{% set blog_image = page.header.main_banner_image|default(generic_main_banner_image) %}

I don’t have main_banner_image set in any of my page headers , so the default should take over.

Since i want a spcecific image i try the following:

generic_main_banner_image = page.parent.media.images['i.jpg']

This does’t seem to work though, but when i do the below:

generic_main_banner_image = page.parent.media.images|first

i do indeed get the image , why does the array syntax not work now ?

EDIT ::- on further debugging i found out that somehow the image array(page.parent.media.images) has only one image , when actually that folder has 2 image , when i output the following statement

{{ page.parent.media.images|length }}  // Outputs 1... should be 2 actually !

I am a bit confused now :face_with_raised_eyebrow::expressionless::disappointed:

8

Alright issue resolved , apparently i needed to add the following line of code to my blog.md file:

![Generic banner image](indivisual-article-banner.png)

without this the image i believe is not picked up by twig. thanks a ton for the help ! :slight_smile: :smiley: