Featured image (responsive) above content is too small after update to WordPress 4.4

Question

In my theme, I placed a featured image of a page above both the content and sidebar columns, spanning both columns, using <?php the_post_thumbnail('large'); ?>

where "large" size is defined as 980px. Their width is responsive thanks to css. This worked fine until the WordPress 4.4 upgrade.

After the update, which includes the core responsive images feature (loading different images depending on screen size), those featured images are now only shown as 560px wide on every page, instead of 980px. 560px corresponds to medium size of images, as well as to content_width, defined in my functions (it is the width of the content in the main column, used for oEmbeds).

This is the html source code of such an image:

<img class="attachment-large size-large wp-post-image" 
sizes="(max-width: 560px) 100vw, 560px" 
srcset="http://marionhansel.local/wp-content/uploads/latendresse-224x126.jpg 224w, 
http://marionhansel.local/wp-content/uploads/latendresse-560x315.jpg 560w, 
http://marionhansel.local/wp-content/uploads/latendresse-980x551.jpg 980w, 
http://marionhansel.local/wp-content/uploads/latendresse-476x268.jpg 476w" 
alt="La Tendresse" 
src="http://marionhansel.local/wp-content/uploads/latendresse-980x551.jpg">

How do I make the featured images appear in their "Large" width size (980px), while keeping the (WordPress) responsiveness feature and keeping the content_width (for oEmbeds)?

I guess it has something to do with (max-width: 560px) 100vw, 560px in the image source, but how do I edit those values?

For now, I have disabled responsive images (using the Disable Responsive Images plugin), and the images show again in their full width (980px), and they are "responsive" thanks to css, but they don't use the WordPress responsiveness.

Answer 1

How can the global $content_width affect the post thumbnail ?

Let's check how the global $content_width can affect the output of the_post_thumbnail( 'large' ) and trace out the relevant function dependencies:

the_post_thumbnail()
 \
  \__ get_the_post_thumbnail()
       \    
        \__ wp_get_attachment_image() 
             \
              \__ wp_get_attachment_image_src()
                   \
                    \__ image_downsize()
                         \
                          \__ image_constrain_size_for_editor()

and for the large size we have specifically this part within the image_constrain_size_for_editor():

elseif ( $size == 'large' ) {
    /*
     * We're inserting a large size image into the editor. If it's a really
     * big image we'll scale it down to fit reasonably within the editor
     * itself, and within the theme's content width if it's known. The user
     * can resize it in the editor if they wish.
     */
    $max_width = intval(get_option('large_size_w'));
    $max_height = intval(get_option('large_size_h'));
    if ( intval($content_width) > 0 ) {
        $max_width = min( intval($content_width), $max_width );
    }
}

Here we can see that the maximum image width is the minimum of the large image size width and the global content width.

This affects e.g. the image width, height and sizes attributes.

For example the sizes attribute value comes from:

        \__ wp_get_attachment_image() 
             \
              \__ wp_get_attachment_image_src()
               \
                \__ wp_calculate_image_sizes()

where the default value is:

// Setup the default 'sizes' attribute.
$sizes = sprintf( '(max-width: %1$dpx) 100vw, %1$dpx', $width );

within the wp_calculate_image_sizes() function. Here the $width is taken from the wp_get_attachment_image_src() output, that depends on the content width as we saw earlier.

This should explain why you get:

(max-width: 560px) 100vw, 560px

since 560 = min( 560, 1024 ) becomes the maximum image width.

Workaround

One way around that is to change the maximum image width/height through the editor_max_image_size filter:

// Add a filter callback to avoid the content width restriction
add_filter( 'editor_max_image_size', 'wpse_max_image_size', 10, 3 );

// Display large thumbnail    
the_post_thumbnail( 'large' );

// Remove filter callback
remove_filter( 'editor_max_image_size', 'wpse_max_image_size', 10 );

where we define the wpse_max_image_size() callback as (PHP 5.4+):

function wpse_max_image_size( $max_image_size, $size, $context )
{
    // Override content width restriction
    if( 'large' === $size )
    {
        $max_image_size =  [
            $max_width  = intval( get_option( 'large_size_w' ) ),
            $max_height = intval( get_option( 'large_size_h' ) )
        ];
    }
    return $max_image_size;
}

We fetch the large image size dimensions from the database, since I guess you modified the width from 1024 to 980 through the Settings > Media screen.

Notes

Another option would be to use the wp_calculate_image_sizes, but then we would still have to handle the width/height image attributes.

This should also be possible through the wp_get_attachment_image_attributes filter.

It should also be possible to modify temporarily the global content width, but I avoided that here.