WordPress.org

Make WordPress Core

Changeset 39291


Ignore:
Timestamp:
11/18/16 18:42:16 (11 months ago)
Author:
davidakennedy
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/functions.php

    r39261 r39291  
    426426 
    427427/** 
     428 * Filter the `sizes` value in the header image markup. 
     429 * 
     430 * @since Twenty Seventeen 1.0 
     431 * 
     432 * @param string $html   The HTML image tag markup being filtered. 
     433 * @param object $header The custom header object returned by 'get_custom_header()'. 
     434 * @param array  $attr   Array of the attributes for the image tag. 
     435 * @return string The filtered header image HTML. 
     436 */ 
     437function twentyseventeen_header_image_tag( $html, $header, $attr ) { 
     438    return str_replace( $attr['sizes'], '100vw', $html ); 
     439} 
     440add_filter ( 'get_header_image_tag', 'twentyseventeen_header_image_tag', 10, 3 ); 
     441 
     442/** 
    428443 * Add custom image sizes attribute to enhance responsive image functionality 
    429444 * for post thumbnails. 
Note: See TracChangeset for help on using the changeset viewer.