[Resolved] Feature Request: Elements Custom Background Image with Feature Fallback

[vr51]

Will a future version of GeneratePress include the option for a background image4 to be used in GP Pro Elements with all the following features:

1) Use custom background image set in each post/page
2) If no custom image is set then use the feature image
3) If no feature image is set then use the custom fallback image set in the Element’s options

Would also be nice if minimum/maximum height / no-display could be set for desktop, laptop, tablet and mobile devices so that we can use the settings instead of tailoring the CSS.

Thanks for reading.

[David]

Hi there,

thanks for the suggestions.
How would the Custom Image in Posts work and why would there be a choice over a custom image or featured image be given?

[vr51]

Thanks David. I tried to reply yesterday but was not able to login. My internet might have been playing up at the time.

The reasons for my request are that,

a) often the feature image is used for the open graph image but the image desired for the hero is unsuited for use as the open graph/social share image,
b) the image used to represent posts and pages in other parts of a site e.g. archive pages, needs different dimensions compared to those required by a post’s hero image, and
c) the custom image set in Elements is not always desirable for every page (this is a one image for all setting, right?).

There are plugins like Yoast or Social Pug to use to set different open graph images for different purposes but these do not change the archive page image and not every site is intended for public readership.

Have you ever tried to teach people to always set an open graph image? They can’t see it in use so it doesn’t enter their consciousness unless it’s commented on later.

The intention behind my request is to provide choice: Per post custom hero image and, as the fallback image, either the feature image or the Element’s fallback image.

The best way to enable a custom image per post would be to add a Hero Image widget above or below the current Feature Image widget in the post edit screen.

As I type this I also wondering whether the hero/background image options might include independent background position settings for the different viewport breakpoints. I frequently find I need to tailor the CSS for the hero image display at different breakpoints. A trick that can be used in Smart Slider 3 is to stick each slide’s background image in the middle of the section canvas with CSS property auto or contained and to also add the image again as the background image of the canvas but this time stretched and blurred; but blurr is not available for the demon browser (‘IE/Edge’).

[Tom]

It’s likely not something we’ll add to Elements, but it is something you can add yourself:

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

Let me know if that helps or not 🙂

[vr51]

I had fully forgotten about this. Thank you very much for your help. I’ve just marked this as resolved.

[Tom]

No problem 🙂

[Author]

Posts