[Resolved] Different hero image for single posts which is not the featured image

[John]

Hi there,

Is it possible to use a different hero image for single posts which is not the featured image?
I have created a custom header that uses the featured image as the full width hero.
But the client wants to use different images which suit narrow full width hero sections on the site, while using featured images which are different (for use in social media post sharing etc)

Is something like that possible or is there a simple work around I am missing?
Thanks!

[David]

Hi there,

there is this topic where the user wanted to change the header element background image using a custom field:

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

Alternatively have a look at the options within the SEO plugin, i know Yoast provides an option to select an image for social sharing – this in my opinion would be the better option as it doesn’t introduce any new fields to be completed, and less likely to ‘break’ if the user forgets to add an image somewhere

[John]

OK I would like to try the custom field route if possible – but not quite getting it with the link you shared.

Can you please clarify
1. What is the code I should add as the snippet so the hero will be different from the featured image.

2. After I add that snippet, where do I change the image to correspond for this?
In editing the posts I can see the option to select a custom field, but there is nothing obviosu there to add an image.

3. What settings should I have in the Blog post header Element to enable this to work smoothly?

Many thanks!

[David]

OK – lets use the PHP code that Tom provided:

add_filter( 'generate_page_hero_background_image_url', function( $url, $options ) {
    $background_image = get_post_meta( get_the_ID(), 'your_custom_field', true );
    $isImage = false;

    if ( $background_image ) {
        $headers = get_headers( $background_image, 1 );

        if ( strpos( $headers['Content-Type'], 'image/' ) !== false) {
            $isImage = true;
        }
    }

    if ( $background_image && $isImage ) {
        $url = $background_image;
    } elseif ( has_post_thumbnail() ) {
        $url = $image_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
    }

    if ( ! $url ) {
        $url = get_the_post_thumbnail_url( $options['element_id'], 'full' );
    }

    return $url;
}, 10, 2 );

Now on this line:

$background_image = get_post_meta( get_the_ID(), 'your_custom_field', true );

The your_custom_field slug needs to be changed to match that of the Custom Field you create in your Posts.

2. The user will have to add the Image URL directly to your custom field.

3. The Header Element just needs to be set up as any other Header element with the Background set to Featured Image – which will be used as a fallback if the Custom Field is empty.

Not a great UI for the client though …..

[John]

Oh OK – so there is no widget area like the featured image area in the Post Editor created?
Is there any plugin or alternative method to have a widget box created that does the same thing?
Because yes…this is a horrible UI for a client who is not 100% tech savvy.
I am struggling with it myself!

With Yoast I know how to select the image to share on FB.
Do you know how could I ensure that this image is the one which populates the blog roll too?

Sorry for being so awkward!

[David]

So the Social Share and the Post articles on the blog would use the same Image ?
And only the Single Post would be different ?

[John]

Yes. I think so.
Single post being the hero image on each blog.

Post article being the image used on all social media and blog rolls etc.

[Tom]

If the custom fields UI isn’t easy for your client, perhaps a plugin like Advanced Custom Fields would be worth looking into? That way you can create your own metabox and then use the filter above to use the custom field.

[John]

I have created an image called “Blog Post Hero” in ACF.
I have activated the snippet above.
I am not sure what to replace “your_custom_field” with.

Now on this line:
$background_image = get_post_meta( get_the_ID(), 'your_custom_field', true );

The your_custom_field slug needs to be changed to match that of the Custom Field you create in your Posts.

Any suggestions?
You can see a sample post here where it is activated.:
http://staging.jacquelinestone.com.au/the-7-most-common-questions-about-coming-to-counselling-and-therapy-and-our-answers-part-2/

[David]

ACF provides it own function for getting its field valaues:

https://www.advancedcustomfields.com/resources/get_field/

So that line would look something like this:

$background_image = get_field( "field_name" );

The field_namebeing whatever you named your ACF Field.

[John]

Thank you again, but I am still not able to get this to work.

Here is the code I have as a snippet:

add_filter( 'generate_page_hero_background_image_url', function( $url, $options ) {
    $background_image = get_field( "blog_post_hero" );
    $isImage = false;

    if ( $background_image ) {
        $headers = get_headers( $background_image, 1 );

        if ( strpos( $headers['Content-Type'], 'image/' ) !== false) {
            $isImage = true;
        }
    }

    if ( $background_image && $isImage ) {
        $url = $background_image;
    } elseif ( has_post_thumbnail() ) {
        $url = $image_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
    }

    if ( ! $url ) {
        $url = get_the_post_thumbnail_url( $options['element_id'], 'full' );
    }

    return $url;
}, 10, 2 );

The field has been called:

blog_post_hero

I still cannot get it to work though.
Is there some other info I nee do give to the custom field or the code snippet?

If I add a Featured image it shows as the background.
If I add an image to the meta box for the blog_post_hero, nothing happens.

Any suggestions on what I am doing wrong?

[David]

Just for troubleshooting use the original code here with the updated field slug.

[John]

I have changed that back – so the snippet is now:

add_filter( 'generate_page_hero_background_image_url', function( $url, $options ) {
    $background_image = get_post_meta( get_the_ID(), 'blog_post_hero', true );
    $isImage = false;

    if ( $background_image ) {
        $headers = get_headers( $background_image, 1 );

        if ( strpos( $headers['Content-Type'], 'image/' ) !== false) {
            $isImage = true;
        }
    }

    if ( $background_image && $isImage ) {
        $url = $background_image;
    } elseif ( has_post_thumbnail() ) {
        $url = $image_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
    }

    if ( ! $url ) {
        $url = get_the_post_thumbnail_url( $options['element_id'], 'full' );
    }

    return $url;
}, 10, 2 );

Still not showing. Any thoughts?

[Tom]

If blog_post_hero is indeed the key, and the field has a value, that code should work.

As a test, try this:

add_filter( 'generate_page_hero_background_image_url', function( $url, $options ) {
    $background_image = get_post_meta( get_the_ID(), 'blog_post_hero', true );

    var_dump($background_image);

    $isImage = false;

    if ( $background_image ) {
        $headers = get_headers( $background_image, 1 );

        if ( strpos( $headers['Content-Type'], 'image/' ) !== false) {
            $isImage = true;
        }
    }

    if ( $background_image && $isImage ) {
        $url = $background_image;
    } elseif ( has_post_thumbnail() ) {
        $url = $image_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
    }

    if ( ! $url ) {
        $url = get_the_post_thumbnail_url( $options['element_id'], 'full' );
    }

    return $url;
}, 10, 2 );

The var_dump should output something at the top of your website – what does it output?

[John]

OK – I switched the code and thew following text appears above the header/nav

string(4) "1779"

Any thoughts on how to proceed from here?
Cheers!

[Author]

Posts