sergiotarxz/Wordpress
sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@39291 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
David A. Kennedy 2016-11-18 18:42:16 +00:00
parent f553ad6277
commit ebe736af3f
1 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/wp-content/themes/twentyseventeen/functions.php
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 ); 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 * Add custom image sizes attribute to enhance responsive image functionality
* for post thumbnails. * for post thumbnails.