Support » Theme: GeneratePress » adding width and height attributes to logo

  • Resolved tinodesigns

    (@tinodesigns)


    Hi,

    we are optimizing our site and I’m trying to add the missing width=”” and height=”” attributes to the logo image tag. However I’m failing to do so.

    Where can I add those attributes so that they actually show on the site? I added it to the template-tags.php file (line 557) but that didn’t seem to do it.

    Any other place I’m missing where that code is actually being generated?

    Thanks,
    Tino

Viewing 15 replies - 1 through 15 (of 18 total)
  • If you download the plugin “Simple CSS” from Tom himself you can add CSS just to the page where you want it. I gues you could try to do that 🙂

    Hi there,

    This should help: https://docs.generatepress.com/article/adding-svg-logo/#setting-the-size

    Shouldn’t need it unless you are using SVG logo though.

    For adding CSS, check this page: https://docs.generatepress.com/article/adding-css/

    Thread Starter tinodesigns

    (@tinodesigns)

    Hi,

    thanks for your answers.

    Well we are specifically trying to set the width and height not just with CSS but with the classical HTML width=”” and height=”” attributes of the <img src…
    tag.

    Even if we had to hard code it we would do it. We are trying to optimize our page to get good scroes on gtmetrix and other pagespeed testing tools. They suggest to add those attributes.

    Any further ideas on how to achieve it?

    Thanks

    Leo

    (@leohsiang)

    Thread Starter tinodesigns

    (@tinodesigns)

    @leo thanks, that looked promising but when applied the filter nothing happened.

    I added it to the functions.php. That is where this need to go right?

    Thanks,
    Tino

    Theme Author Tom

    (@edge22)

    Did you add your attributes to the HTML?:

    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="200" height="200" 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 ) )
    	);
    }
    Thread Starter tinodesigns

    (@tinodesigns)

    Hi Tom,

    yes I did. Only difference is I added them at the end of the <img src.. tag like this:

    <img class="header-image" src="%3$s" alt="%2$s" title="%2$s" width="200" height="200" />

    but that should’t make a difference right?

    Thanks,
    Tino

    Theme Author Tom

    (@edge22)

    Hmm, nope – it shouldn’t. Can you link me to the page?

    Thread Starter tinodesigns

    (@tinodesigns)

    Thanks Tom, for loking into this.

    Page is https://www.ncsvehicledonations.com/

    I tried the code in the main theme as well as child theme functions.php neither worked. It currently is in both functions.php files.

    Thanks,
    Tino

    Theme Author Tom

    (@edge22)

    Ah, that’s the navigation logo.

    Same sort of thing:

    add_filter( 'generate_navigation_logo_output','tu_nav_logo_atts' );
    function tu_nav_logo_atts( $output ) {
    	printf( 
    		'<div class="site-logo navigation-logo">
    			<a href="%1$s" title="%2$s" rel="home">
    				<img width="200" height="200" 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_navigation_logo', 'URL TO YOUR LOGO' ) )
    	);
    }

    If you have GP Premium, you should be using our premium forums: https://generatepress.com/support

    Thread Starter tinodesigns

    (@tinodesigns)

    Hi Tom,

    I just added this code but no luck either:

    add_filter( 'generate_navigation_logo_output','tu_nav_logo_atts' );
    function tu_nav_logo_atts( $output ) {
    	printf( 
    		'<div class="site-logo navigation-logo">
    			<a href="%1$s" title="%2$s" rel="home">
    				<img width="234" height="80" 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_navigation_logo', 'https://www.ncsvehicledonations.com/wp-content/uploads/2016/04/NCS_logo2016_with_name_Horiz@1x.png' ) )
    	);
    }

    We most likely to have GP Premium but I’m doing this for the client I would have to ask for their login. This just seems simpler for now.

    Thanks a lot for your help.

    Best,
    Tino

    Theme Author Tom

    (@edge22)

    I’m actually not allowed to provide support for premium features in this forum – WordPress requires support in here to be for the free theme only.

    If the above PHP didn’t work, it’s likely you’re using an old version of GP Premium.

    Thread Starter tinodesigns

    (@tinodesigns)

    Hi,

    GPremium is 1.2.83 and GeneratePress 1.4

    I’ll see if I can get any login to the GP support forums. Or is there a way to create a new login?

    I seem to have a serial number or API key in the theme’s GP area.

    Thanks,
    Tino

    Thread Starter tinodesigns

    (@tinodesigns)

    Hi Tom,

    after updating gp-premium to the latest version I was able to get it to work.

    Thanks a lot for the help.

    Best,
    Tino

    Thread Starter tinodesigns

    (@tinodesigns)

    Ok now I need the code for ading this to the mobile header logo as well.
    How can I do that?

    Thanks,
    Tino

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘adding width and height attributes to logo’ is closed to new replies.