[Resolved] Page Hero custom background image from custom field with fallback

[Martin]

Hi – I found this code here on the forum to generate a fallback for a custom image from a custom field:

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

    if ( $background_image ) {
        $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 );

That code will:

1. Use the custom field
2. If no custom field exists, it will use the featured image of the post
3. If that doesn’t exist, it will use the image set in the Element.

What I don’t know:

a) where to put the add_filter code above? in a hook? wp_head? how to fire it in same places as page hero? – how does the hook fire before the page hero?
b) I need it to run on posts of type ‘resource’ and type ‘directory’ – do I have to add a line to check for post type or is that covered in the ‘location’ display rules of the hook element
c) problem is common_featured_media may be either a jpg or a video link
– clearly if it is a video I need it to go to option 2 – featured image
– I have a shortcode function [islocal][toolset shortcode for my custom field value][/islocal] to return 1 if is a local url in my domain or 0 if it is not (therefore a video like youtube). Does that go in my hook somehow?

Sorry I’m confused.

[Tom]

Hi there,

a) It should be added using one of these methods: https://docs.generatepress.com/article/adding-php/

b) You shouldn’t need a check. If you run into issues with it targeting other elements, we can adjust it a bit.

c) Tricky, maybe try this function:

add_filter( 'generate_page_hero_background_image_url', function( $url, $options ) {
    $background_image = get_post_meta( get_the_ID(), 'wpcf-common_featured_media', 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 );

[Martin]

Thanks Tom good idea except I had a problem with the get_headers throwing an error if there was a background image (which is contained in an embedded custom field if that matters?)

Anyways I did this and it seems to work great (checking if my urls in the embedded field are local in which case I know it is an image…)

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

    if ( $background_image ) { 
        $site_url = get_bloginfo( 'url' );

        $isImage = strpos( $background_image, $site_url );
    }
// Note use of !==.  Simply != would not work as expected
// because the position of '$site_url' will usually be the 0th (first) character.
    if ( $background_image && $isImage !== false ) {
        $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' );
    }
// echo $url;
    return $url;
}, 10, 2 );

Thanks again for your thoughtful and quick response!

[Tom]

That looks good – good idea!

Glad it’s all working now 🙂

[Author]

Posts