0

I just can’t understand how add_image_size() and responsive images work.

So let’s say I have a thumbnail like 720×360.

So I’m assuming I need to add the size add_image_size('post-thumbnail', 720, 320, true) //hard crop

I upload image with the dimensions of 3000×2000 to accommodate for retina screens, etc.

Now I’m adding it to the page with the_post_thumbail('post-thumbnail') but it doesn’t build srcset at all!

If I’m using the_post_thumbail('full') it builds srcset but doesn’t preserve the aspect ratio.

So what I'm supposed to do now?

Do I need to add more sizes, starting from the largest? Like:

add_image_size('post-thumbnail', 3200, 1600, true); add_image_size('post-thumbnail-lg', 1600, 800, true); add_image_size('post-thumbnail-sm', 1200, 600, true); add_image_size('post-thumbnail-xs', 400, 200, true);

If not, how would I preserve the aspect ratio?

1
function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

As outlined here: https://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/

1

If you add the code after you have uploaded images onto pages you will also need to regenerate the images with a plugin like Regenerate Thumbnails by Alex Mills (Viper007Bond). https://wordpress.org/plugins/regenerate-thumbnails/

I was trying to do the same thing and found many pages that offered code that didn't work so I wanted to add an update here as this page shows up when people are trying to solve the same problem.

Here is some sample code that loads the different sizes depending on how large the image is. If you load a 980px width image onto the page it would have more breaks than if you load a 670px width image onto a page. The set is determined by the size you choose when putting the image on the page. Hope some people find this useful. I also found out you can add extra code right next to the return and inject other values into the sizes attribute. We don't need to do this but it's just interesting. return $sizes . " something here";

function adjust_image_sizes_attr($sizes,$size){
    $width = $size[0];
    if($width >= 980){
        $sizes = '
        (max-width:320px)100vw,
        (max-width:335px)100vw,
        (max-width:414px)100vw,
        (max-width:640px)100vw,
        (max-width:670px)100vw,
        (max-width:768px)100vw,
        (max-width:950px)100vw,
        (max-width:980px)980px,980px';
    }
    elseif($width >= 670){
        $sizes = '
        (max-width:320px)100vw,
        (max-width:414px)100vw,
        (max-width:670px)670px,670px';
    }
    else{
        $sizes= '(max-width:' . $width . 'px) 100vw,' . $width . 'px';}
    return $sizes;
}
add_filter('wp_calculate_image_sizes', __NAMESPACE__ . '\\adjust_image_sizes_attr',10,2);

You can replace 100vw for sizes you wanna load if you just want a certain size.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.