mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-01-17 21:08:44 +01:00
Code Issues Actions 99 Packages Projects Releases Wiki Activity

Media: Consider inline image CSS width to backfill width and height attributes.

Browse Source 
Prior to this changeset, WordPress core would use the original image size, which in the particular case of inline images would be severely off, as they are usually very small. This could lead to incorrect application of `fetchpriority="high"` and other performance optimizations.

Props westonruter, flixos90, joemcgill, mukesh27.
Fixes #59352.


git-svn-id: https://develop.svn.wordpress.org/trunk@57294 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Felix Arntz 2024-01-16 17:01:30 +00:00
parent c3fd114539
commit dd691394f2
2 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/wp-includes/media.php
View File

@ -2117,6 +2117,13 @@ function wp_img_tag_add_width_and_height_attr( $image, $context, $attachment_id
$size_array = wp_image_src_get_dimensions( $image_src, $image_meta, $attachment_id );
if ( $size_array ) {
// If the width is enforced through style (e.g. in an inline image), calculate the dimension attributes.
$style_width = preg_match( '/style="width:\s*(\d+)px;"/', $image, $match_width ) ? (int) $match_width[1] : 0;
if ( $style_width ) {
$size_array[1] = (int) round( $size_array[1] * $style_width / $size_array[0] );
$size_array[0] = $style_width;
}
$hw = trim( image_hwstring( $size_array[0], $size_array[1] ) );
return str_replace( '<img', "<img {$hw}", $image );
}

85
tests/phpunit/tests/media/wpImgTagAddWidthAndHeightAttr.php Normal file
View File

@ -0,0 +1,85 @@
<?php
/**
* Tests for the `wp_img_tag_add_width_and_height_attr()` function.
*
* @group media
* @covers ::wp_img_tag_add_width_and_height_attr
*/
class Tests_Media_Wp_Img_Tag_Add_Width_And_Height_Attr extends WP_UnitTestCase {
protected static $attachment_id;
protected static $attachment_width;
protected static $attachment_height;
public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
$file = DIR_TESTDATA . '/images/2007-06-17DSC_4173.JPG';
self::$attachment_id = $factory->attachment->create_upload_object( $file );
self::$attachment_width = 680;
self::$attachment_height = 1024;
}
public static function tear_down_after_class() {
wp_delete_attachment( self::$attachment_id, true );
parent::tear_down_after_class();
}
/**
* Tests that `wp_img_tag_add_width_and_height_attr()` adds dimension attributes to an image when they are missing.
*
* @ticket 50367
*/
public function test_add_width_and_height_when_missing() {
$image_tag = '<img src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '">';
$this->assertSame(
'<img width="' . self::$attachment_width . '" height="' . self::$attachment_height . '" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '">',
wp_img_tag_add_width_and_height_attr( $image_tag, 'the_content', self::$attachment_id )
);
}
/**
* Tests that `wp_img_tag_add_width_and_height_attr()` does not add dimension attributes when disabled via filter.
*
* @ticket 50367
*/
public function test_do_not_add_width_and_height_when_disabled_via_filter() {
add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );
$image_tag = '<img src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '">';
$this->assertSame(
$image_tag,
wp_img_tag_add_width_and_height_attr( $image_tag, 'the_content', self::$attachment_id )
);
}
/**
* Tests that `wp_img_tag_add_width_and_height_attr()` does not add dimension attributes to an image without src.
*
* @ticket 50367
*/
public function test_do_not_add_width_and_height_without_src() {
$image_tag = '<img>';
$this->assertSame(
$image_tag,
wp_img_tag_add_width_and_height_attr( $image_tag, 'the_content', self::$attachment_id )
);
}
/**
* Tests that `wp_img_tag_add_width_and_height_attr()` respects the style attribute from the inline image format to
* correctly set width and height based on that.
*
* @ticket 59352
*/
public function test_consider_inline_image_style_attr_to_set_width_and_height() {
// '85px' is the original width (680px) divided by 8, so the expected height is equivalently 1024/8=128.
$image_tag = '<img src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '" style="width: 85px;">';
$this->assertSame(
'<img width="85" height="128" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '" style="width: 85px;">',
wp_img_tag_add_width_and_height_attr( $image_tag, 'the_content', self::$attachment_id )
);
}
}