How to add extra attributes to logo img tag

[Azman]

I am using a CDN to optimize and serve my images. And it compresses all the images on my website. It even compresses the logo, which I don’t want to compress.

So, to avoid this they asked me to add this attribute to the logo image tag: data-gumlet=”false”

And I have no clue on how to do it. Please help.

[David]

Hi there,

try adding this PHP Snippet:

add_filter( 'generate_navigation_logo_output', function() {
    return sprintf(
        '<div class="site-logo sticky-logo navigation-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img data-gumlet="false" src="%3$s" 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_navigation_logo', $settings['sticky_menu_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azman]

Thanks David, but how and where to add this PHP script?

[David]

This article explains:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azman]

I added the script using the Code Snippet plugin, but the logo is still getting compressed.

[David]

How did you add the code ?
If you have removed it can you re-add it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azman]

I have added it using Code Snippet plugin, and it is still live with “Run Snippet Everywhere” enabled.

[David]

Try this snippet instead:

add_filter( 'generate_logo_output', 'tu_logo_class', 10, 3 );
function tu_logo_class( $output, $logo_url, $html_attr ) {
	printf(
		'<div class="navigation-branding">
			<div class="site-logo">
				<a href="%1$s" title="%2$s" rel="home">
					<img data-gumlet="false" data-gmlazy="false" %3$s />
				</a>
			</div>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
	);
}

It may require some CSS for sizing – so add the code and let know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azman]

Done that! Yes, now it needs CSS. Please look into it.

[David]

Add this CSS:

.site-logo img {
    max-width: 200px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azman]

David, it’s good now, but it break the order of navigation menu, I guess.
Checkout by clicking on one of the blog post and scroll.

By the way, you helped me achieve that navigation – https://generatepress.com/forums/topic/redesigned-header-navigation-like-verywellfit/

[David]

I made an edit to this code

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azman]

Now again it is getting served by the CDN.

[David]

Oops – made another change.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Azman]

Now the logo goes completely missing…

[Author]

Posts