Topic: How to add featured image to a page header?

Cheezballz
July 31, 2025 at 5:11 am

I’m working with the Wellbeing template and I cannot figure out how to get the page hero to show the featured image instead of a static background image. I used to know, but the settings have changed.

For the ‘Page Hero – Pages’ element, I tried putting {{featured_image key:url}} into the Inline Background Image field for the main Section container but it’s not working like it does for the Section container in the ‘Template – Single Post’ element. Why is this?

I did add a featured image to the About page, and it’s displaying below the header.
Ying
July 31, 2025 at 8:47 am

Hi there,

It should work.

Can you provide an admin login and let me know which element it is?

Your site is in maintenance mode. I can not see any content.

Let me know 🙂
Cheezballz
July 31, 2025 at 9:04 am

Here you go.
Ying
July 31, 2025 at 9:54 am

You have a static image set as a background image, it overrides the dynamic bg image:
https://app.screencast.com/rTgbbe03gO69e
Cheezballz
July 31, 2025 at 1:08 pm

I see. How would I make a ‘default’ bg image for pages that don’t have a Featured Image set?

Ying

July 31, 2025 at 3:10 pm

Try this, replace 100 with the actual fallback image ID.

function add_fallback_featured_image($value, $post_id, $meta_key, $single) {
    // Check if we're retrieving the post thumbnail
    if ($meta_key === '_thumbnail_id' && !$value) {
        // Set your fallback featured image ID
        return '100'; // Return fallback ID if no thumbnail is set
    }

    // Return the original value if it's already set
    return $value;
}

// Hook into get_post_metadata for the _thumbnail_id meta key
add_filter('get_post_metadata', 'add_fallback_featured_image', 10, 4);

Cheezballz
August 1, 2025 at 8:52 am

Thanks Ying. Will that create a fallback for place there’s an image? How would I make it specific to an element?

Ying

August 1, 2025 at 4:43 pm

This code create a fallback featured image for all posts and pages.

How would I make it specific to an element?

so you only want it to apply to pages? If so, you can add a is_page() condition to the code.

function add_fallback_featured_image($value, $post_id, $meta_key, $single) {
    // Check if we're retrieving the post thumbnail
    if ($meta_key === '_thumbnail_id' && !$value && is_page()) {
        // Set your fallback featured image ID
        return '100'; // Return fallback ID if no thumbnail is set
    }

    // Return the original value if it's already set
    return $value;
}

// Hook into get_post_metadata for the _thumbnail_id meta key
add_filter('get_post_metadata', 'add_fallback_featured_image', 10, 4);

Cheezballz
August 2, 2025 at 7:43 am

Got it, thank you!
Ying
August 2, 2025 at 11:02 am

You are welcome 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

How to add featured image to a page header?