From 4aa34cf09216192cda9075ab36167957c0faf6e6 Mon Sep 17 00:00:00 2001
From: Scott Taylor <wonderboymusic@git.wordpress.org>
Date: Wed, 18 Nov 2015 19:47:11 +0000
Subject: [PATCH] Media: when making images responsive, check if they already
 have a `sizes` attribute.

Adds unit test.

Props jaspermdegroot.
Fixes #34678.


git-svn-id: https://develop.svn.wordpress.org/trunk@35678 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/media.php     | 17 +++++++++++++----
 tests/phpunit/tests/media.php | 11 ++++++++---
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
index d5114d4ab0..ae108e53cc 100644
--- a/src/wp-includes/media.php
+++ b/src/wp-includes/media.php
@@ -1205,7 +1205,7 @@ function wp_make_content_images_responsive( $content ) {
 	$selected_images = $attachment_ids = array();
 
 	foreach( $images as $image ) {
-		if ( false === strpos( $image, ' srcset="' ) && preg_match( '/wp-image-([0-9]+)/i', $image, $class_id ) &&
+		if ( false === strpos( $image, ' srcset=' ) && preg_match( '/wp-image-([0-9]+)/i', $image, $class_id ) &&
 			( $attachment_id = absint( $class_id[1] ) ) ) {
 
 			/*
@@ -1302,15 +1302,24 @@ function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) {
 	$srcset = wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attachment_id );
 
 	if ( $srcset ) {
-		$sizes = wp_calculate_image_sizes( $size_array, $image_src, $image_meta, $attachment_id );
+		// Check if there is already a 'sizes' attribute.
+		$sizes = strpos( $image, ' sizes=' );
+
+		if ( ! $sizes ) {
+			$sizes = wp_calculate_image_sizes( $size_array, $image_src, $image_meta, $attachment_id );
+		}
 	}
 
 	if ( $srcset && $sizes ) {
 		// Format the 'srcset' and 'sizes' string and escape attributes.
-		$srcset_and_sizes = sprintf( ' srcset="%s" sizes="%s"', esc_attr( $srcset ), esc_attr( $sizes ) );
+		$attr = sprintf( ' srcset="%s"', esc_attr( $srcset ) );
+
+		if ( is_string( $sizes ) ) {
+			$attr .= sprintf( ' sizes="%s"', esc_attr( $sizes ) );
+		}
 
 		// Add 'srcset' and 'sizes' attributes to the image markup.
-		$image = preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $srcset_and_sizes . ' />', $image );
+		$image = preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image );
 	}
 
 	return $image;
diff --git a/tests/phpunit/tests/media.php b/tests/phpunit/tests/media.php
index 67158d7c4d..bab45cf4f2 100644
--- a/tests/phpunit/tests/media.php
+++ b/tests/phpunit/tests/media.php
@@ -961,11 +961,13 @@ EOF;
 		$img_no_width_height = str_replace( ' width="' . $size_array[0] . '"', '', $img );
 		$img_no_width_height = str_replace( ' height="' . $size_array[1] . '"', '', $img_no_width_height );
 		$img_no_size_id = str_replace( 'wp-image-', 'id-', $img );
+		$img_with_sizes_attr = str_replace( '<img ', '<img sizes="99vw" ', $img );
 
 		// Manually add srcset and sizes to the markup from get_image_tag();
 		$respimg = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img );
 		$respimg_no_size_in_class = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_no_size_in_class );
 		$respimg_no_width_height = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_no_width_height );
+		$respimg_with_sizes_attr = preg_replace('|<img ([^>]+) />|', '<img $1 ' . $srcset . ' />', $img_with_sizes_attr );
 
 		$content = '
 			<p>Image, standard. Should have srcset and sizes.</p>
@@ -978,10 +980,13 @@ EOF;
 			%3$s
 
 			<p>Image, no attachment ID class. Should NOT have srcset and sizes.</p>
-			%4$s';
+			%4$s
 
-		$content_unfiltered = sprintf( $content, $img, $img_no_size_in_class, $img_no_width_height, $img_no_size_id );
-		$content_filtered = sprintf( $content, $respimg, $respimg_no_size_in_class, $respimg_no_width_height, $img_no_size_id );
+			<p>Image, with sizes attribute. Should NOT have two sizes attributes.</p>
+			%5$s';
+
+		$content_unfiltered = sprintf( $content, $img, $img_no_size_in_class, $img_no_width_height, $img_no_size_id, $img_with_sizes_attr );
+		$content_filtered = sprintf( $content, $respimg, $respimg_no_size_in_class, $respimg_no_width_height, $img_no_size_id, $respimg_with_sizes_attr );
 
 		$this->assertSame( $content_filtered, wp_make_content_images_responsive( $content_unfiltered ) );
 	}