[Resolved] How to set height and width for the logo image

[Anna]

Hi David,

I used your snippet to try to add the missing width and height values to my logo. Here’s the snippet activated on my site:

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
    if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
        return $output;
    }

    $settings = wp_parse_args(
        get_option( 'generate_menu_plus_settings', array() ),
        generate_menu_plus_get_defaults()
    );

    return sprintf(
        '<div class="site-logo mobile-header-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" width="180" height="105" alt="%4$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_mobile_header_logo', $settings['mobile_header_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

Did I make a mistake? I’m still seeing that my logo image has no values between the quote marks in the width and height attributes. It looks like this:

<img class="header-image is-logo-image" alt="Garlic Delight" src="https://garlicdelight.com/wp-content/uploads/gd-logo.svg" title="Garlic Delight" srcset="https://garlicdelight.com/wp-content/uploads/gd-logo.svg 1x, https://garlicdelight.com/wp-content/uploads/gd-logo.svg 2x" width="" height="">

How can I fix the snippet to make it work?
Thanks for your help.
Anna

[Elvin]

Hi Anna,

David’s code was meant for site’s mobile header logo when mobile header is enabled.

That doesn’t seem to be the case with your site.

Try this PHP snippet instead.

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="180" height="105" 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 ) )
	);
}

[Anna]

Hi Elvin,
Your solution worked.
Thanks for the fix.

[Elvin]

No problem. 🙂

[Gustavo]

Hello,

I’m also having the same issue reported by PSI, it says that height and width are not set for the logo. This is happening both for mobile and desktop.

Will the code provided here earlier function for both mobile and desktop?

Could you also tell me which PHP file should I edit? I’d like to try and avoid adding another plugin to keep things as light as possible (if it’s not too complicated).

Thank you

[Ying]

Hi Gustavo,

For the mobile logo, try this PHP snippet:
https://generatepress.com/forums/topic/how-to-set-height-and-width-for-the-logo-image/#post-1563234

For the desktop logo, try this one:
https://generatepress.com/forums/topic/how-to-set-height-and-width-for-the-logo-image/page/2/#post-1686016

How to add PHP:
Adding PHP: https://docs.generatepress.com/article/adding-php/

[Gustavo]

Thank you very much, Ying.

Yesterday I followed your tips but for some reason, the report remained the same.

I kept the code in the functions.php and today not only it’s not showing up anymore but the CLS now has a green dot, which I think is a first (for mobile).

Again, thank you

[Ying]

You are welcome!

Glad to hear that 🙂

[Kumar]

Hi David,

I used the code above and the error (set an explicit width and height on image elements) disappears but makes my CLS metric red.

regards
Kumar

[David]

Hi Kumar,

if you can raise a new topic where you can share a link to your site i can take a look at the CLS issue.

[Francesco]

Hi, I have the same issue here: with logo image online I get the red flag
Site
https://test.giuseppe.rocks/zw/

google page speed insight
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ftest.giuseppe.rocks%2Fzw

I used Code Snippets with this code (with 200×33 size)

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
    if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
        return $output;
    }

    $settings = wp_parse_args(
        get_option( 'generate_menu_plus_settings', array() ),
        generate_menu_plus_get_defaults()
    );

    return sprintf(
        '<div class="site-logo mobile-header-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" width="200" height="33" alt="%4$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_mobile_header_logo', $settings['mobile_header_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

[Elvin]

Hi Francesco,

I’ve checked your site and the Google PSI results.

It’s not flagging the logo anymore.

It’s flagging the other images on your site. Mostly, the ones coming from Ultimate Post lists.

Ultimate posts is a third party plugin. I’m afraid that’s outside of our scope of support. I suggest contacting their support/developer on what’s the best practice to addressing this issue on their end.

[Dong]

Hi there, I have the same issue with my website.

https://dongknows.com

https://developers.google.com/speed/pagespeed/insights/?url=dongknows.com

Currently, I have the same issue with (just) the logo image. The code Elvin mentioned here for Anna fix the logo error but now caused the same error on ALL featured images of the Archive page. Here’s the code I used:

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="341" height="132" src="%3$s" alt="%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 ) )
	);
}

Please help!

Thanks,

-Dong.

[Leo]

Can you open a new topic for the question?

Thanks 🙂

[Dong]

Done:

https://generatepress.com/forums/topic/sset-height-and-width-for-the-logo-image/#new-post

Please help. Thanks.

[Author]

Posts