Twenty Seventeen: Ensure the use of proper image size for custom header image

The `sizes` attribute was calculated incorrectly, resulting in the browser downloading the wrong resource. This filters the attribute to correct that.

Before the filter, the `img` contained:
`sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px"`

And after:
`sizes="100vw"`

Props joemcgill, transl8or.

Fixes #38847.

Built from https://develop.svn.wordpress.org/trunk@39291


git-svn-id: http://core.svn.wordpress.org/trunk@39231 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
David A. Kennedy 2016-11-18 18:43:30 +00:00
parent 191e085fa3
commit 7d96057b8b
2 changed files with 16 additions and 1 deletions

View File

@ -424,6 +424,21 @@ function twentyseventeen_content_image_sizes_attr( $sizes, $size ) {
}
add_filter( 'wp_calculate_image_sizes', 'twentyseventeen_content_image_sizes_attr', 10, 2 );
/**
* Filter the `sizes` value in the header image markup.
*
* @since Twenty Seventeen 1.0
*
* @param string $html The HTML image tag markup being filtered.
* @param object $header The custom header object returned by 'get_custom_header()'.
* @param array $attr Array of the attributes for the image tag.
* @return string The filtered header image HTML.
*/
function twentyseventeen_header_image_tag( $html, $header, $attr ) {
return str_replace( $attr['sizes'], '100vw', $html );
}
add_filter ( 'get_header_image_tag', 'twentyseventeen_header_image_tag', 10, 3 );
/**
* Add custom image sizes attribute to enhance responsive image functionality
* for post thumbnails.

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.7-beta4-39290';
$wp_version = '4.7-beta4-39291';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.