Skip to main content
added 393 characters in body
Source Link
birgire
  • 67.8k
  • 7
  • 119
  • 251

How can the global content width$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 functions dependencyfunction dependencies:

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

where the default value isdefault value is:

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

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

How can the global content width affect the thumbnail ?

Let's check how the global $content_width can affect the the_post_thumbnail( 'large' ) and trace out the relevant functions dependency:

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

where the default value is:

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

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

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:

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

where the default value is:

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

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

added 936 characters in body
Source Link
birgire
  • 67.8k
  • 7
  • 119
  • 251

How can the global content width affect the large thumbnail ?

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 ) is the maximum image width.

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_width, $max_height ];
    }
    return $max_image_size;
}

How can the global content width affect the large thumbnail ?

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

function wpse_max_image_size( $max_image_size, $size, $context )
{    
    $max_width  = intval( get_option( 'large_size_w' ) );
    $max_height = intval( get_option( 'large_size_h' ) );

    return [ $max_width, $max_height ];
}

How can the global content width affect the thumbnail ?

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 ) is the maximum image width.

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;
}
added 160 characters in body
Source Link
birgire
  • 67.8k
  • 7
  • 119
  • 251

How can the global content width affect the large thumbnail ?

Workaround

where weWe fetch the large image size dimensions from the database.

, since I guess you modified the width from 1024 to 960980 through the Settings > Media screen.

Notes

where we fetch the large image size dimensions from the database.

I guess you modified the width from 1024 to 960 through the Settings > Media screen.

How can the global content width affect the large thumbnail ?

Workaround

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

Source Link
birgire
  • 67.8k
  • 7
  • 119
  • 251
Loading