From 7546f34aa7e6db4e12425f995988a2ce0944bbef Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Thu, 8 Aug 2024 16:36:40 +0530 Subject: [PATCH 01/11] Remove source when the responsive image disabled --- plugins/webp-uploads/picture-element.php | 5 ++++ .../tests/test-picture-element.php | 23 ++++++++++--------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/plugins/webp-uploads/picture-element.php b/plugins/webp-uploads/picture-element.php index 1d9a963881..67afb8338b 100644 --- a/plugins/webp-uploads/picture-element.php +++ b/plugins/webp-uploads/picture-element.php @@ -98,6 +98,11 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int // Get the sizes from the IMG tag. $sizes = $processor->get_attribute( 'sizes' ); + // Bail early when the responsive images are disabled. + if ( null === $sizes ) { + return $image; + } + foreach ( $mime_types as $image_mime_type ) { // Filter core's wp_get_attachment_image_srcset to return the sources for the current mime type. $filter = static function ( $sources ) use ( $mime_type_data, $image_mime_type ): array { diff --git a/plugins/webp-uploads/tests/test-picture-element.php b/plugins/webp-uploads/tests/test-picture-element.php index 04d44b433a..b1ab2fc051 100644 --- a/plugins/webp-uploads/tests/test-picture-element.php +++ b/plugins/webp-uploads/tests/test-picture-element.php @@ -234,23 +234,24 @@ public function test_disable_responsive_image_with_picture_element(): void { $img_markup = apply_filters( 'the_content', $image ); - // Apply picture element support. - $this->opt_in_to_picture_element(); - - $picture_markup = apply_filters( 'the_content', $image ); - $img_processor = new WP_HTML_Tag_Processor( $img_markup ); $img_processor->next_tag( array( 'tag_name' => 'IMG' ) ); - $this->assertNull( $img_processor->get_attribute( 'sizes' ), 'Sizes attribute missing in IMG tag.' ); + $this->assertNull( $img_processor->get_attribute( 'sizes' ), 'Make sure that there no sizes attribute in IMG tag.' ); + $this->assertNull( $img_processor->get_attribute( 'srcset' ), 'Make sure that there no srcset attribute in IMG tag.' ); - $picture_processor = new WP_HTML_Tag_Processor( $picture_markup ); - $picture_processor->next_tag( array( 'tag_name' => 'IMG' ) ); + // Apply picture element support. + $this->opt_in_to_picture_element(); - $this->assertNull( $picture_processor->get_attribute( 'sizes' ), 'Sizes attribute missing in Picture IMG tag.' ); + $picture_markup = apply_filters( 'the_content', $image ); - $picture_processor->next_tag( array( 'tag_name' => 'source' ) ); + $picture_processor = new WP_HTML_Tag_Processor( $picture_markup ); + $this->assertFalse( $img_processor->next_tag( array( 'tag_name' => 'picture' ) ), 'Make sure that there no Picture tag.' ); + $this->assertFalse( $img_processor->next_tag( array( 'tag_name' => 'source' ) ), 'Make sure that there no source tag.' ); + $this->assertTrue( $picture_processor->next_tag( array( 'tag_name' => 'IMG' ) ), 'Make sure that there IMG tag.' ); + $this->assertNull( $picture_processor->get_attribute( 'sizes' ), 'Make sure that there no sizes attribute in IMG tag.' ); + $this->assertNull( $picture_processor->get_attribute( 'srcset' ), 'Make sure that there no srcset attribute in IMG tag.' ); - $this->assertNull( $picture_processor->get_attribute( 'sizes' ), 'Sizes attribute missing in Picture source tag.' ); + $this->assertSame( $img_markup, $picture_markup, 'Make sure both images have the same' ); } } From 427fa202f001ed5e7d18b7e95a07b91ecc1b3a83 Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Thu, 8 Aug 2024 16:41:59 +0530 Subject: [PATCH 02/11] Update copy text --- .../webp-uploads/tests/test-picture-element.php | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/plugins/webp-uploads/tests/test-picture-element.php b/plugins/webp-uploads/tests/test-picture-element.php index b1ab2fc051..099d8d345b 100644 --- a/plugins/webp-uploads/tests/test-picture-element.php +++ b/plugins/webp-uploads/tests/test-picture-element.php @@ -237,8 +237,8 @@ public function test_disable_responsive_image_with_picture_element(): void { $img_processor = new WP_HTML_Tag_Processor( $img_markup ); $img_processor->next_tag( array( 'tag_name' => 'IMG' ) ); - $this->assertNull( $img_processor->get_attribute( 'sizes' ), 'Make sure that there no sizes attribute in IMG tag.' ); - $this->assertNull( $img_processor->get_attribute( 'srcset' ), 'Make sure that there no srcset attribute in IMG tag.' ); + $this->assertNull( $img_processor->get_attribute( 'sizes' ), 'Make sure that there is no sizes attribute in IMG tag.' ); + $this->assertNull( $img_processor->get_attribute( 'srcset' ), 'Make sure that there is no srcset attribute in IMG tag.' ); // Apply picture element support. $this->opt_in_to_picture_element(); @@ -246,12 +246,12 @@ public function test_disable_responsive_image_with_picture_element(): void { $picture_markup = apply_filters( 'the_content', $image ); $picture_processor = new WP_HTML_Tag_Processor( $picture_markup ); - $this->assertFalse( $img_processor->next_tag( array( 'tag_name' => 'picture' ) ), 'Make sure that there no Picture tag.' ); - $this->assertFalse( $img_processor->next_tag( array( 'tag_name' => 'source' ) ), 'Make sure that there no source tag.' ); - $this->assertTrue( $picture_processor->next_tag( array( 'tag_name' => 'IMG' ) ), 'Make sure that there IMG tag.' ); - $this->assertNull( $picture_processor->get_attribute( 'sizes' ), 'Make sure that there no sizes attribute in IMG tag.' ); - $this->assertNull( $picture_processor->get_attribute( 'srcset' ), 'Make sure that there no srcset attribute in IMG tag.' ); + $this->assertFalse( $img_processor->next_tag( array( 'tag_name' => 'picture' ) ), 'Make sure that there is no Picture tag.' ); + $this->assertFalse( $img_processor->next_tag( array( 'tag_name' => 'source' ) ), 'Make sure that there is no source tag.' ); + $this->assertTrue( $picture_processor->next_tag( array( 'tag_name' => 'IMG' ) ), 'Make sure that there is a IMG tag.' ); + $this->assertNull( $picture_processor->get_attribute( 'sizes' ), 'Make sure that there is no sizes attribute in IMG tag.' ); + $this->assertNull( $picture_processor->get_attribute( 'srcset' ), 'Make sure that there is no srcset attribute in IMG tag.' ); - $this->assertSame( $img_markup, $picture_markup, 'Make sure both images have the same' ); + $this->assertSame( $img_markup, $picture_markup, 'Make sure both markup are the same' ); } } From 7e09a7231dc04ef3772c0be58fae185dc89a3b7b Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Mon, 12 Aug 2024 11:46:07 +0530 Subject: [PATCH 03/11] Return Picture element, if responsive image disable --- plugins/webp-uploads/picture-element.php | 77 +++++++++++-------- .../tests/test-picture-element.php | 35 +++++++-- 2 files changed, 75 insertions(+), 37 deletions(-) diff --git a/plugins/webp-uploads/picture-element.php b/plugins/webp-uploads/picture-element.php index 9b2aef543a..465286651f 100644 --- a/plugins/webp-uploads/picture-element.php +++ b/plugins/webp-uploads/picture-element.php @@ -97,42 +97,55 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int $size_array = array( absint( $width ), absint( $height ) ); // Get the sizes from the IMG tag. - $sizes = $processor->get_attribute( 'sizes' ); + $sizes = $processor->get_attribute( 'sizes' ); + $srcset = $processor->get_attribute( 'srcset' ); - // Bail early when the responsive images are disabled. - if ( null === $sizes ) { - return $image; - } - - foreach ( $mime_types as $image_mime_type ) { - // Filter core's wp_get_attachment_image_srcset to return the sources for the current mime type. - $filter = static function ( $sources ) use ( $mime_type_data, $image_mime_type ): array { - $filtered_sources = array(); - foreach ( $sources as $source ) { - // Swap the URL for the current mime type. - if ( isset( $mime_type_data[ $image_mime_type ][ $source['descriptor'] ][ $source['value'] ] ) ) { - $filename = $mime_type_data[ $image_mime_type ][ $source['descriptor'] ][ $source['value'] ]['file']; - $filtered_sources[] = array( - 'url' => dirname( $source['url'] ) . '/' . $filename, - 'descriptor' => $source['descriptor'], - 'value' => $source['value'], - ); + if ( null !== $srcset && null !== $sizes ) { + foreach ( $mime_types as $image_mime_type ) { + // Filter core's wp_get_attachment_image_srcset to return the sources for the current mime type. + $filter = static function ( $sources ) use ( $mime_type_data, $image_mime_type ): array { + $filtered_sources = array(); + foreach ( $sources as $source ) { + // Swap the URL for the current mime type. + if ( isset( $mime_type_data[ $image_mime_type ][ $source['descriptor'] ][ $source['value'] ] ) ) { + $filename = $mime_type_data[ $image_mime_type ][ $source['descriptor'] ][ $source['value'] ]['file']; + $filtered_sources[] = array( + 'url' => dirname( $source['url'] ) . '/' . $filename, + 'descriptor' => $source['descriptor'], + 'value' => $source['value'], + ); + } } + return $filtered_sources; + }; + add_filter( 'wp_calculate_image_srcset', $filter ); + $image_srcset = wp_get_attachment_image_srcset( $attachment_id, $size_array, $image_meta ); + remove_filter( 'wp_calculate_image_srcset', $filter ); + if ( false === $image_srcset ) { + continue; + } + $picture_sources .= sprintf( + '', + esc_attr( $image_mime_type ), + is_string( $image_srcset ) ? sprintf( ' srcset="%s"', esc_attr( $image_srcset ) ) : '', + is_string( $sizes ) ? sprintf( ' sizes="%s"', esc_attr( $sizes ) ) : '' + ); + } + } else { + foreach ( $mime_types as $image_mime_type ) { + // Updates the reference of the image to the a new image format if available. + $img = webp_uploads_img_tag_update_mime_type( $image, 'the_content', $attachment_id ); + $processor = new WP_HTML_Tag_Processor( $img ); + if ( $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) { + $src = $processor->get_attribute( 'src' ); + + $picture_sources .= sprintf( + '', + esc_attr( $image_mime_type ), + is_string( $src ) ? sprintf( ' srcset="%s"', esc_attr( $src ) ) : '' + ); } - return $filtered_sources; - }; - add_filter( 'wp_calculate_image_srcset', $filter ); - $image_srcset = wp_get_attachment_image_srcset( $attachment_id, $size_array, $image_meta ); - remove_filter( 'wp_calculate_image_srcset', $filter ); - if ( false === $image_srcset ) { - continue; } - $picture_sources .= sprintf( - '', - esc_attr( $image_mime_type ), - is_string( $image_srcset ) ? sprintf( ' srcset="%s"', esc_attr( $image_srcset ) ) : '', - is_string( $sizes ) ? sprintf( ' sizes="%s"', esc_attr( $sizes ) ) : '' - ); } return sprintf( diff --git a/plugins/webp-uploads/tests/test-picture-element.php b/plugins/webp-uploads/tests/test-picture-element.php index 7a15f07d45..0435e13c15 100644 --- a/plugins/webp-uploads/tests/test-picture-element.php +++ b/plugins/webp-uploads/tests/test-picture-element.php @@ -262,9 +262,16 @@ function ( string $content ): string { ); } - public function test_disable_responsive_image_with_picture_element(): void { + /** + * @dataProvider data_provider_test_disable_responsive_image_with_picture_element + * + * @param Closure|null $add_filter The filter. + */ + public function test_disable_responsive_image_with_picture_element( ?Closure $add_filter ): void { // Disable responsive images. - add_filter( 'wp_calculate_image_sizes', '__return_false' ); + if ( $add_filter instanceof Closure ) { + $add_filter(); + } // Create some content with the image. $image = wp_get_attachment_image( @@ -280,7 +287,6 @@ public function test_disable_responsive_image_with_picture_element(): void { $img_markup = apply_filters( 'the_content', $image ); $img_processor = new WP_HTML_Tag_Processor( $img_markup ); - $this->assertTrue( $img_processor->next_tag( array( 'tag_name' => 'IMG' ) ), 'There should be an IMG tag.' ); $img_src = $img_processor->get_attribute( 'src' ); $this->assertStringEndsWith( '.webp', $img_src, 'Make sure the IMG should return WEBP src.' ); @@ -293,8 +299,7 @@ public function test_disable_responsive_image_with_picture_element(): void { $picture_markup = apply_filters( 'the_content', $image ); $picture_processor = new WP_HTML_Tag_Processor( $picture_markup ); - $this->assertFalse( $img_processor->next_tag( array( 'tag_name' => 'picture' ) ), 'Make sure that there is no Picture tag.' ); - $this->assertFalse( $img_processor->next_tag( array( 'tag_name' => 'source' ) ), 'Make sure that there is no source tag.' ); + $this->assertTrue( $picture_processor->next_tag( array( 'tag_name' => 'picture' ) ), 'Make sure that there is a Picture tag.' ); $this->assertTrue( $picture_processor->next_tag( array( 'tag_name' => 'IMG' ) ), 'Make sure that there is a IMG tag.' ); $this->assertNull( $picture_processor->get_attribute( 'sizes' ), 'Make sure that there is no sizes attribute in IMG tag.' ); $this->assertNull( $picture_processor->get_attribute( 'srcset' ), 'Make sure that there is no srcset attribute in IMG tag.' ); @@ -308,4 +313,24 @@ public function test_disable_responsive_image_with_picture_element(): void { $this->assertStringContainsString( '.webp', $picture_processor->get_attribute( 'srcset' ), 'Make sure the Picture source srcset should return WEBP images.' ); } } + + /** + * Data provider for it_should_maybe_wrap_images_in_picture_element. + * + * @return array + */ + public function data_provider_test_disable_responsive_image_with_picture_element(): array { + return array( + 'no_sizes' => array( + 'add_filter' => static function (): void { + add_filter( 'wp_calculate_image_sizes', '__return_false' ); + }, + ), + 'no_srcset' => array( + 'add_filter' => static function (): void { + add_filter( 'wp_calculate_image_srcset', '__return_false' ); + }, + ), + ); + } } From 6bb9ef84e5dbbb51c5c77f3452aced0c3cdb63a1 Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Mon, 12 Aug 2024 12:36:59 +0530 Subject: [PATCH 04/11] Doc updates --- plugins/webp-uploads/tests/test-picture-element.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/webp-uploads/tests/test-picture-element.php b/plugins/webp-uploads/tests/test-picture-element.php index 0435e13c15..015f0bd4d7 100644 --- a/plugins/webp-uploads/tests/test-picture-element.php +++ b/plugins/webp-uploads/tests/test-picture-element.php @@ -265,7 +265,7 @@ function ( string $content ): string { /** * @dataProvider data_provider_test_disable_responsive_image_with_picture_element * - * @param Closure|null $add_filter The filter. + * @param Closure $add_filter The filter. */ public function test_disable_responsive_image_with_picture_element( ?Closure $add_filter ): void { // Disable responsive images. @@ -317,7 +317,7 @@ public function test_disable_responsive_image_with_picture_element( ?Closure $ad /** * Data provider for it_should_maybe_wrap_images_in_picture_element. * - * @return array + * @return array */ public function data_provider_test_disable_responsive_image_with_picture_element(): array { return array( From b4b6b231dc8472286bba567913fce8e9b08c9bfb Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Tue, 13 Aug 2024 09:24:26 +0530 Subject: [PATCH 05/11] Check if IMG have src --- plugins/webp-uploads/picture-element.php | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/plugins/webp-uploads/picture-element.php b/plugins/webp-uploads/picture-element.php index 33c218e63f..063de8b81f 100644 --- a/plugins/webp-uploads/picture-element.php +++ b/plugins/webp-uploads/picture-element.php @@ -145,12 +145,13 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int $processor = new WP_HTML_Tag_Processor( $img ); if ( $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) { $src = $processor->get_attribute( 'src' ); - - $picture_sources .= sprintf( - '', - esc_attr( $image_mime_type ), - is_string( $src ) ? sprintf( ' srcset="%s"', esc_attr( $src ) ) : '' - ); + if ( null !== $src ) { + $picture_sources .= sprintf( + '', + esc_attr( $image_mime_type ), + is_string( $src ) ? sprintf( ' srcset="%s"', esc_attr( $src ) ) : '' + ); + } } } } From a732593347bd98db839a614ef7ace18b287e4e1b Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Tue, 13 Aug 2024 09:27:59 +0530 Subject: [PATCH 06/11] Add check for is_string --- plugins/webp-uploads/picture-element.php | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/plugins/webp-uploads/picture-element.php b/plugins/webp-uploads/picture-element.php index 063de8b81f..bb6609a619 100644 --- a/plugins/webp-uploads/picture-element.php +++ b/plugins/webp-uploads/picture-element.php @@ -128,15 +128,14 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int add_filter( 'wp_calculate_image_srcset', $filter ); $image_srcset = wp_get_attachment_image_srcset( $attachment_id, $size_array, $image_meta ); remove_filter( 'wp_calculate_image_srcset', $filter ); - if ( false === $image_srcset ) { - continue; + if ( is_string( $image_srcset ) ) { + $picture_sources .= sprintf( + '', + esc_attr( $image_mime_type ), + sprintf( ' srcset="%s"', esc_attr( $image_srcset ) ), + is_string( $sizes ) ? sprintf( ' sizes="%s"', esc_attr( $sizes ) ) : '' + ); } - $picture_sources .= sprintf( - '', - esc_attr( $image_mime_type ), - is_string( $image_srcset ) ? sprintf( ' srcset="%s"', esc_attr( $image_srcset ) ) : '', - is_string( $sizes ) ? sprintf( ' sizes="%s"', esc_attr( $sizes ) ) : '' - ); } } else { foreach ( $mime_types as $image_mime_type ) { @@ -145,11 +144,11 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int $processor = new WP_HTML_Tag_Processor( $img ); if ( $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) { $src = $processor->get_attribute( 'src' ); - if ( null !== $src ) { + if ( is_string( $src ) ) { $picture_sources .= sprintf( '', esc_attr( $image_mime_type ), - is_string( $src ) ? sprintf( ' srcset="%s"', esc_attr( $src ) ) : '' + sprintf( ' srcset="%s"', esc_attr( $src ) ) ); } } From 9d66642014fcf1ca968ed382c9f0ec9c9d858a0c Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Tue, 13 Aug 2024 09:31:48 +0530 Subject: [PATCH 07/11] Minor updates --- plugins/webp-uploads/picture-element.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/webp-uploads/picture-element.php b/plugins/webp-uploads/picture-element.php index bb6609a619..50360534a0 100644 --- a/plugins/webp-uploads/picture-element.php +++ b/plugins/webp-uploads/picture-element.php @@ -130,9 +130,9 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int remove_filter( 'wp_calculate_image_srcset', $filter ); if ( is_string( $image_srcset ) ) { $picture_sources .= sprintf( - '', + '', esc_attr( $image_mime_type ), - sprintf( ' srcset="%s"', esc_attr( $image_srcset ) ), + esc_attr( $image_srcset ), is_string( $sizes ) ? sprintf( ' sizes="%s"', esc_attr( $sizes ) ) : '' ); } @@ -146,9 +146,9 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int $src = $processor->get_attribute( 'src' ); if ( is_string( $src ) ) { $picture_sources .= sprintf( - '', + '', esc_attr( $image_mime_type ), - sprintf( ' srcset="%s"', esc_attr( $src ) ) + esc_attr( $src ) ); } } From a94d48bcd5e7e4590de0101346267ea94da63ca3 Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Tue, 13 Aug 2024 09:41:44 +0530 Subject: [PATCH 08/11] Address feedback for unit test --- plugins/webp-uploads/tests/test-picture-element.php | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/plugins/webp-uploads/tests/test-picture-element.php b/plugins/webp-uploads/tests/test-picture-element.php index b659c8ee39..5fabec7dd9 100644 --- a/plugins/webp-uploads/tests/test-picture-element.php +++ b/plugins/webp-uploads/tests/test-picture-element.php @@ -263,13 +263,11 @@ function ( string $content ): string { /** * @dataProvider data_provider_test_disable_responsive_image_with_picture_element * - * @param Closure $add_filter The filter. + * @param Closure $set_up Set up the filter. */ - public function test_disable_responsive_image_with_picture_element( ?Closure $add_filter ): void { + public function test_disable_responsive_image_with_picture_element( Closure $set_up ): void { // Disable responsive images. - if ( $add_filter instanceof Closure ) { - $add_filter(); - } + $set_up(); // Create some content with the image. $image = wp_get_attachment_image( @@ -297,7 +295,7 @@ public function test_disable_responsive_image_with_picture_element( ?Closure $ad $picture_markup = apply_filters( 'the_content', $image ); $picture_processor = new WP_HTML_Tag_Processor( $picture_markup ); - $this->assertTrue( $picture_processor->next_tag( array( 'tag_name' => 'picture' ) ), 'Make sure that there is a Picture tag.' ); + $this->assertTrue( $picture_processor->next_tag( array( 'tag_name' => 'PICTURE' ) ), 'Make sure that there is a PICTURE tag.' ); $this->assertTrue( $picture_processor->next_tag( array( 'tag_name' => 'IMG' ) ), 'Make sure that there is a IMG tag.' ); $this->assertNull( $picture_processor->get_attribute( 'sizes' ), 'Make sure that there is no sizes attribute in IMG tag.' ); $this->assertNull( $picture_processor->get_attribute( 'srcset' ), 'Make sure that there is no srcset attribute in IMG tag.' ); From 35a626ad56018764809608b15a8ebb181c58f48d Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Tue, 13 Aug 2024 14:40:00 +0530 Subject: [PATCH 09/11] Introduce webp_uploads_get_mime_type_image helper function --- plugins/webp-uploads/helper.php | 58 ++++++++++++++++++++++++ plugins/webp-uploads/picture-element.php | 21 ++++----- 2 files changed, 66 insertions(+), 13 deletions(-) diff --git a/plugins/webp-uploads/helper.php b/plugins/webp-uploads/helper.php index 842aad7371..58c15c7722 100644 --- a/plugins/webp-uploads/helper.php +++ b/plugins/webp-uploads/helper.php @@ -406,3 +406,61 @@ function webp_uploads_is_picture_element_enabled(): bool { function webp_uploads_is_jpeg_fallback_enabled(): bool { return (bool) get_option( 'perflab_generate_webp_and_jpeg' ); } + +/** + * Retrieves the image URL for a specified MIME type from the attachment metadata. + * + * This function attempts to locate an alternate image source URL in the + * attachment's metadata that matches the provided MIME type. + * + * @since n.e.x.t + * + * @param int $attachment_id The ID of the attachment. + * @param string $src The original image src url. + * @param string $mime A mime type we are looking to get image url. + * @return string|false Returns mime type image if available, false otherwise. + */ +function webp_uploads_get_mime_type_image( int $attachment_id, string $src, string $mime ) { + $metadata = wp_get_attachment_metadata( $attachment_id ); + $src_basename = wp_basename( $src ); + if ( isset( $metadata['sources'][ $mime ]['file'] ) ) { + $basename = wp_basename( $metadata['file'] ); + + if ( $src_basename === $basename ) { + return str_replace( + $basename, + $metadata['sources'][ $mime ]['file'], + $src + ); + } + } + + if ( isset( $metadata['sizes'] ) && is_array( $metadata['sizes'] ) ) { + foreach ( $metadata['sizes'] as $size => $size_data ) { + + if ( empty( $size_data['file'] ) ) { + continue; + } + + if ( ! isset( $size_data['sources'][ $mime ]['file'] ) ) { + continue; + } + + if ( $size_data['file'] === $size_data['sources'][ $mime ]['file'] ) { + continue; + } + + if ( $src_basename !== $size_data['file'] ) { + continue; + } + + return str_replace( + $size_data['file'], + $size_data['sources'][ $mime ]['file'], + $src + ); + } + } + + return false; +} diff --git a/plugins/webp-uploads/picture-element.php b/plugins/webp-uploads/picture-element.php index 50360534a0..ba9c8b4428 100644 --- a/plugins/webp-uploads/picture-element.php +++ b/plugins/webp-uploads/picture-element.php @@ -103,7 +103,7 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int list( $src, $width, $height ) = $image_src; $size_array = array( absint( $width ), absint( $height ) ); - // Get the sizes from the IMG tag. + // Gets the srcset and sizes from the IMG tag. $sizes = $processor->get_attribute( 'sizes' ); $srcset = $processor->get_attribute( 'srcset' ); @@ -139,18 +139,13 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int } } else { foreach ( $mime_types as $image_mime_type ) { - // Updates the reference of the image to the a new image format if available. - $img = webp_uploads_img_tag_update_mime_type( $image, 'the_content', $attachment_id ); - $processor = new WP_HTML_Tag_Processor( $img ); - if ( $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) { - $src = $processor->get_attribute( 'src' ); - if ( is_string( $src ) ) { - $picture_sources .= sprintf( - '', - esc_attr( $image_mime_type ), - esc_attr( $src ) - ); - } + $image_srcset = webp_uploads_get_mime_type_image( $attachment_id, $src, $image_mime_type ); + if ( is_string( $image_srcset ) ) { + $picture_sources .= sprintf( + '', + esc_attr( $image_mime_type ), + esc_attr( $image_srcset ) + ); } } } From a885d7bab245bc078a0f1cea7d0d1d211dc31169 Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Wed, 14 Aug 2024 10:38:42 +0530 Subject: [PATCH 10/11] Apply suggestions from code review Co-authored-by: Weston Ruter --- plugins/webp-uploads/helper.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/webp-uploads/helper.php b/plugins/webp-uploads/helper.php index 58c15c7722..34aa37076d 100644 --- a/plugins/webp-uploads/helper.php +++ b/plugins/webp-uploads/helper.php @@ -418,9 +418,9 @@ function webp_uploads_is_jpeg_fallback_enabled(): bool { * @param int $attachment_id The ID of the attachment. * @param string $src The original image src url. * @param string $mime A mime type we are looking to get image url. - * @return string|false Returns mime type image if available, false otherwise. + * @return string|null Returns mime type image if available. */ -function webp_uploads_get_mime_type_image( int $attachment_id, string $src, string $mime ) { +function webp_uploads_get_mime_type_image( int $attachment_id, string $src, string $mime ): ?string { $metadata = wp_get_attachment_metadata( $attachment_id ); $src_basename = wp_basename( $src ); if ( isset( $metadata['sources'][ $mime ]['file'] ) ) { @@ -462,5 +462,5 @@ function webp_uploads_get_mime_type_image( int $attachment_id, string $src, stri } } - return false; + return null; } From 0f9fb41fcf42c00b199dedaf596c801e40664bae Mon Sep 17 00:00:00 2001 From: Mukesh Panchal Date: Wed, 14 Aug 2024 10:47:54 +0530 Subject: [PATCH 11/11] Remove use of empty --- plugins/webp-uploads/helper.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/webp-uploads/helper.php b/plugins/webp-uploads/helper.php index 34aa37076d..4628d69e21 100644 --- a/plugins/webp-uploads/helper.php +++ b/plugins/webp-uploads/helper.php @@ -438,7 +438,7 @@ function webp_uploads_get_mime_type_image( int $attachment_id, string $src, stri if ( isset( $metadata['sizes'] ) && is_array( $metadata['sizes'] ) ) { foreach ( $metadata['sizes'] as $size => $size_data ) { - if ( empty( $size_data['file'] ) ) { + if ( ! isset( $size_data['file'] ) ) { continue; }