Responsive images: add template helper functions to generate the tag for a (responsive) header image that includes srcset and sizes attributes.

Props Otto42, joemcgill, DH-Shredder, azaozz.
Fixes #21389.
Built from https://develop.svn.wordpress.org/trunk@35594


git-svn-id: http://core.svn.wordpress.org/trunk@35558 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/theme.php

@@ -993,6 +993,85 @@ function get_header_image() {
 	return esc_url_raw( set_url_scheme( $url ) );
 }
 
+/**
+ * Create image markup for a custom header image.
+ *
+ * @since 4.4.0
+ *
+ * @param array $attr Optional. Attributes for the image markup. Default empty.
+ * @return string HTML element or empty string on failure.
+ */
+function get_header_image_tag( $attr = array() ) {
+	$header = get_custom_header();
+
+	if ( empty( $header->url ) ) {
+		return '';
+	}
+
+	$width = absint( $header->width );
+	$height = absint( $header->height );
+
+	$attr = wp_parse_args(
+		$attr,
+		array(
+			'src' => $header->url,
+			'width' => $width,
+			'height' => $height,
+			'alt' => get_bloginfo( 'name' ),
+		)
+	);
+
+	// Generate 'srcset' and 'sizes' if not already present.
+	if ( empty( $attr['srcset'] ) && ! empty( $header->attachment_id ) ) {
+		$image_meta = get_post_meta( $header->attachment_id, '_wp_attachment_metadata', true );
+		$size_array = array( $width, $height );
+
+		if ( is_array( $image_meta ) ) {
+			$srcset = wp_calculate_image_srcset( $header->url, $size_array, $image_meta, $header->attachment_id );
+			$sizes = wp_get_attachment_image_sizes( $size_array, $image_meta, $header->attachment_id, $header->url );
+
+			if ( $srcset && ( $sizes || ! empty( $attr['sizes'] ) ) ) {
+				$attr['srcset'] = $srcset;
+
+				if ( empty( $attr['sizes'] ) ) {
+					$attr['sizes'] = $sizes;
+				}
+			}
+		}
+	}
+
+	$attr = array_map( 'esc_attr', $attr );
+	$html = '<img';
+
+	foreach ( $attr as $name => $value ) {
+		$html .= ' ' . $name . '="' . $value . '"';
+	}
+
+	$html .= ' />';
+
+	/**
+	 * Filter the markup of header images.
+	 *
+	 * @since 4.4.0
+	 *
+	 * @param string $html   The HTML markup being filtered.
+	 * @param object $header The custom header object returned by 'get_custom_header()'
+	 * @param array  $attr   An array of attributes for the image markup.
+	 */
+	return apply_filters( 'get_header_image_tag', $html, $header, $attr );
+}
+
+/**
+ * Display the image markup for a custom header image.
+ *
+ * @since 4.4.0
+ *
+ * @param array $attr Optional. Attributes for the image markup. Default empty.
+ */
+function the_header_image_tag( $attr = array() ) {
+	echo get_header_image_tag( $attr );
+}
+
 /**
  * Get random header image data from registered images in theme.
  *

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.4-beta3-35593';
+$wp_version = '4.4-beta3-35594';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.