Elements header - Swapping image source based on width

Hi there,

you can add this PHP Snippet to your site:

add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'large';
} );

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

Just change the large to the attachment size you want to display. The default is medium

Hey David, thanks for the answer.

Setting it to large would indeed be an improvement, but is there a way to dynamically set a size based on the viewport?

Something along the lines of:

vw 1800px+ => Full
vw 728px+ => Large
vw 300px+ => Medium

Sorry i gave you the wrong filter above thats for outputing the featuered images as an attachment within the hero content.

There isn't any simple way of outputting the background image for responsive screen sizes with PHP without using a custom library or some half assed CSS that could lead to multiple image requests.

The closest option is to use the wp_is_mobile() function within the ( correct ) generate_page_hero_background_image_url filter.

Here's an example - which will load the Medium size image when a mobile device is detected:

add_filter( 'generate_page_hero_background_image_url', function( $image_url, $options ) {
    if ( wp_is_mobile() ) {
        $image_url = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
    }

    return $image_url;
}, 10, 2 );

Note: wp_is_mobile() detects the client device not the Screen size, so it won't repsond to just reducing a desktop browsers size.

Hi David, thanks again for answering.

It does seem like there's no easy way to go about this, however I feel using wp_mobile could give base results in regard to people using Retina tablets getting served low-quality images.

I think I'm just gonna take then longer loading time in the end!

No problems, i agree :) You're welcome

Hello David and GP team,
I am probably on the same path and I've read a lot here in the forum and elsewhere about responsive images, srcset and related topics.

Here is our issue:
https://mygoal.de/trainingsplan-triathlon/
I'd love to have the header background image responsive, but not only on detection of device. The following image in a certain section does respond as it should.

Did I get it right, that
a) The responsiveness of images comes with the Wordpress core function of srcset and by having stored different thumbnails for that occasion?
b) Background images like the one above won't resize even if there are those thumbnails?

Since many others seem to ask for related support; might that be a kind of feature request? It would really help to improve performance. Since desktop screens become larger and come with even higher resolutions we are here in the conflict area between 4k and mobile use.

Thank you for any explanation.
Regards
Mathias

Hi,

a) Yes, that's pretty much it. But this isn't automatically applied through all of the content. Some contents are coming from plugins. Some plugins have efficient use of srcsets, some don't.

b) Related to the first question. It doesn't automatically swap image source on different devices unless specified otherwise w/ PHP snippets.

Since many others seem to ask for related support; might that be a kind of feature request? It would really help to improve performance. Since desktop screens become larger and come with even higher resolutions we are here in the conflict area between 4k and mobile use.

It'll get worked on if more people get behind this feature. :) Features with the most request from users will get priority over less requested ones.

As for the conflict area between 4k and mobile use:

To be honest, the best solution would be to have a standard breakpoint for 4k screens added to the most used ones.

But 4k screen users are a minority, so the web development community isn't exactly inclined to pursue this YET.

Hi David,

to which file.php i need write the code? i am beginner on this :(
i have this issue this is the link: https://www.screencast.com/t/7LXVNnn0mu

i need the shoe make smaller this is a feature image and i use bacground color (blue)
thank you

Hi Martin,

I'm not sure if the above is what you're looking for. Any chance you can open a new topic with a little more information on the issue/desired outcome?

Thanks!

Hi Tom,

thank you for answer,yes i can.
a sorry for me english :(

Since many others seem to ask for related support; might that be a kind of feature request? It would really help to improve performance. Since desktop screens become larger and come with even higher resolutions we are here in the conflict area between 4k and mobile use.

It’ll get worked on if more people get behind this feature. 🙂 Features with the most request from users will get priority over less requested ones.

I'd really like an easy way to be able to swap images when moving from desktop to mobile/tablet.
Or, if there is a way to 'focus' the mobile viewing of the hero-image centred on a particular section of the larger image so that it looks ok

Something we're looking into for a future update using Block Elements and GB Pro.