Unexpected width and srcset attributes for the_post_thumbnail();

by

I am modifying a theme, using a child theme, and in a template file (single.php) I need to display a large post thumbnail, so I have this code:

the_post_thumbnail('large');

In Settings > Media, the large size is set to max width = 1024px and max height = 1024px (I suppose these are the default settings in WordPress). Now, the problem is that in the post page I get this html code:

<img src="https://example.com/wp-content/uploads/2018/07/example-image-4-1024x682.jpg"
class="attachment-large size-large wp-post-image" alt=""
srcset="https://www.example.com/wp-content/uploads/2018/07/example-image-4-1024x682.jpg 1024w,
https://www.example.com/wp-content/uploads/2018/07/example-image-4-300x200.jpg 300w,
https://www.example.com/wp-content/uploads/2018/07/example-image-4-768x512.jpg 768w,
https://www.example.com/wp-content/uploads/2018/07/example-image-4-272x182.jpg 272w,
https://www.example.com/wp-content/uploads/2018/07/example-image-4.jpg 1280w"
sizes="(max-width: 800px) 100vw, 800px" width="800" height="533">

The result is that I get a 800px-wide picture, instead of a true “large” image that should be 1024px-wide. The problem seems to be in the “sizes” attribute that sets the max width to 800px, and the “width” attribute that sets the image to 800px. Those seem wrong to me. So what is happening exactly? If it’s caused by something in the theme, how do I find out where it is so that I can change it?

Looking at the documentation related to the_post_thumbnail(), I saw these filters:

post_thumbnail_size
post_thumbnail_html
wp_get_attachment_image_attributes

So I tried looking for the string “post_thumbnail” and “attachment_image” in the theme, but that didn’t bring up anything useful. So what else do I look for? Note that I have some plugins installed (like Advanced Custom Fileds, etc.) but I tried deactivating them and the problem was still there, so I believe the source of the problem must be the theme, or something I don’t understand about WordPress.

1 Answer
1

When generating the width and height attributes for an image with functions like the_post_thumbnail() or wp_get_attachment_image() the images are put through the image_downsize() function. The last thing this function does is run the image through the image_constrain_size_for_editor() function.

This function decides the width and height of the image based on the given size, large in your case, based on the settings in Settings > Media. However it will set the maximum possible size of medium, medium_large and large images to whatever the theme’s Content Width is defined as. If your theme defines the content width as 800 then images with the medium, medium_large or large size will have their width capped at 800 (custom image sizes are only affected by this in the editor).

If you want to remove the maximum dimensions, you can use the editor_max_image_size filter to return an array containing your desired maximum width and height or 0 for both to remove the limit. You can use the $size and $context arguments of the filter to only apply to large images on the front-end or back-end ('display' for front-end, 'edit' for admin).

This example will remove the size limit for large images on the front-end:

function wpse_308298_max_image_size( $max_image_size, $size, $context ) {
    if ( $size === 'large' && $context === 'display' ) {
        $max_image_size = [0,0];
    }

    return $max_image_size;
}
add_filter( 'editor_max_image_size', 'wpse_308298_max_image_size' );

Leave a Comment