Changeset 39291 for trunk/src/wp-content/themes/twentyseventeen/functions.php

Timestamp:

11/18/2016 06:42:16 PM (8 years 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:

• trunk/src/wp-content/themes/twentyseventeen/functions.php (modified) (1 diff)

trunk/src/wp-content/themes/twentyseventeen/functions.php

@@ -426 +426 @@
 
 /**
+ * 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.