[Resolved] Utilising post image that isn’t a featured image for page header

[Gareth]

Hi,

I appreciate the title might be confusing. I will try to explain.

I am trying to build a header element that pulls a unique image for each post but ISN’T the featured image.

An example can be found on (not Generatepress) site here: https://independentmusicpodcast.net/ where you can see that the images in the header are different to the featured images for the same posts further down the page.

This is achieved using a custom field for each post, that then points to an image file (in this case the custom field is ‘secondline_themes_header_image’).

Back in Elements, I have three options for background image:
– No background image
– Featured image
– Custom image

But the custom image would be the same across all posts, whereas I want to make it unique for each post.

How do I go about doing that?

Thanks in advance – the theme is amazing, making my new site lightning fast without a load of heavyweight plug-ins

[Elvin]

Hi Gareth,

You can try this PHP code:

<?php if ( get_post_meta( get_the_ID(), 'secondline_themes_header_image', true ) ) : ?>
        <img class="post-unique-img" src="<?php echo esc_url( get_post_meta( get_the_ID(), 'secondline_themes_header_image', true ) ); ?>" alt="<?php the_title_attribute(); ?>" />
<?php endif; ?>

This will generate an image depending on the value of your “secondline_themes_header_image” custom field. Just make sure to add a valid URL value and make sure that this URL value is actually unique from other posts.

Let us know if it works for you.

[Gareth]

Thanks Elvin, where am I putting that? In the Element code or the post? I’ve tried both and neither seem to work.

[David]

Hi there,

I would suggest the PHP Snippet provided here:

https://generatepress.com/forums/topic/page-hero-custom-background-image-from-custom-field-with-fallback/#post-1166584

This will allow you to add your Custom Field background, if that is left empty then it will use the post featured image, and if that is empty it will use the custom background image you set in the element.

In the code you will see this line:

$background_image = get_post_meta( get_the_ID(), 'wpcf-common_featured_media', true );

the wpcf-common_featured_media is the Custom field slug – change that to your custom field.

The code is PHP and this article explains how to add:

https://docs.generatepress.com/article/adding-php/

[Gareth]

That works! Thanks David 🙂

[David]

Glad to hear that

[Author]

Posts