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

[Remez Sasson]

When I check my website with lighthouse I get the following error:

“Image elements do not have explicit width and height”. This refers to the logo image, both on desktop and mobile.

I tried to fix this issue, but nothing seems to work. The customizer allows setting only width for desktop logo, but not for the mobile.

Is there a way to set fixed width and height for the logo image for desktop and for mobile?

[David]

Hi there,

if you set the Customizer > General –> Site Structure to flexbox, then this will automatically add the Height / Width attributes to your Site logo.

This doesn’t apply to the Mobile Header logo however, as its size is controlled by the Menu Item height, setting its attributes may cause layout shift.

If still an issue, link me to your site so i can take a look.

[Remez Sasson]

Hi David,

The website structure is already set to flexbox, so there is no problem with the desktop logo. The problem is with the mobile logo.

In Customizer > Layout –> Header, I have set it to show ‘mobile header’ – on.

Here is a link to my blog: https://www.successconsciousness.com/blog/

I just want to clarify that the website is on WordPress, except the home page (successconsciousness.com), which is a static html page, and therefore, this issue does not affect to it.

Thank you

[Leo]

The mobile header logo height automatically matches the menu item height and the width is leaves to auto so the logo is not distorted.

You can try setting the width this CSS:

@media (max-width: 768px) {
    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 40px;
        width: 196px;
    }
}

[Remez Sasson]

Hi,

This did not solve the problem.

I would like to try something else. Can you please give the css code for inserting the logo for the desktop and the logo for the mobile into the header widget? In this way it would be possible to insert both the width and height sizes.

I need the mobile logo to be in one line with the menu hamburger as it is currently on my website.

If I understand correctly, if I proceed as above, I will have to remove the logo from the customizer, otherwise, it will appear twice.

[David]

Add this PHP Snippet to your 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="590" height="60" 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' ) ) )
    );
} );

Edit this line to add your width and height attributes:

<img src="%3$s" width="590" width="60" alt="%4$s" />

https://docs.generatepress.com/article/adding-php/

[Remez Sasson]

I tried the above code but it did not solve the issue. Lighthouse still mentions the same error.

I tried to solve the issue by removing the logo from the customizer, and inserting a link to it through the header widget. However, the logo goes to the right side of the screen and I cannot move it to the left of the screen.

[David]

Can you re-add the i provided with the standard Mobile Header logo so i can see the issue?

As a note: the warning in Lighthouse report does not create any issue with the site, nor does it affect site performance. As said before the Mobile Headers logo is defined by the Menu Item height so the absence of its dimension attributes does not cause layout shift.

[Remez Sasson]

I know, the issue does not affect the website performance. Since the warning is mentioned by Lighthouse, I wanted to fix it.

As I said, the warning says:

“Image elements do not have explicit width and height”
“Set an explicit width and height on image elements to reduce layout shifts and improve CLS.”

It refers to the logo and mentions “img.is-logo-image”

I have now added again the code you have sent me, so you can check it. (Please check it on any of the blog’s pages, not the home page, since the home page is not on WordPress.)

Thank you

[David]

Where did you add the PHP snippet ?

[Remez Sasson]

I added it within the ‘code snippet’ plugin.

[Remez Sasson]

Sorry, I forgot to activate it, now it is activated.

[David]

Aah my bad i made a mistake in the code. I have updated the code here:

https://generatepress.com/forums/topic/how-to-set-height-and-width-for-the-logo-image/#post-1563234

Try that – it should now have the width and height attributes.

[Remez Sasson]

Great, the error has disappeared. Thank you David

[David]

Phew … glad to hear that!

[Author]

Posts