I am really struggling to understand how Srcset works in Wordpress.
I have added my custom sizes like so:
// Make sure featured images are enabled
add_theme_support( 'post-thumbnails' );
// Add featured image sizes
add_image_size( 'medium_larger', 1400, 1400, false ); // width, height, crop
add_image_size( 'home_portrait', 1000, 1000, false ); // width, height, crop
add_image_size( 'mobile', 480, 480, false ); // width, height, crop
Now most my images use the object-fit attribute because I wanted to make it easy for clients to add any size images while keeping the design in place.
My understanding was - if I use 'false' at the end of the image size, it will essentially stop when either the width or height reaches one of the sizes.
So for example, if I have:
add_image_size( 'home_portrait', 1000, 1000, false ); // width, height, crop
Then the image will either stop when it's 1000px wide with an auto height in line with the aspect ratio OR it would be 1000px high with and auto width, in ratio - whichever of these happens first.
I thought this was perfect, because it was super flexible and I still wouldn't end up with images that were too big because it would scale proportionally and would work for both landscape or portrait images.
I also understand that srcset only uses images of the same ratio so all of my sizes were 1:1 which I thought would make it easy (even if the images themselves are not square (is that where I am going wrong?).
Do the images themselves have to be the same ratio as the image sizes settings if they are soft cropped?
The code I am using is this (I am using advanced custom fields) is
<?php
// first get the image of the size you want.
$image_id = get_field('top_animated_image_1'); // acf image field that returns ID
// size should be the larges image you want to show
$size = 'thumbnail';
// get the image
$image = wp_get_attachment_image_src($image_id, $size);
if ($image) {
// generate all tag
$alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
// get the image title
$title = get_the_title($image_id);
// set image class, this class is what will cause WP to generate src set
$class = 'size-'.$size.' wp-image-'.$image_id;
// generate image tag
$image_tag = '<img src="'.$image[0].'" width="'.$image[1].
'" height="'.$image[2].'" alt=" '.$alt.
'" title="'.$title.'" class="'.$class.'" />';
// this WP function will add the srcset and other attributes to the tag
wp_filter_content_tags($image_tag);
echo $image_tag;
} ?>
</div>
When I use 'thumbnail' as I have above, it works as expected and the intrinsic size is shown as 150px by 150px and the current source file name is correct - but if I change it to any of the others, it just ignores it and displays the upload size.
What am I doing wrong?
When I upload the images, all the image sizes that I would expect to be made, are made successfully, it just doesn't use any of them.
If I have to, I can try say ONLY a fixed height and flexible width or vice versa but then how do you handle things like a media gallery when it might be landscape OR portrait. Also what happens if a client uploads an image that deviates slightly from the aspect ratio?
I have read a lot of articles now and I can't seem to understand how it works or if my problem is just the fact that a 'whatever happens first max-width or max-height' solution doesn't actually exist
Attached is an example. I had to blur out some file names (sorry that it makes it harder to decipher). In the first instance I used home_portrait. It appears that the image sizes are all listed but the intrinsic size it's loading and 'current source file' is still 1280 x 1920px?
Whats even more confusing is in the 2nd example, if I set the size to mobile ( which is 480, 480, false) then I would expect the image to have a height no taller than 480px. I can see it has generated one that is 480px high by 320px wide but this time is using the intrinsic size of 667:1000 which isn't right either (it's actually what I want for the home_portrait example above).
The src at the start looks correct, but the hover box shows it is not.
I am sure it's something really simple that I am not understanding about how srcset works. Any explanation as to where I am going wrong, would be much appreciated
- Edit - additional info - Another side note is that I am using a media gallery plugin which uses the 'medium' size for thumbnails and 'large' for the lightbox. I changed these two settings in the WP dashboard to 800px by 800px and 1920 x 1920 and it works as I would expect. It's a mix of landscape and portrait thumbnail images with sizes like 800px by 530px or 400px by 800px displaying the correct intrinsic size and using the correct source file? So maybe it is a problem with my php template code?
• Another Edit - When I set a size that has the same aspect ratio as the original image, it works, but then what happens to the images that fall outside of those dimensions?
