How to add common conditional banner image for blog post headers

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 !

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) }}

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.

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

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.

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.

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:😑😞

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 ! :) 😃