[Resolved] Elements header – Swapping image source based on width

Home Forums Support Elements header – Swapping image source based on width

  • This topic has 12 replies, 7 voices, and was last updated 3 months ago by David.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1415212
    Alexandre

    Hi there,

    I just created a header element for my posts and I’m really happy with it. Only thing is I’d rather not load my full-sized featured image (1800px+) on mobile devices, but instead use a smaller source image.

    I’ve seen multiple topics that seem to be related, but nothing that seemed to answer this directly. I’m guessing it’s a bit complicated as you can’t use the srcset property on background images…

    What would be the best way to go about this?

    Thanks!

    #1415285
    David
    Staff
    Customer Support

    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

    #1415299
    Alexandre

    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

    #1415330
    David
    Staff
    Customer Support

    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.

    #1415366
    Alexandre

    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!

    #1415744
    David
    Staff
    Customer Support

    No problems, i agree πŸ™‚ You’re welcome

    #1505167
    Mathias

    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

    #1505553
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1540250
    Martin

    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

    #1540360
    Tom
    Lead Developer
    Lead Developer

    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!

    #1540365
    Martin

    Hi Tom,

    thank you for answer,yes i can.
    a sorry for me english πŸ™

    #1567878
    Sarah

    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

    #1568258
    David
    Staff
    Customer Support

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

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