Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

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

Home Forums Support [Support request] How to set height and width for the logo image

Home Forums Support How to set height and width for the logo image

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #1559924
    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?

    #1560345
    David
    Staff
    Customer Support

    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.

    #1560701
    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

    #1561629
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #1562794
    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.

    #1563234
    David
    Staff
    Customer Support

    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/

    #1565494
    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.

    #1565641
    David
    Staff
    Customer Support

    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.

    #1565977
    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

    #1566027
    David
    Staff
    Customer Support

    Where did you add the PHP snippet ?

    #1566039
    Remez Sasson

    I added it within the ‘code snippet’ plugin.

    #1566047
    Remez Sasson

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

    #1566068
    David
    Staff
    Customer Support

    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.

    #1566101
    Remez Sasson

    Great, the error has disappeared. Thank you David

    #1566108
    David
    Staff
    Customer Support

    Phew … glad to hear that!

Viewing 15 posts - 1 through 15 (of 27 total)
  • You must be logged in to reply to this topic.