Changeset 36152

Timestamp:

01/02/2016 03:55:47 AM (11 years ago)

Author:

dd32

Message:

Responsive images: fix the check whether the attachment meta matches the image src to work with http/https and CDNs.

Merges [36121] to the 4.4 branch.
Props webaware, joemcgill, azaozz.
Fixes #35045 and #35102.

Location:

branches/4.4

Files:

• . (modified) (1 prop)
• src/wp-includes/media.php (modified) (7 diffs)
• tests/phpunit/tests/media.php (modified) (1 diff)

branches/4.4/src/wp-includes/media.php

@@ -997 +997 @@
  */
 function wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attachment_id = 0 ) {
+        /**
+         * Let plugins pre-filter the image meta to be able to fix inconsistencies in the stored data.
+         *
+         * @param array  $image_meta    The image meta data as returned by 'wp_get_attachment_metadata()'.
+         * @param array  $size_array    Array of width and height values in pixels (in that order).
+         * @param string $image_src     The 'src' of the image.
+         * @param int    $attachment_id The image attachment ID or 0 if not supplied.
+         */
+        $image_meta = apply_filters( 'wp_calculate_image_srcset_meta', $image_meta, $size_array, $image_src, $attachment_id );
+
         if ( empty( $image_meta['sizes'] ) ) {
                 return false;
@@ -1013 +1023 @@
 
         $image_basename = wp_basename( $image_meta['file'] );
-        $image_baseurl = _wp_upload_dir_baseurl();
 
         /*
@@ -1030 +1039 @@
         }
 
-        // Uploads are (or have been) in year/month sub-directories.
-        if ( $image_basename !== $image_meta['file'] ) {
-                $dirname = _wp_get_attachment_relative_path( $image_meta['file'] );
-
-                if ( $dirname ) {
-                        $image_baseurl = trailingslashit( $image_baseurl ) . $dirname;
-                }
-        }
-
-        $image_baseurl = trailingslashit( $image_baseurl );
+        // Retrieve the uploads sub-directory from the full size image.
+        $dirname = _wp_get_attachment_relative_path( $image_meta['file'] );
+
+        if ( $dirname ) {
+                $dirname = trailingslashit( $dirname );
+        }
+
+        $image_baseurl = _wp_upload_dir_baseurl();
+        $image_baseurl = trailingslashit( $image_baseurl ) . $dirname;
 
         // Calculate the image aspect ratio.
@@ -1064 +1072 @@
         $sources = array();
 
+        /**
+         * To make sure the ID matches our image src, we will check to see if any sizes in our attachment
+         * meta match our $image_src. If no mathces are found we don't return a srcset to avoid serving
+         * an incorrect image. See #35045.
+         */
+        $src_matched = false;
+
         /*
          * Loop through available images. Only use images that are resized
@@ -1069 +1084 @@
          */
         foreach ( $image_sizes as $image ) {
+
+                // If the file name is part of the `src`, we've confirmed a match.
+                if ( ! $src_matched && false !== strpos( $image_src, $dirname . $image['file'] ) ) {
+                        $src_matched = true;
+                }
 
                 // Filter out images that are from previous edits.
@@ -1127 +1147 @@
 
         // Only return a 'srcset' value if there is more than one source.
-        if ( count( $sources ) < 2 ) {
+        if ( ! $src_matched || count( $sources ) < 2 ) {
                 return false;
         }
@@ -1306 +1326 @@
                 strpos( wp_basename( $image_src ), $img_edit_hash[0] ) === false ) {
 
-                return $image;
-        }
-
-        $base_url = trailingslashit( _wp_upload_dir_baseurl() );
-        $image_base_url = $base_url;
-
-        $dirname = _wp_get_attachment_relative_path( $image_meta['file'] );
-        if ( $dirname ) {
-                $image_base_url .= trailingslashit( $dirname );
-        }
-
-        $all_sizes = wp_list_pluck( $image_meta['sizes'], 'file' );
-
-        foreach ( $all_sizes as $key => $file ) {
-                $all_sizes[ $key ] = $image_base_url . $file;
-        }
-
-        // Add the original image.
-        $all_sizes[] = $image_base_url . basename( $image_meta['file'] );
-
-        // Bail early if the image src doesn't match any of the known image sizes.
-        if ( ! in_array( $image_src, $all_sizes ) ) {
                 return $image;
         }

branches/4.4/tests/phpunit/tests/media.php

@@ -1221 +1221 @@
                 $this->assertFalse( strpos( wp_calculate_image_srcset( $size_array, $large_src, $image_meta ), $full_src ) );
         }
+
+        /**
+         * @ticket 35045
+         * @ticket 33641
+         */
+        function test_wp_make_content_images_responsive_schemes() {
+                $image_meta = wp_get_attachment_metadata( self::$large_id );
+                $size_array = $this->_get_image_size_array_from_name( 'medium' );
+
+                $srcset = sprintf( 'srcset="%s"', wp_get_attachment_image_srcset( self::$large_id, $size_array, $image_meta ) );
+                $sizes  = sprintf( 'sizes="%s"', wp_get_attachment_image_sizes( self::$large_id, $size_array, $image_meta ) );
+
+                // Build HTML for the editor.
+                $img          = get_image_tag( self::$large_id, '', '', '', 'medium' );
+                $img_https    = str_replace( 'http://', 'https://', $img );
+                $img_relative = str_replace( 'http://', '//', $img );
+
+                // Manually add srcset and sizes to the markup from get_image_tag().
+                $respimg          = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img );
+                $respimg_https    = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_https );
+                $respimg_relative = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_relative );
+
+                $content = '
+                        <p>Image, http: protocol. Should have srcset and sizes.</p>
+                        %1$s
+
+                        <p>Image, https: protocol. Should have srcset and sizes.</p>
+                        %2$s
+
+                        <p>Image, protocol-relative. Should have srcset and sizes.</p>
+                        %3$s';
+
+                $unfiltered = sprintf( $content, $img, $img_https, $img_relative );
+                $expected   = sprintf( $content, $respimg, $respimg_https, $respimg_relative );
+                $actual     = wp_make_content_images_responsive( $unfiltered );
+
+                $this->assertSame( $expected, $actual );
+        }
 }