Multiple image sizes (responsive images) for YARPP thumbnails

  • Hi,

    I’m a long time user of YARPP, using the thumbnails version. I have YARPP thumbnails showing well on my homepage and in the sidebar of every page.

    In my theme functions.php, I have add_image_size('yarpp-thumbnail', 309, 178, true); which generates thumbnails sizes showing properly on my site, when viewed on Desktop.

    However, when on mobile, the responsive layout makes the YARPP thumbnails take almost the whole viewport width. That’s great, but it means that a 309px wide thumbnail is now stretched to 540px wide, and it doesn’t look good.

    Has anyone worked out a solution? As a workaround, I could generate all thumbnails to be 540px wide, but it’d also mean all Desktop visitors would download images heavier than neccessary.

    Ideally, YARPP can generate different image sizes and use the srcset attribute to guide the browser on which JPG to download, but I’m hesitant to modify YARPP to make it so without breaking everything.

    Thanks for any advice

Viewing 1 replies (of 1 total)
  • Thread Starter jbd7

    (@jbd7)

    So it seems I figured it out ??
    And it can be done without touching YARPP. Here’s my solution in case it helps someone:

    • How to add the srcset attribute:

    This is done automatically by WordPress, as long as it finds an image with the same size ratio. So I duplicated the size creation code in my theme functions.php with a larger thumbnail version.

    add_image_size('yarpp-thumbnail', 309, 178, true);
    add_image_size('yarpp-thumbnail_2x', 618, 356, true);

    And I regenerated thumbnails for all featured images, so that the JPGs for the new sizes are created.

    • How to add the sizes attribute:

    This is also done automatically by WordPress (https://make.www.ads-software.com/core/2015/11/10/responsive-images-in-wordpress-4-4/), but not in the way that worked for me. I needed the small image to show on large screens, and the large one to show on small screens. So I added this in my theme functions.php


    add_filter('wp_calculate_image_sizes', 'custom_yarpp_sizes', 10 , 2);
    function custom_yarpp_sizes($sizes, $size) {
    if (309 == $size[0]) {
    /* Intercepts width, and if it the YARPP width, replaces with my theme CSS breakpoints and custom sizes attribute */
    return "(min-width: 600px) 309px, 618px";
    }
    return $sizes;
    }

    That seems to work for me because the size of 309px is only used by YARPP. Feel free to suggest a better solution if you see it.

Viewing 1 replies (of 1 total)
  • The topic ‘Multiple image sizes (responsive images) for YARPP thumbnails’ is closed to new replies.