From ebe736af3f88cdfca7a2af0cada9832485457414 Mon Sep 17 00:00:00 2001 From: "David A. Kennedy" Date: Fri, 18 Nov 2016 18:42:16 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@39291 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentyseventeen/functions.php | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/wp-content/themes/twentyseventeen/functions.php b/src/wp-content/themes/twentyseventeen/functions.php index b06649443e..6746165823 100644 --- a/src/wp-content/themes/twentyseventeen/functions.php +++ b/src/wp-content/themes/twentyseventeen/functions.php @@ -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.