How to handle (responsive) image formats for customers nicely?

[tmwp]

Hello,

this question has been bothering me for quite some time now and I would like to hear your opinion or tips and tricks on this.

My goal is that my customers can upload all the image files they want to their Wordpress websites and don’t have to worry about the right image size, aspect ratio etc. They should be able to upload their images in the largest size and wordpress handles the rest.

Lets say besides the Wordpress default image sizes I added an custom image format for e. g. teaserboxes (which I refer to as “teaserbox”) with a width of 400px and a height of 300px and cropping set to true. The aspect ratio (who guessed it ) is 4:3.

I also calculated the sizes for all the breakpoints in my layout and added some more image sizes for the teaserboxes with the aspect ratio of 4:3. For example:

add_image_size( 'teaserbox', 400, 300, true);
add_image_size( 'teaserbox-small', 200, 150, true);
add_image_size( 'teaserbox-medium', 300, 225, true);
add_image_size( 'teaserbox-large', 700, 525, true);

I thought that Wordpress will use all of this sizes for the responsive image markup when I output an an image with the size “teaserbox”.

But this is not the case. Wordpress does not use the other formats for the responsive image markup even tho they have the same aspect ratio on paper.

So after this I added the sizes like the following:

add_image_size( 'teaserbox', 400, 9999, false);
add_image_size( 'teaserbox-small', 200, 9999, false);
add_image_size( 'teaserbox-medium', 300, 9999, false);
add_image_size( 'teaserbox-large', 700, 9999, false);

The annoying thing with this is that my customer has to upload the images in the right aspect ratio. But at least Wordpress prints the responsive image markup with all the sizes.

Obviously I would like a setup like I described first.
So do I miss something? How do you do this on your websites?

Note: For simplicity lets ignore the cropping position. I know this could look like when someone uploads a image in portrait format which gets printed as a image in landscape format. But this would add more complexity to this topic I guess.

Warm greetings

Tim

[alwaysblank]

We try to keep these forums focused on the Roots stack (Trellis, Bedrock, Sage), and this appears to be a more general WordPress question.

The logic WordPress uses to calculate the srcset for your <img>is readily available in the source code for the aptly-named wp_calculate_image_srcset() and wp_image_matches_ratio(). I would recommend looking at the source code for those functions to determine where you might be running into trouble.

[tmwp]

Okay, did not realize this although I’ve checked the general category beforehand for offtopic questions.

Anyways, thank you for the links. I think I have to dive deeper into this.