get_header_image_tag() │ WP 4.4.0
Create image tag markup for a custom header image.
Return
String
. HTML image element markup or empty string on failure.
Usage
get_header_image_tag( $attr );
- $attr(array)
- Additional attributes for the image tag. Can be used to override the default attributes.
Default: ''
Examples
#1 An example of the header image tag output
$img = get_header_image_tag();
echo $img;
It will:
<img src="http://example.com/wp-content/uploads/2016/05/cropped.jpg"
width="954" height="1300" alt="Test Site"
srcset="http://example.com/wp-content/uploads/2016/05/cropped.jpg 954w,
http://example.com/wp-content/uploads/2016/05/cropped-220x300.jpg 220w,
http://example.com/wp-content/uploads/2016/05/cropped-768x1047.jpg 768w,
http://example.com/wp-content/uploads/2016/05/cropped-751x1024.jpg 751w"
sizes="(max-width: 954px) 100vw, 954px"
/>
#2 Let's specify the attributes
For example, let's specify alt and forbid the creation of the attribute srcset and in place of it sizes:
$img = get_header_image_tag( array(
'srcset' => 'none',
'alt' => 'header picture',
) );
echo $img;
We get it:
<img src="http://example.com/wp-content/uploads/2016/05/cropped.jpg"
width="954" height="1300" alt="header picture" srcset="none"
/>
Changelog
get_header_image_tag() get header image tag code
WP 6.1.1
function get_header_image_tag( $attr = array() ) {
$header = get_custom_header();
$header->url = get_header_image();
if ( ! $header->url ) {
return '';
}
$width = absint( $header->width );
$height = absint( $header->height );
$alt = '';
// Use alternative text assigned to the image, if available. Otherwise, leave it empty.
if ( ! empty( $header->attachment_id ) ) {
$image_alt = get_post_meta( $header->attachment_id, '_wp_attachment_image_alt', true );
if ( is_string( $image_alt ) ) {
$alt = $image_alt;
}
}
$attr = wp_parse_args(
$attr,
array(
'src' => $header->url,
'width' => $width,
'height' => $height,
'alt' => $alt,
)
);
// 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( $size_array, $header->url, $image_meta, $header->attachment_id );
if ( ! empty( $attr['sizes'] ) ) {
$sizes = $attr['sizes'];
} else {
$sizes = wp_calculate_image_sizes( $size_array, $header->url, $image_meta, $header->attachment_id );
}
if ( $srcset && $sizes ) {
$attr['srcset'] = $srcset;
$attr['sizes'] = $sizes;
}
}
}
/**
* Filters the list of header image attributes.
*
* @since 5.9.0
*
* @param array $attr Array of the attributes for the image tag.
* @param object $header The custom header object returned by 'get_custom_header()'.
*/
$attr = apply_filters( 'get_header_image_tag_attributes', $attr, $header );
$attr = array_map( 'esc_attr', $attr );
$html = '<img';
foreach ( $attr as $name => $value ) {
$html .= ' ' . $name . '="' . $value . '"';
}
$html .= ' />';
/**
* Filters the markup of header images.
*
* @since 4.4.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 apply_filters( 'get_header_image_tag', $html, $header, $attr );
}
Related Functions