[Support request] How to resize featured image on mobile

Home Forums Support [Support request] How to resize featured image on mobile

Home Forums Support How to resize featured image on mobile

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1849685
    Andrew

    Hey Guys

    Could not find the answer for this in the forum….

    How do I resize the featured image on mobile ONLY.

    At the moment I have set the featured image size globally to be ‘medium_large’. If I set it any smaller it looks too small on desktop.

    Is there a way I can have ‘medium_large’ on desktop and say ‘medium’ on mobile?

    — Some background —

    My actual issue is if I don’t delay google tag manager (until first user interaction) I fail LCP on mobile. If I remove the featured image on posts I can pass LCP and don’t delay analytics. So I kinda want my cake and eat it, to have a featured image displayed and don’t need to delay analytics, hence this question)

    Cheers guys!

    #1849944
    David
    Staff
    Customer Support

    Hi there,

    you can try adding this PHP Snippet which will ‘try to force’ the browser to use 300px image on smaller screens:

    function db_modify_srcset_sizes($sizes, $size) {
    	return '(max-width: 420px) 300px, (min-width: 421px) 768px, (min-width: 769px) 1024px, 100vw';
    }
    add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);
    #1857870
    Andrew

    Hey David, thanks for your reply

    That did not work I am afraid.

    Is there a way to move the featured image below the fold on mobile only?

    #1857919
    David
    Staff
    Customer Support

    Where did you add the code ? And is it still added ?

    #1858165
    Andrew

    Hey David,

    I added it as a PHP Snippet on the front end. I have now removed it.

    After additional reading, I see in Page Speed Insights that WordPress 5.5 is Lazy Loading the featured image

    I am pretty sure it’s affecting my LCP as it’s above the fold.

    Is there a hook or snippet I can use to skip-lazy just on the featured image?

    Am running GP Premium

    Cheers!

    #1858223
    David
    Staff
    Customer Support

    the 5.5 update introduced Browser native lazy loading – which supporting browsers will automatically ignore on images that are above the fold.

    If you want to add back that code so i can see what its ( not ) doing

    #1858254
    Andrew

    Hey David

    The problem is Google Page Speed Insights itself sees the above the fold feature image as lazy-loaded.

    That’s the test I am trying to pass as it impacts my LCP so it would be good to be able to disable the lazy load of the featured image that Wp 5.5 is introducing.

    (Need my LCP to score 1.9 or less so when I re-enable Google Tag Manager I still get a passing score under 2.5)

    I have re-enabled the snippet, it’s running ‘Only run on site front-end’

    Is that correct?

    Still looks large on mobile

    Let me know if you need me to do anything

    Thanks for all your help!

    #1858309
    David
    Staff
    Customer Support

    Native Browser lazy loading ( which is what WP enables ) works differently to a plugin. I don’t think its required. But you can try the following PHP Snippet:

    function db_disable_wp_lazy_single_featured( $default, $tag_name, $context) {
        if ( is_single() && 'img' === $tag_name && 'wp_get_attachment_image' === $context ) {
            return false;
        }
        return $default;
    }
    add_filter( 'wp_lazy_loading_enabled', 'db_disable_wp_lazy_single_featured', 10, 3);

    With this and the other code set it to Run Everywhere. And clear any plugin caches afterwards.

    #1858331
    Andrew

    Cheers David

    That’s closer I think

    One issue remains when I check Page Speed Insights

    The skip-lazy is also affecting the 2x featured images called by the ‘latest posts’ hook and also the sidebar image

    #1858390
    David
    Staff
    Customer Support

    Do you mean the code i provided above ?
    If so – not sure there is much that can be done about that as applies to all wp_attachments

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