• Resolved Gal Baras

    (@galbaras)


    The current code for displaying a custom header image on the page is very literal:

    
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" <?php responsive_schema_markup( 'url' ); ?>><img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php esc_attr( bloginfo( 'name' ) ); ?>" <?php responsive_schema_markup( 'image' ); ?> /></a>
    

    I wanted to add a class to this code, and I couldn’t, because the output is not filtered. So first, I changed the code to this:

    
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" <?php responsive_schema_markup( 'url' ); ?>><?php echo get_header_image_tag( array() ); ?></a>
    

    I then added this filter:

    
    add_filter( 'get_header_image_tag', 'responsive_header_image_tag', 10, 3 );
    function responsive_header_image_tag( $html, $header, $attr ) {
    	return str_replace( ' />', responsive_get_schema_markup( 'image' ) . ' />', $html );
    }
    

    The new code adds the srcset attribute, which makes the image responsive (how punny), so it’s actually better.

    It also allows me to use my own get_header_image_tag filter to add the class to the markup, which is what I wanted to do in the first place.

    IMPORTANT: Please update the theme to support something similar. While you’re at it, please consider enabling custom CSS classes on customizer elements, such as the custom header image. That would have made my life SO much easier.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author CyberChimps

    (@cyberchimps)

    Thanks for your suggestion @galbaras

    This has been forwarded to our dev team. We will keep you posted.

    Regards,
    Team CyberChimps

    Theme Author CyberChimps

    (@cyberchimps)

    Thank you for the suggestions. We will add the filter in the upcoming release.

    Thread Starter Gal Baras

    (@galbaras)

    Looks like this was not changed in 4.0.4 or 4.0.5. What’s the holdup? I’ve given you the code.

    Theme Author CyberChimps

    (@cyberchimps)

    @galbaras

    As you know, the “Header Image” was already deprecated, so we have planning to remove it in the upcoming major release.

    Thread Starter Gal Baras

    (@galbaras)

    I’m not seeing any changed to header.php.

    What’s an alternative way to having a header image, the way it’s currently displayed on my site?

    Hi @galbaras

    Please follow the steps.

    • Add the image at Appearance > Customize > Site Identity > Logo.
    • go to Appearance > Customize > Header > Layout.
    • Set Header Layout as “Vertical”
    • Set Header Alignment as “Center”

    Thank you

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Add filter on custom header image’ is closed to new replies.