[Resolved] Dynamic image size on mobile

Home Forums Support [Resolved] Dynamic image size on mobile

Home Forums Support Dynamic image size on mobile

  • This topic has 9 replies, 4 voices, and was last updated 2 months ago by Elvin.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2000479
    Bernhard

    Hello,
    I’m using dynamic images for featured images in posts. The original images are 672x345px.

    I defined medium size and width 300px / height 154px. The thing is, that now the scaled image 300×154 is loaded on desktop but on mobile the full size image. Also all other image in the post (beside the images loaded via WPSP) are scaled on desktop and full size on mobile.

    #2000878
    Elvin
    Staff
    Customer Support

    Hi there,

    I’m not sure I’m seeing what you mentioned.

    I’ve inspected the site on an Android phone and it’s using only 1 image size for both which is this one:

    /wp-content/uploads/2020/10/Rom-Dezember-Via-Condotti-672-300x154.jpg?ezimgfmt=ng%3Awebp%2Fngcb2%2Frs%3Adevice%2Frscb2-2

    Note: Since you’re using Ezoic, it’s up to ezoic’s script what it’ll display based on what it “sees” as optimized. The theme has limited to no control over this, unfortunately.

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

    #2001111
    Bernhard
    #2002309
    Tom
    Lead Developer
    Lead Developer

    The URL that Elvin mentioned above isn’t using GeneratePress to serve the images. Are you using a plugin that might be altering how they’re displayed? If so, that’s likely the first place to look. If you use the core theme display, it should use the srcset values provided by WordPress.

    #2003013
    Bernhard

    Hi Tom,
    I did, but I have the same problem when I connect direct to the server. I tried also to disable WP Rocket. Please see the screenshots.
    Featured image in mobile view:

    View post on imgur.com


    Image in mobile view (full size is loaded):

    View post on imgur.com


    Image in desktop view (scaled size is loaded):

    View post on imgur.com


    Below is the server IP.

    #2004095
    David
    Staff
    Customer Support

    Hi there,

    can you try adding this Snippet to your site:

    function set_max_srcset_width( $max_width ) {
        $max_width = 300;
        return $max_width;
    }
    add_filter( 'max_srcset_image_width', 'set_max_srcset_width' );

    Not sure it will work – but it would ‘should’ do is stop WP from adding any other sizes to the src-set.

    #2004123
    Bernhard

    Hi David,
    this works for the images in the post and a big part of the problem is solved πŸ™‚

    Is it possible define it also for featured images in posts (not pages)? Thank you.

    View post on imgur.com

    #2004312
    Elvin
    Staff
    Customer Support

    If it’s about changing the default size used by the featured image, you can use this filter:
    https://docs.generatepress.com/article/generate_page_header_default_size/

    Example: using “medium” size for featured images.

    add_filter( 'generate_page_header_default_size', function( $size ) {
        if ( is_single() ) {
            return 'medium';
        }
    
        return $size;
    } );

    But if David’s code is fine but you want to tweak it to apply on single post pages only, you can try this:

    function set_max_srcset_width( $max_width ) {
    if ( is_single() ) {
        $max_width = 300;
        return $max_width;
    }
    }
    add_filter( 'max_srcset_image_width', 'set_max_srcset_width' );

    Note: If you wish to define the srcset manually, you can use the generate_featured_image_output the entire featured image output.
    https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/structure/featured-images.php#L34-L51

    With the main concern being this function – https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/

    And then add your specific parameters/attributes. More context here:
    https://wordpress.stackexchange.com/a/293839
    https://wordpress.stackexchange.com/a/395408

    Example to ponder on:

    add_filter( 'generate_featured_image_output', function($output){
        if( is_single() ){
    			$output = sprintf(
    					'<div class="post-image">
    						%3$s
    						<a href="%1$s">
    							%2$s
    						</a>
    					</div>',
    					esc_url( get_permalink() ),
    					get_the_post_thumbnail(
    						get_the_ID(),
    						apply_filters( 'generate_page_header_default_size', 'full' ),
    						array(
                                'itemprop' => 'image',
                                'srcset' => wp_get_attachment_image_url( get_post_thumbnail_id(), 'your-custom-size' ) . ' 768w',
                                'srcset' => wp_get_attachment_image_url( get_post_thumbnail_id(), 'another-one-of-your-custom-size' ) . ' 1024w',
                            )
    					),
    					apply_filters( 'generate_inside_featured_image_output', '' )
    				);
        }
        return $output;
    },10,1);

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

    #2005221
    Bernhard

    Hi Elvin,
    I used the 2nd code and it works πŸ™‚ .

    About the last code you suggested. Something like this I would need for the featured images on pages. Would it be possible with wp_is_mobile?

    Thank you πŸ™‚

    #2005653
    Elvin
    Staff
    Customer Support

    There shouldn’t be any need for wp_is_mobile if you’re defining your own srcset because the point of having srcset itself is for responsive serving of image.

    The 300w, 768w and 1024w you see on the srcset should be the “condition” for viewports.

    But to your point, if you’re going to use wp_is_mobile() then you can try using it for the ‘generate_page_header_default_size’ filter.

    Example:

    add_filter( 'generate_page_header_default_size', function( $size ){ 
    if( is_single && wp_is_mobile() ){
    $size = 'your size here';
    }
    return $size;
    },10,1);

    Which forces the theme’s featured image to use your specified size for image on single post pages on mobile devices. But I’m not really sure how reliable wp_is_mobile() is.

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

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