Changeset 38052

Timestamp:

07/13/2016 03:23:27 PM (8 years ago)

Author:

joemcgill

Message:

Media: URL encode spaces in srcset attributes.

In some cases, images in the media library may contain spaces in
their filenames. This results in an invalid srcset attribute,
causing broken images on the front end. This change fixes the issue
by replacing spaces in URLs with URL encoded '%20' characters before
returning the srcset string.

Props underdude, joemcgill.
Fixes #36549.

Location:

trunk

Files:

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

trunk/src/wp-includes/media.php

@@ -1143 +1143 @@
      * @param string $image_src     The 'src' of the image.
      * @param array  $image_meta    The image meta data as returned by 'wp_get_attachment_metadata()'.
-     * @param int    $attachment_id Image attachment ID or 0.
+     * @param int    $attachment_id Image attachment ID or 0.
      */
     $sources = apply_filters( 'wp_calculate_image_srcset', $sources, $size_array, $image_src, $image_meta, $attachment_id );
@@ -1155 +1155 @@
 
     foreach ( $sources as $source ) {
-        $srcset .= $source['url'] . ' ' . $source['value'] . $source['descriptor'] . ', ';
+        $srcset .= str_replace( ' ', '%20', $source['url'] ) . ' ' . $source['value'] . $source['descriptor'] . ', ';
     }
 

trunk/tests/phpunit/tests/media.php

@@ -1323 +1323 @@
 
     /**
+     * @ticket 36549
+     * @ticket 33641
+     */
+    function test_wp_calculate_image_srcset_with_spaces_in_filenames() {
+        // Mock data for this test.
+        $image_src = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test image-300x150.png';
+        $image_meta = array(
+            'width' => 2000,
+            'height' => 1000,
+            'file' => '2015/12/test image.png',
+            'sizes' => array(
+                'thumbnail' => array(
+                    'file' => 'test image-150x150.png',
+                    'width' => 150,
+                    'height' => 150,
+                    'mime-type' => 'image/png',
+                ),
+                'medium' => array(
+                    'file' => 'test image-300x150.png',
+                    'width' => 300,
+                    'height' => 150,
+                    'mime-type' => 'image/png',
+                ),
+                'medium_large' => array(
+                    'file' => 'test image-768x384.png',
+                    'width' => 768,
+                    'height' => 384,
+                    'mime-type' => 'image/png',
+                ),
+                'large' => array(
+                    'file' => 'test image-1024x512.png',
+                    'width' => 1024,
+                    'height' => 512,
+                    'mime-type' => 'image/png',
+                ),
+            ),
+        );
+
+        $expected_srcset = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test%20image-300x150.png 300w, http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test%20image-768x384.png 768w, http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test%20image-1024x512.png 1024w';
+
+        $this->assertSame( $expected_srcset, wp_calculate_image_srcset( array( 300, 150 ), $image_src, $image_meta ) );
+    }
+
+    /**
      * @ticket 33641
      */