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

Home Forums Support Different hero image for single posts which is not the featured image

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1184432
    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!

    #1184579
    David
    Staff
    Customer Support

    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

    #1185195
    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!

    #1185307
    David
    Staff
    Customer Support

    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 …..

    #1185415
    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!

    #1185573
    David
    Staff
    Customer Support

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

    #1186165
    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.

    #1186520
    Tom
    Lead Developer
    Lead Developer

    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.

    #1186632
    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/

    #1186889
    David
    Staff
    Customer Support

    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.

    #1187609
    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?

    #1187958
    David
    Staff
    Customer Support

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

    #1188353
    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?

    #1188752
    Tom
    Lead Developer
    Lead Developer

    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?

    #1189075
    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!

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.