How to add height and width attributes to bottom element header

Hi there,

Not sure if I fully understand.

Can you explain a bit more?

Thanks!

The image which is bottom header element needs to have height and width attributes for Core Vitals

Hi there,

I've checked your site's performance report and I think you're pertaining to the logo image you've placed as "header image".

You can use the code snippet here to address the flag for desktop:
https://docs.generatepress.com/article/generate_logo_output/#setting-a-width-and-height

Change width="999" height="999" value from 999 to your preference.

And you can use this one for mobile header:
https://docs.generatepress.com/article/generate_mobile_header_logo_output/#setting-a-width-and-height

Same idea for the mobile snippet. :)

Thank you. How do I determine the actual width and height of my logo https://www.tryhypnosisnow.com/wp-content/uploads/2020/04/cropped-hypnosis-NYC-Hypnotherapy-New-York-City-1.jpg?

The image attributes do not show for Core Vitals after adding this

add_filter( 'generate_logo_output','tu_logo_atts', 10, 2 ); 
function tu_logo_atts( $output, $logo ) {
	printf(
		'<div class="site-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img width="1024" height="174" class="header-image" src="%3$s" alt="%2$s" title="%2$s" />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		esc_url( apply_filters( 'generate_logo', $logo ) )
	);
}

I wasn't sure what size to make the image so I used the size listed in the media library. Is that right?

The image attributes do not show for Core Vitals after adding this

add_filter( 'generate_logo_output','tu_logo_atts', 10, 2 ); 
function tu_logo_atts( $output, $logo ) {
	printf(
		'<div class="site-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img width="1024" height="174" class="header-image" src="%3$s" alt="%2$s" title="%2$s" />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		esc_url( apply_filters( 'generate_logo', $logo ) )
	);
}

but I have been using this code snippet for a link on my desktop header

add_filter( 'generate_logo_output', 'tu_logo_target', 10, 3 );
function tu_logo_target( $output, $logo_url, $html_attr ) {
	printf(
		'<div class="site-logo">
			<a href="%1$s" title="hypnosis nyc hypnotherapy New York City" rel="home" rel="noopener" alt="Hypnotherapy NYC Hypnosis Center #1 Doctor Referred Hypnotist">
				<img %3$s />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , "tel:1-877-800-6443" ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
	);
}

Try this:

add_filter( 'generate_logo_output', 'tu_logo_target', 10, 3 );
function tu_logo_target( $output, $logo_url, $html_attr ) {
	printf(
		'<div class="site-logo">
			<a href="%1$s" title="hypnosis nyc hypnotherapy New York City" rel="home" rel="noopener" alt="Hypnotherapy NYC Hypnosis Center #1 Doctor Referred Hypnotist">
				<img width="1024" height="174" %3$s />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , "tel:1-877-800-6443" ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
	);
}

Thank you.

How do I determine and add height and width attributes to my mobile header:

This is a snippet I use

add_filter( 'generate_mobile_header_logo_output','tu_mobile_logo_atts' );
function tu_mobile_logo_atts( $output ) {
	printf( 
		'<div class="site-logo mobile-header-logo">
			<a href="%1$s" title="%2$s" rel="home" alt="Hypnotherapy NYC Hypnosis Center #1 Doctor Referred Hypnotist Click to Call">
				<img class="header-image" src="%3$s" alt="%2$s" title="hypnosis nyc hypnotherapy New York City" />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , "tel:1-877-800-6443" ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		esc_url( apply_filters( 'generate_mobile_header_logo', "https://www.tryhypnosisnow.com/wp-content/uploads/2020/04/hypnosis-nyc-hypnotherapy-New-York-City.jpg" ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);
}

This is added CSS

#mobile-header img { width: 100%; height: auto; }
h1.entry-title {
display: none;
}
@media (max-width: 768px) {
    .page-hero {
        background-image: url(https://www.tryhypnosisnow.com/wp-content/uploads/2020/04/Hypnosis-NYC-for-quit-smoking-weight-loss-anxiety-phobias-confidence.jpeg);
    }
}
@media (min-width: 769px) {
    .main-navigation li.search-item {
        display: none !important;
    }
}
#mobile-header .inside-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.main-navigation .mobile-bar-items {
    order: 4;
}
input.ticket-selector-submit-btn {
background-color: #001de0!important; color: #fffff;
}

The mobile header logo already has a width and height added:
https://www.screencast.com/t/s7arbc8Jj

Thank you for your help.

No problem :)