• 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 calls header_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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter mikehues

    (@mikehues)

    I did a little more testing.

    I have another site that uses this plugin along with the underscores starter theme. I could have sworn that site was working fine in the past, but I’m now seeing the same behavior. That theme’s header.php uses the_custom_header_markup() to output the header image.

    I also spun up a completely fresh site – WP 5.0.3. I installed and activated unique_headers 1.7.12. I activated the Twenty Seventeen theme which implements custom headers. I see the same behavior there.

    Plugin Author Ryan Hellyer

    (@ryanhellyer)

    Thanks for spotting this!

    Would you be able to do me a favour and test out this release to see if it fixes this problem for you?
    https://github.com/ryanhellyer/unique-headers/releases/tag/1.7.2

    I’m unsure at this stage if I will break other sites by implementing this change, so I haven’t rolled it out onto the main repository yet.

    Thread Starter mikehues

    (@mikehues)

    Hi Ryan,

    I appreciate the quick response! This update fixed the issue in all 3 test cases. Please let me know if I can help with further testing.

    thanks!

    Mike

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem with srcset on individual page headers’ is closed to new replies.