6

I have this function in my theme to create thumbnail sizes.

  set_post_thumbnail_size( 620, 848, true );
            if (function_exists('add_image_size')){
                    add_image_size( 'compare-shop-logo', 150 );
                    add_image_size( 'compare-single-product-2', 250, 188, true );
                    add_image_size( 'compare-slider-image', 848, 487, true );
                    add_image_size( 'compare-offer-box', 400, 300, true);
                    add_image_size( 'compare-blog-box', 400, 225, true );
                    add_image_size( 'compare-quote-box', 408, 437, true );
            }

How come that if I change the offer-box sizes, I lose the srcset and sizes in img tag? and is there a way to resize maintaining proportions?

<img width="400" height="300" src="myimage-400x300.jpg" class="embed-responsive-item wp-post-image" alt="image" srcset="myimage-1-400x300.jpg 400w, http:///myimage-250x188.jpg 250w" sizes="(max-width: 400px) 100vw, 400px">

thanks

1 Answer 1

12

The srcset attribute is constructed from images that are the same aspect ratio. Create a few of those and you'll be ok.

add_image_size( 'compare-offer-box', 400, 300, true);
add_image_size( 'compare-offer-box-2', 800, 600, true);
add_image_size( 'compare-offer-box-3', 1200, 900, true);

for example. The fourth, boolean, argument tells WP to crop to the exact proportions.

To resize without cropping, use:

add_image_size( 'compare-offer-box', 400, 9999, false);
add_image_size( 'compare-offer-box-2', 800, 9999, false);
add_image_size( 'compare-offer-box-3', 1200, 9999, false);

This assumes you want a particular width image and then whatever height the proportions require. You'll see some code around the web that uses values of 0 or null for the non-constrained dimension, but comments in the WP source code warn that this can have "unpredictable results."

If you'd rather scale proportionately while constraining the height then just use a huge value for the width:

add_image_size( 'compare-offer-box', 9999, 400, false);
add_image_size( 'compare-offer-box-2', 9999, 800, false);
add_image_size( 'compare-offer-box-3', 9999, 1200, false);

If you want to maintain proportions but scale the image to fit within a certain space, say 400px by 400px, you can specify both maximum width and height but with cropping set to false:

add_image_size( 'compare-offer-box', 400, 400, false);

Note that if you are constraining by height then you may want to adjust the sizes attribute too, as that defaults to the width of the viewport with a maximum value of the specified image size's width.

Don't forget that you'll then need to regenerate image sizes for your existing images. There are plugins that do this well: Search for Regenerate Thumbnails in the plugin repository.

9
  • Do I have to reupload all my wp images or is there a way to reprocess all of them? thanks Oct 7, 2016 at 14:56
  • There are plugins to reprocess them. Search for Regenerate Thumbnails in the plugin repository. Oct 7, 2016 at 14:58
  • thanks, Can I resize without cropping, based on height instead of width? like add_image_size( 'compare-offer-box-2', 9999, 400, false); Oct 7, 2016 at 14:59
  • Yes, that's exactly what you do. Or you could set both parameters to 400 if the images must never be more than 400 wide or tall. Oct 7, 2016 at 15:10
  • One more question: let's say I have an image 480x600 and I have to scale it maintaining proportions to a certain space: 400x400, I will use add_image_size( 'compare-offer-box', 400, 400, false); but since the image has a different aspect ratio, what is going to happen to the added space (left and right)? how do I set the background color of the "empty" space added in order to maintain propoportion? thanks Oct 9, 2016 at 7:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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