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.

git-svn-id: https://develop.svn.wordpress.org/trunk@38052 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe McGill 2016-07-13 15:23:27 +00:00
parent 55692a6e6b
commit 94da293e5f
2 changed files with 46 additions and 2 deletions

View File

@ -1142,7 +1142,7 @@ function wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attac
* @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 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 );
@ -1154,7 +1154,7 @@ function wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attac
$srcset = '';
foreach ( $sources as $source ) {
$srcset .= $source['url'] . ' ' . $source['value'] . $source['descriptor'] . ', ';
$srcset .= str_replace( ' ', '%20', $source['url'] ) . ' ' . $source['value'] . $source['descriptor'] . ', ';
}
return rtrim( $srcset, ', ' );

View File

@ -1321,6 +1321,50 @@ EOF;
$this->assertSame( $expected_srcset, wp_calculate_image_srcset( $size_array, $image_src, $image_meta5 ) );
}
/**
* @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
*/