Problem with srcset on individual page headers
-
I’m building a new site with the Neve theme. I created a child theme and manually added custom header support to functions.php like so:
function neve_custom_custom_header_setup() { $args = array( 'default-image' => '', 'header-text' => false, 'width' => 1600, 'height' => 444, 'flex-width' => true, 'flex-height' => true, ); add_theme_support( 'custom-header', $args ); } add_action( 'after_setup_theme', 'neve_custom_custom_header_setup' );
I output the header image in header.php using
the_header_image_tag()
.This works great when displaying the default header image (added in the Appearance section of the admin menu). The following image tag is generated:
<img src="https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600.jpg" width="1600" height="444" alt="Encore Recovery Solutions" srcset="https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600.jpg 1600w, https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600-300x83.jpg 300w, https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600-768x213.jpg 768w, https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600-1024x284.jpg 1024w" sizes="(max-width: 1600px) 100vw, 1600px">
The trouble starts when I set a custom header on an individual page. By overriding the default header, I end up with this image tag:
<img src="https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600-1.jpg" width="1600" height="444" alt="Encore Recovery Solutions" srcset="https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600-1.jpg 1600w, https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600-1.jpg 300w, https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600-1.jpg 768w, https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600-1.jpg 1024w, https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600-1.jpg 600w, https://encorerecovery.local/wp-content/uploads/2019/01/Encore-Family1600-1.jpg 1440w" sizes="(max-width: 1600px) 100vw, 1600px">
As you can see, the srcset attribute is similar to the default header. But, instead of using different urls for each source in the set, it uses the url for the image selected in the Attachment Display Settings.
I have limited php experience, but I was able to track the cause of this behavior to the
wp_calculate_image_srcset
filter. When this filter is applied, it callsheader_srcset_filter
which loops through the srcset array and replaces all the smaller image urls with the attachment display url.Did I miss something in the setup? Is there a way to avoid this behavior? Please let me know if I can provide any more information. Any help would be greatly appreciated.
thanks,
Mike
- The topic ‘Problem with srcset on individual page headers’ is closed to new replies.