Featured image to sit on top of custom image set as background image in header

Hi there,

Try adding this into your Page Hero content:

{{custom_field._thumbnail_id}}

Thanks Tom, how do I resize it?

You can use the full size like this:

add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'full';
} );

Thanks. Which section do I add the hook to? Appearance > Elements > Hooks but which section do I add it to?

Or do I just add it to the functions.php file?

Ok, I've done that. If I want to resize it, or to have it a bit smaller should I just resize the images that I want to use?

Hi there,

you could try wrapping the template tag like so and using some CSS:

<div class="hero-feat-img">
    {{custom_field._thumbnail_id}}
</div>

.hero-feat-img img {
    width: 50%;
}

Thanks David,

Do I add this code to the content area of the hero in elements. Or do I add it via the code snippets plugin.

Thanks in advance. This is a great help it's the last biggest hurdle for me in getting this site going. I would rather do it this way as it gives the site owner an easy way to change the header images.

I tried adding this code to the content area of the hero in elements:

<div class="hero-feat-img">
    {{custom_field._thumbnail_id}}
</div>

And this code to simple css, but it did not seem to work:

.hero-feat-img img {
    width: 50%;
}

It looks like that CSS is inside your mobile media query (@media (max-width: 768px)).

You'll need to move it outside the media query for it to apply on desktop.

Ok, thanks for your help and patience.

Happy to help! :)