`get_header_image_tag` doesn't add `srcset`/`sizes`

[strarsis]

Currently the get_header_image_tag method (and all other methods calling it like the_custom_header_markup and get_custom_header_markup) outputs an <img> without srcset and sizes attributes.

This is important for header images that are normally quite large.

The custom header image method doesn't use the normal WordPress wp_get_attachment_image method for outputting the actual <img>, instead it constructs the <img> markup with its own code.

Related issue: https://core.trac.wordpress.org/ticket/46134#comment:6

[joyously]

The srcset and sizes are added later, for all the images that have a wp-image-* class. The image id is needed to do the lookup for the data to use.

[strarsis]

Replying to joyously:

The srcset and sizes are added later, for all the images that have a wp-image-* class. The image id is needed to do the lookup for the data to use.

How are these attributes added later? Does WordPress parse the HTML and add them directly?
The function uses a filter, but it doesn't seem to be used elsewhere as the srcset and sizes attributes are missing.
​https://github.com/WordPress/WordPress/blob/07139653b9f1b8b1cc88195b971e96597fbc8b10/wp-includes/theme.php#L1200

[joyously]

Let me amend my statement. For post content, the srcset and sizes are added later, by wp_filter_content_tags().
The get_header_image_tag() function adds the attributes itself, just below where you referenced. Does your test case meet the condition?
if ( empty( $attr['srcset'] ) && ! empty( $header->attachment_id ) )

[strarsis]

Replying to joyously:

Let me amend my statement. For post content, the srcset and sizes are added later, by wp_filter_content_tags().
The get_header_image_tag() function adds the attributes itself, just below where you referenced. Does your test case meet the condition?
if ( empty( $attr['srcset'] ) && ! empty( $header->attachment_id ) )

Good point. The test case would meet the condition, as $attr doesn't contain srcset and by default srcset is not added to $attr.

[hellofromTonya]

Hello @strarsis,

Welcome back to Core's Trac! Thank you for the ticket.

Replying to strarsis:

Good point. The test case would meet the condition, as $attr doesn't contain srcset and by default srcset is not added to $attr.

Does this resolve the ticket and your test case? Or is it still not generating the srcset and size?

If the problem remains, check the _wp_attachment_metadata for the attachment (see the ​code on about L1226). Is it an array? If no, then the generation is skipped.

If it is an array and the generation is not happening, please share step-by-step instructions including any code or attachments for contributors to reproduce the problem. This type of information helps contributors to investigate.

[strarsis]

Replying to hellofromTonya:

Hello @strarsis,

Welcome back to Core's Trac! Thank you for the ticket.

Replying to strarsis:

Good point. The test case would meet the condition, as $attr doesn't contain srcset and by default srcset is not added to $attr.

Does this resolve the ticket and your test case? Or is it still not generating the srcset and size?

If the problem remains, check the _wp_attachment_metadata for the attachment (see the ​code on about L1226). Is it an array? If no, then the generation is skipped.

If it is an array and the generation is not happening, please share step-by-step instructions including any code or attachments for contributors to reproduce the problem. This type of information helps contributors to investigate.

I prepared a minimal sample theme that demonstrates the issue:
​https://github.com/strarsis/wp-test-theme-customheader-srcsetsizes

When a custom header image is specified, the default WordPress functions output an <img element without the srcset and sizes attributes.

[strarsis]

Currently I have to use the following code to add srcset/sizes to the generated custom header image:

<?php
function get_attachment_id_by_rel_url($url) {
    $url_rel    = wp_make_link_relative($url);
    $url_abs    = home_url($url_rel);
    $attachment = attachment_url_to_postid($url_abs);
    return $attachment;
}

add_filter('get_header_image_tag', function ($default_html, $header_obj, $attr) {
    $header_image_src = $attr['src'];
    $header_image_attachment_id = get_attachment_id_by_rel_url($header_image_src);

    $header_image_html = wp_get_attachment_image(
        $header_image_attachment_id,
        'header-image',
        false,
        $attr,
    );

    return $header_image_html;
}, 5, 3);

Edit (2024): Made the get_attachment_id_by_rel_url helper function more robust as URLs in src of passed header image attributes can already be full+absolute.

Note that as the passed header object doesn't contain the actual custom image src (this may be a plugin issue and unrelated to this issue), I have to determine the attachment ID by using its URL.

[strarsis]

@hellofromTonya: I am very interested in this being fixed! Thanks.