WordPress.org

Make WordPress Core

Changeset 38052


Ignore:
Timestamp:
07/13/2016 03:23:27 PM (4 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/media.php

    r38012 r38052  
    11431143     * @param string $image_src     The 'src' of the image.
    11441144     * @param array  $image_meta    The image meta data as returned by 'wp_get_attachment_metadata()'.
    1145      * @param int    $attachment_id Image attachment ID or 0.
     1145     * @param int    $attachment_id Image attachment ID or 0.
    11461146     */
    11471147    $sources = apply_filters( 'wp_calculate_image_srcset', $sources, $size_array, $image_src, $image_meta, $attachment_id );
     
    11551155
    11561156    foreach ( $sources as $source ) {
    1157         $srcset .= $source['url'] . ' ' . $source['value'] . $source['descriptor'] . ', ';
     1157        $srcset .= str_replace( ' ', '%20', $source['url'] ) . ' ' . $source['value'] . $source['descriptor'] . ', ';
    11581158    }
    11591159
  • trunk/tests/phpunit/tests/media.php

    r37915 r38052  
    13231323
    13241324    /**
     1325     * @ticket 36549
     1326     * @ticket 33641
     1327     */
     1328    function test_wp_calculate_image_srcset_with_spaces_in_filenames() {
     1329        // Mock data for this test.
     1330        $image_src = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test image-300x150.png';
     1331        $image_meta = array(
     1332            'width' => 2000,
     1333            'height' => 1000,
     1334            'file' => '2015/12/test image.png',
     1335            'sizes' => array(
     1336                'thumbnail' => array(
     1337                    'file' => 'test image-150x150.png',
     1338                    'width' => 150,
     1339                    'height' => 150,
     1340                    'mime-type' => 'image/png',
     1341                ),
     1342                'medium' => array(
     1343                    'file' => 'test image-300x150.png',
     1344                    'width' => 300,
     1345                    'height' => 150,
     1346                    'mime-type' => 'image/png',
     1347                ),
     1348                'medium_large' => array(
     1349                    'file' => 'test image-768x384.png',
     1350                    'width' => 768,
     1351                    'height' => 384,
     1352                    'mime-type' => 'image/png',
     1353                ),
     1354                'large' => array(
     1355                    'file' => 'test image-1024x512.png',
     1356                    'width' => 1024,
     1357                    'height' => 512,
     1358                    'mime-type' => 'image/png',
     1359                ),
     1360            ),
     1361        );
     1362
     1363        $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';
     1364
     1365        $this->assertSame( $expected_srcset, wp_calculate_image_srcset( array( 300, 150 ), $image_src, $image_meta ) );
     1366    }
     1367
     1368    /**
    13251369     * @ticket 33641
    13261370     */
Note: See TracChangeset for help on using the changeset viewer.