Changing the Header Image tag (adding attribute)

  • Hi,

    I would like to add an attribute to the image tag for the header image that loads up on the splash page in my 2017 themed sites.

    <div id="wp-custom-header" class="wp-custom-header">
   <img src="_the-image-url_" width="2000" height="1200" alt="_the-image-alt_"/>
 </div>

    I’m trying to diagnose an issue where on iPad header images just give up rendering / downloading about 2/3 of the way through, and won’t show up correctly unless ypu manually open the image directly in a different tab, then reload the page and it’ll work.

    I found a suggestion to try:

    <img decoding="sync" src="@Url" />

    So, given I’m working on a child theme, I’m assuming I have to do something in my functions.php to override the default function that generates that image tag, so as to add the decoding=”sync” attribute into it. I just can’t find the appropriate bit in the 2017 theme files.

    Anyhelp would be appreciated, thanks.

    BTW: while I might be able to solve this with a CSS media query, and creating a new stylesheet for iPad, I really want to try fixing it this way, just to see if it works. Thanks.

    • This topic was modified 3 years, 10 months ago by mattspace.
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi, mattspace, the following code template may help you in adding additional image attributes to your header image: 

    add_filter("get_header_image_tag", "change_header_image_tag", 10, 3);

function change_header_image_tag( $html, $header, $attr )
{
	// TODO
	return $html;
}

    Here is a link to a developer page that describes the filter that’s being used: https://developer.www.ads-software.com/reference/hooks/get_header_image_tag/

    Thread Starter mattspace

    (@mattspace)

    Hi Ian,

    Would you mind explaining a bit more – I’ve found myself unable to make much head or tail of wordpress since ~2012 when the PHP was in the HTML structure, so you could easily understand the black box from looking at inputs and outputs, without any real JS/PHP knowledge.

    Do I add that code into my functions.php file? What part adds the decoding=”sync” attribute / value to the Image tag?

    thanks,

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing the Header Image tag (adding attribute)’ is closed to new replies.

Tags