From 2aca958d8322c2ec52dba41fda3d202a28e09b76 Mon Sep 17 00:00:00 2001 From: devansh016 Date: Tue, 25 Jun 2024 16:13:57 +0530 Subject: [PATCH 01/10] Add alt tag to original_image_without_srcset --- plugins/webp-uploads/picture-element.php | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/plugins/webp-uploads/picture-element.php b/plugins/webp-uploads/picture-element.php index aa5ca14f2d..238300ceb5 100644 --- a/plugins/webp-uploads/picture-element.php +++ b/plugins/webp-uploads/picture-element.php @@ -81,10 +81,12 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int // Extract sizes using regex to parse image tag, then use to retrieve tag. $width = 0; $height = 0; + $alt = ''; $processor = new WP_HTML_Tag_Processor( $image ); if ( $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) { $width = (int) $processor->get_attribute( 'width' ); $height = (int) $processor->get_attribute( 'height' ); + $alt = (string) $processor->get_attribute( 'alt' ); } $size_to_use = ( $width > 0 && $height > 0 ) ? array( $width, $height ) : 'full'; @@ -124,10 +126,11 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int continue; } $picture_sources .= sprintf( - '', + '', esc_attr( $image_mime_type ), esc_attr( $image_srcset ), - esc_attr( $sizes ) + esc_attr( $sizes ), + esc_attr( $alt ) ); } @@ -142,7 +145,15 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int return false; }; add_filter( 'wp_calculate_image_srcset_meta', $filter ); - $original_image_without_srcset = wp_get_attachment_image( $attachment_id, $original_sizes, false, array( 'src' => $original_image ) ); + $original_image_without_srcset = wp_get_attachment_image( + $attachment_id, + $original_sizes, + false, + array( + 'src' => $original_image, + 'alt' => $alt, + ) + ); remove_filter( 'wp_calculate_image_srcset_meta', $filter ); return sprintf( From 3895dc346d9c038b7a8c8295c862febdc4acf5b9 Mon Sep 17 00:00:00 2001 From: devansh016 Date: Wed, 26 Jun 2024 11:54:05 +0530 Subject: [PATCH 02/10] Revert "Add alt tag to original_image_without_srcset" This reverts commit 2aca958d8322c2ec52dba41fda3d202a28e09b76. --- plugins/webp-uploads/picture-element.php | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/plugins/webp-uploads/picture-element.php b/plugins/webp-uploads/picture-element.php index 238300ceb5..aa5ca14f2d 100644 --- a/plugins/webp-uploads/picture-element.php +++ b/plugins/webp-uploads/picture-element.php @@ -81,12 +81,10 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int // Extract sizes using regex to parse image tag, then use to retrieve tag. $width = 0; $height = 0; - $alt = ''; $processor = new WP_HTML_Tag_Processor( $image ); if ( $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) { $width = (int) $processor->get_attribute( 'width' ); $height = (int) $processor->get_attribute( 'height' ); - $alt = (string) $processor->get_attribute( 'alt' ); } $size_to_use = ( $width > 0 && $height > 0 ) ? array( $width, $height ) : 'full'; @@ -126,11 +124,10 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int continue; } $picture_sources .= sprintf( - '', + '', esc_attr( $image_mime_type ), esc_attr( $image_srcset ), - esc_attr( $sizes ), - esc_attr( $alt ) + esc_attr( $sizes ) ); } @@ -145,15 +142,7 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int return false; }; add_filter( 'wp_calculate_image_srcset_meta', $filter ); - $original_image_without_srcset = wp_get_attachment_image( - $attachment_id, - $original_sizes, - false, - array( - 'src' => $original_image, - 'alt' => $alt, - ) - ); + $original_image_without_srcset = wp_get_attachment_image( $attachment_id, $original_sizes, false, array( 'src' => $original_image ) ); remove_filter( 'wp_calculate_image_srcset_meta', $filter ); return sprintf( From d73fa783431868256070a5ad685e22dafa1cc6c2 Mon Sep 17 00:00:00 2001 From: devansh016 Date: Wed, 26 Jun 2024 23:35:03 +0530 Subject: [PATCH 03/10] Add srcset back to the original image --- plugins/webp-uploads/picture-element.php | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/plugins/webp-uploads/picture-element.php b/plugins/webp-uploads/picture-element.php index aa5ca14f2d..39984e9673 100644 --- a/plugins/webp-uploads/picture-element.php +++ b/plugins/webp-uploads/picture-element.php @@ -132,7 +132,6 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int } // Fall back to the original image without a srcset. - $original_sizes = array( $image_src[1], $image_src[2] ); $original_image = wp_get_original_image_url( $attachment_id ); // Fail gracefully if the original image is not found. if ( false === $original_image ) { @@ -141,14 +140,11 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int $filter = static function (): bool { return false; }; - add_filter( 'wp_calculate_image_srcset_meta', $filter ); - $original_image_without_srcset = wp_get_attachment_image( $attachment_id, $original_sizes, false, array( 'src' => $original_image ) ); - remove_filter( 'wp_calculate_image_srcset_meta', $filter ); return sprintf( '%s%s', esc_attr( 'wp-picture-' . $attachment_id ), $picture_sources, - $original_image_without_srcset + $image ); } From 16fcca0791fd3f4c99e737b891602af32008be7e Mon Sep 17 00:00:00 2001 From: devansh016 Date: Thu, 27 Jun 2024 02:18:49 +0530 Subject: [PATCH 04/10] Update testcase --- .../tests/test-picture-element.php | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/plugins/webp-uploads/tests/test-picture-element.php b/plugins/webp-uploads/tests/test-picture-element.php index 9f632deb8b..e4910e168f 100644 --- a/plugins/webp-uploads/tests/test-picture-element.php +++ b/plugins/webp-uploads/tests/test-picture-element.php @@ -50,8 +50,22 @@ public function test_maybe_wrap_images_in_picture_element( bool $jpeg_and_webp, $this->assertStringNotContainsString( $picture_element, $the_image ); } - // When both features are enabled, the picture element will contain two srcset elements. - $this->assertEquals( ( $jpeg_and_webp && $expect_picture_element ) ? 2 : 1, substr_count( $the_image, 'srcset=' ) ); + // When both features are enabled, the picture element will contain 3 srcset elements. + if ( $jpeg_and_webp && $expect_picture_element ) { + $this->assertEquals( 3, substr_count( $the_image, 'srcset=' ) ); + } + // When neither features are enabled, the picture element will contain 1 srcset elements. + if ( ! $jpeg_and_webp && ! $expect_picture_element ) { + $this->assertEquals( 1, substr_count( $the_image, 'srcset=' ) ); + } + // When only jpeg_and_webp is enabled, the picture element will contain 1 srcset elements. + if ( $jpeg_and_webp && ! $expect_picture_element ) { + $this->assertEquals( 1, substr_count( $the_image, 'srcset=' ) ); + } + // When only picture_element is enabled, the picture element will contain 2 srcset elements. + if ( ! $jpeg_and_webp && $expect_picture_element ) { + $this->assertEquals( 2, substr_count( $the_image, 'srcset=' ) ); + } } /** From ed39189f36c2dc4061e23d5c061600c3a3181ba7 Mon Sep 17 00:00:00 2001 From: devansh016 Date: Tue, 2 Jul 2024 12:00:43 +0530 Subject: [PATCH 05/10] Remove unuse code --- plugins/webp-uploads/picture-element.php | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/plugins/webp-uploads/picture-element.php b/plugins/webp-uploads/picture-element.php index 39984e9673..2dff71dce0 100644 --- a/plugins/webp-uploads/picture-element.php +++ b/plugins/webp-uploads/picture-element.php @@ -131,16 +131,6 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int ); } - // Fall back to the original image without a srcset. - $original_image = wp_get_original_image_url( $attachment_id ); - // Fail gracefully if the original image is not found. - if ( false === $original_image ) { - return $image; - } - $filter = static function (): bool { - return false; - }; - return sprintf( '%s%s', esc_attr( 'wp-picture-' . $attachment_id ), From d529d9adf0b81ab37c33a69d83c08af96a81ff27 Mon Sep 17 00:00:00 2001 From: devansh016 Date: Thu, 4 Jul 2024 13:28:31 +0530 Subject: [PATCH 06/10] Add test for alt attribute and improve test for source --- .../tests/test-picture-element.php | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/plugins/webp-uploads/tests/test-picture-element.php b/plugins/webp-uploads/tests/test-picture-element.php index e4910e168f..a826f8ed55 100644 --- a/plugins/webp-uploads/tests/test-picture-element.php +++ b/plugins/webp-uploads/tests/test-picture-element.php @@ -37,7 +37,15 @@ public function test_maybe_wrap_images_in_picture_element( bool $jpeg_and_webp, $attachment_id = self::factory()->attachment->create_upload_object( TESTS_PLUGIN_DIR . '/tests/data/images/leaves.jpg' ); // Create some content with the image. - $the_image = wp_get_attachment_image( $attachment_id, 'medium', false, array( 'class' => "wp-image-{$attachment_id}" ) ); + $the_image = wp_get_attachment_image( + $attachment_id, + 'medium', + false, + array( + 'class' => "wp-image-{$attachment_id}", + 'alt' => 'Green Leaves', + ) + ); // Apply the wp_content_img_tag filter. $the_image = apply_filters( 'wp_content_img_tag', $the_image, 'the_content', $attachment_id ); @@ -50,9 +58,16 @@ public function test_maybe_wrap_images_in_picture_element( bool $jpeg_and_webp, $this->assertStringNotContainsString( $picture_element, $the_image ); } + $this->assertStringContainsString( 'assertStringContainsString( 'alt="Green Leaves"', $the_image ); + // When both features are enabled, the picture element will contain 3 srcset elements. if ( $jpeg_and_webp && $expect_picture_element ) { $this->assertEquals( 3, substr_count( $the_image, 'srcset=' ) ); + $this->assertStringContainsString( 'assertStringContainsString( 'assertEquals( 2, substr_count( $the_image, 'srcset=' ) ); + $this->assertStringContainsString( ' Date: Thu, 4 Jul 2024 17:51:27 +0530 Subject: [PATCH 07/10] Improve testcase --- .../tests/test-picture-element.php | 53 +++++++++++++++++-- 1 file changed, 48 insertions(+), 5 deletions(-) diff --git a/plugins/webp-uploads/tests/test-picture-element.php b/plugins/webp-uploads/tests/test-picture-element.php index a826f8ed55..59b235a13e 100644 --- a/plugins/webp-uploads/tests/test-picture-element.php +++ b/plugins/webp-uploads/tests/test-picture-element.php @@ -15,11 +15,12 @@ class Test_WebP_Uploads_Picture_Element extends TestCase { * * @dataProvider data_provider_it_should_maybe_wrap_images_in_picture_element * - * @param bool $jpeg_and_webp Whether to enable JPEG and WebP output. - * @param bool $picture_element Whether to enable picture element output. - * @param bool $expect_picture_element Whether to expect the image to be wrapped in a picture element. + * @param bool $jpeg_and_webp Whether to enable JPEG and WebP output. + * @param bool $picture_element Whether to enable picture element output. + * @param bool $expect_picture_element Whether to expect the image to be wrapped in a picture element. + * @param string $expected_html The expected HTML output. */ - public function test_maybe_wrap_images_in_picture_element( bool $jpeg_and_webp, bool $picture_element, bool $expect_picture_element ): void { + public function test_maybe_wrap_images_in_picture_element( bool $jpeg_and_webp, bool $picture_element, bool $expect_picture_element, string $expected_html ): void { $mime_type = 'image/webp'; if ( ! wp_image_editor_supports( array( 'mime_type' => $mime_type ) ) ) { $this->markTestSkipped( "Mime type $mime_type is not supported." ); @@ -47,6 +48,43 @@ public function test_maybe_wrap_images_in_picture_element( bool $jpeg_and_webp, ) ); + $processor = new WP_HTML_Tag_Processor( $the_image ); + $width = 0; + $height = 0; + $alt = ''; + if ( $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) { + $width = (int) $processor->get_attribute( 'width' ); + $height = (int) $processor->get_attribute( 'height' ); + $alt = (string) $processor->get_attribute( 'alt' ); + } + + $size_to_use = ( $width > 0 && $height > 0 ) ? array( $width, $height ) : 'full'; + $image_src = wp_get_attachment_image_src( $attachment_id, $size_to_use ); + list( $src, $width, $height ) = $image_src; + $size_array = array( absint( $width ), absint( $height ) ); + $image_meta = wp_get_attachment_metadata( $attachment_id ); + $sizes = wp_calculate_image_sizes( $size_array, $src, $image_meta, $attachment_id ); + $image_srcset = wp_get_attachment_image_srcset( $attachment_id, $size_to_use ); + + $img_src = ''; + if ( $image_src ) { + $img_src = $image_src[0]; + } + // Remove the last size in the srcset, as it is not needed. + $jpeg_srcset = substr( $image_srcset, 0, strrpos( $image_srcset, ',' ) ); + $webp_srcset = str_replace( '.jpg', '-jpg.webp', $jpeg_srcset ); + + // Prepare the expected HTML by replacing placeholders with expected values. + $expected_html = str_replace( '{{img-width}}', $width, $expected_html ); + $expected_html = str_replace( '{{img-height}}', $height, $expected_html ); + $expected_html = str_replace( '{{img-src}}', $img_src, $expected_html ); + $expected_html = str_replace( '{{img-attachment-id}}', $attachment_id, $expected_html ); + $expected_html = str_replace( '{{img-alt}}', $alt, $expected_html ); + $expected_html = str_replace( '{{img-srcset}}', $image_srcset, $expected_html ); + $expected_html = str_replace( '{{img-sizes}}', $sizes, $expected_html ); + $expected_html = str_replace( '{{jpeg-srcset}}', $jpeg_srcset, $expected_html ); + $expected_html = str_replace( '{{webp-srcset}}', $webp_srcset, $expected_html ); + // Apply the wp_content_img_tag filter. $the_image = apply_filters( 'wp_content_img_tag', $the_image, 'the_content', $attachment_id ); @@ -58,6 +96,7 @@ public function test_maybe_wrap_images_in_picture_element( bool $jpeg_and_webp, $this->assertStringNotContainsString( $picture_element, $the_image ); } + $this->assertEquals( $expected_html, $the_image ); $this->assertStringContainsString( '> + * @return array> */ public function data_provider_it_should_maybe_wrap_images_in_picture_element(): array { return array( @@ -95,21 +134,25 @@ public function data_provider_it_should_maybe_wrap_images_in_picture_element(): 'jpeg_and_webp' => true, 'picture_element' => true, 'expect_picture_element' => true, + 'expected_html' => '{{img-alt}}', ), 'only picture enabled' => array( 'jpeg_and_webp' => false, 'picture_element' => true, 'expect_picture_element' => true, + 'expected_html' => '{{img-alt}}', ), 'only jpeg enabled' => array( 'jpeg_and_webp' => true, 'picture_element' => false, 'expect_picture_element' => false, + 'expected_html' => '{{img-alt}}', ), 'neither enabled' => array( 'jpeg_and_webp' => false, 'picture_element' => false, 'expect_picture_element' => false, + 'expected_html' => '{{img-alt}}', ), ); } From 49648e613fd43f78003f4b0d0cbd3b0ada6ee76a Mon Sep 17 00:00:00 2001 From: devansh016 Date: Thu, 4 Jul 2024 20:42:22 +0530 Subject: [PATCH 08/10] Remove redundant tests --- .../tests/test-picture-element.php | 33 +------------------ 1 file changed, 1 insertion(+), 32 deletions(-) diff --git a/plugins/webp-uploads/tests/test-picture-element.php b/plugins/webp-uploads/tests/test-picture-element.php index 59b235a13e..436b52d0f8 100644 --- a/plugins/webp-uploads/tests/test-picture-element.php +++ b/plugins/webp-uploads/tests/test-picture-element.php @@ -88,39 +88,8 @@ public function test_maybe_wrap_images_in_picture_element( bool $jpeg_and_webp, // Apply the wp_content_img_tag filter. $the_image = apply_filters( 'wp_content_img_tag', $the_image, 'the_content', $attachment_id ); - // Check that the image is wrapped in a picture element with the correct class. - $picture_element = sprintf( '', $attachment_id ); - if ( $expect_picture_element ) { - $this->assertStringContainsString( $picture_element, $the_image ); - } else { - $this->assertStringNotContainsString( $picture_element, $the_image ); - } - + // Check that the image has the expected HTML. $this->assertEquals( $expected_html, $the_image ); - $this->assertStringContainsString( 'assertStringContainsString( 'alt="Green Leaves"', $the_image ); - - // When both features are enabled, the picture element will contain 3 srcset elements. - if ( $jpeg_and_webp && $expect_picture_element ) { - $this->assertEquals( 3, substr_count( $the_image, 'srcset=' ) ); - $this->assertStringContainsString( 'assertStringContainsString( 'assertEquals( 1, substr_count( $the_image, 'srcset=' ) ); - } - // When only jpeg_and_webp is enabled, the picture element will contain 1 srcset elements. - if ( $jpeg_and_webp && ! $expect_picture_element ) { - $this->assertEquals( 1, substr_count( $the_image, 'srcset=' ) ); - } - // When only picture_element is enabled, the picture element will contain 2 srcset elements. - if ( ! $jpeg_and_webp && $expect_picture_element ) { - $this->assertEquals( 2, substr_count( $the_image, 'srcset=' ) ); - $this->assertStringContainsString( ' Date: Sat, 6 Jul 2024 01:11:51 +0530 Subject: [PATCH 09/10] Test less verbose --- .../tests/test-picture-element.php | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/plugins/webp-uploads/tests/test-picture-element.php b/plugins/webp-uploads/tests/test-picture-element.php index 436b52d0f8..337dd71e8c 100644 --- a/plugins/webp-uploads/tests/test-picture-element.php +++ b/plugins/webp-uploads/tests/test-picture-element.php @@ -75,15 +75,19 @@ public function test_maybe_wrap_images_in_picture_element( bool $jpeg_and_webp, $webp_srcset = str_replace( '.jpg', '-jpg.webp', $jpeg_srcset ); // Prepare the expected HTML by replacing placeholders with expected values. - $expected_html = str_replace( '{{img-width}}', $width, $expected_html ); - $expected_html = str_replace( '{{img-height}}', $height, $expected_html ); - $expected_html = str_replace( '{{img-src}}', $img_src, $expected_html ); - $expected_html = str_replace( '{{img-attachment-id}}', $attachment_id, $expected_html ); - $expected_html = str_replace( '{{img-alt}}', $alt, $expected_html ); - $expected_html = str_replace( '{{img-srcset}}', $image_srcset, $expected_html ); - $expected_html = str_replace( '{{img-sizes}}', $sizes, $expected_html ); - $expected_html = str_replace( '{{jpeg-srcset}}', $jpeg_srcset, $expected_html ); - $expected_html = str_replace( '{{webp-srcset}}', $webp_srcset, $expected_html ); + $replacements = array( + '{{img-width}}' => $width, + '{{img-height}}' => $height, + '{{img-src}}' => $img_src, + '{{img-attachment-id}}' => $attachment_id, + '{{img-alt}}' => $alt, + '{{img-srcset}}' => $image_srcset, + '{{img-sizes}}' => $sizes, + '{{jpeg-srcset}}' => $jpeg_srcset, + '{{webp-srcset}}' => $webp_srcset, + ); + + $expected_html = str_replace( array_keys( $replacements ), array_values( $replacements ), $expected_html ); // Apply the wp_content_img_tag filter. $the_image = apply_filters( 'wp_content_img_tag', $the_image, 'the_content', $attachment_id ); From 04374f8c61ba890b8ae9618403c4338b011e7183 Mon Sep 17 00:00:00 2001 From: Devansh Chaudhary <58871818+devansh016@users.noreply.github.com> Date: Tue, 9 Jul 2024 14:06:58 +0530 Subject: [PATCH 10/10] Improve testcase structure Co-authored-by: Weston Ruter --- plugins/webp-uploads/tests/test-picture-element.php | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/plugins/webp-uploads/tests/test-picture-element.php b/plugins/webp-uploads/tests/test-picture-element.php index 337dd71e8c..580cedcd34 100644 --- a/plugins/webp-uploads/tests/test-picture-element.php +++ b/plugins/webp-uploads/tests/test-picture-element.php @@ -49,14 +49,10 @@ public function test_maybe_wrap_images_in_picture_element( bool $jpeg_and_webp, ); $processor = new WP_HTML_Tag_Processor( $the_image ); - $width = 0; - $height = 0; - $alt = ''; - if ( $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) { - $width = (int) $processor->get_attribute( 'width' ); - $height = (int) $processor->get_attribute( 'height' ); - $alt = (string) $processor->get_attribute( 'alt' ); - } + $this->assertTrue( $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ); + $width = (int) $processor->get_attribute( 'width' ); + $height = (int) $processor->get_attribute( 'height' ); + $alt = (string) $processor->get_attribute( 'alt' ); $size_to_use = ( $width > 0 && $height > 0 ) ? array( $width, $height ) : 'full'; $image_src = wp_get_attachment_image_src( $attachment_id, $size_to_use );