[Support request] Image dimensions added to generate_logo_output filter not appearing in HTML

[Brendan]

I added the filter with the specified logo dimensions to my child theme functions file.

The rendered HTML didn’t change. My image dimensions don’t appear.

I tried adjusting the filter execution priority and still no luck. The following is my exact code, with logo dimensions 85w x 35h.

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="85" height="35" 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 ) )
	);
}

Notes:

1. Image dimensions appear on mobile. This is only happens on desktop.
2. Customizer width set to 85px wide.
3. I use Autoptimize CDN service, shortpixel (shouldn’t affect HTML).
4. Cleared Autoptimize cache (shouldn’t affect my HTML)
5. Use Cloudflare (also shouldn’t affect HTML)

[David]

Hi there,

try the snippet Tom provides here:

https://generatepress.com/forums/topic/logo-does-not-have-explicit-width-and-height/#post-1762272

[Brendan]

Hi David, thanks very much, appreciated.

Will this have to be removed in a subsequent update? Or will any future versions make it obsolete?

[Leo]

You can remove the snippet once our update fixes the issue 🙂

[Brendan]

That snippet didn’t work either. Still no width=”x” height=”y” in the tag. See the private URL.

[Leo]

I actually just tested the code and it worked as expected.

Before: https://www.screencast.com/t/G8mqBP4bpL
After: https://www.screencast.com/t/xMKIxTcgM23

Can you try clearing any caching plugin you might have?

[Brendan]

Hi Leo, thanks for your reply. I’ll trying clearing caches and other things.

I don’t doubt the solution is correct, it follows the code in the header.php.

Something else might be causing a conflict. Will reply ASAP.

[Leo]

Make sure the code is added using one of these methods:
Adding PHP: https://docs.generatepress.com/article/adding-php/

[Brendan]

Yep, added it to my child theme functions.php.

I recall adding some Google Analytics tracking.js to header.php in my child theme folder. I suspect that the latest GP header.php might differ from my version, updated many months ago.

I’ll try playing with that file and let you know.

At this point I’ve cleared autoptimize cache multiple times. I don’t think Cloudflare would be caching my HTML.

[Brendan]

My apologies, I had the wrong logo image! Didn’t intend to waste your time.

The problem image is the navigation logo. It’s lacking dimensions.

I saw a snippet for removing the link from the image. I only need to add dimensions. Here’s the code from gp-premium/menu-plus/functions/generate-menu-plus.php

I imagine there’s a way to add dimensions without hardcoding them? Note: Please preserve the ahref 🙂

echo apply_filters(
			'generate_navigation_logo_output',
			sprintf(
				'<div class="site-logo sticky-logo navigation-logo">
					<a href="%1$s" title="%2$s" rel="home">
						<img src="%3$s" alt="%4$s" class="is-logo-image" />
					</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' ) ) )
			)
		);

[Elvin]

Hi Brendan,

Try this:

add_filter( 'generate_navigation_logo_output', function($output){
		$output = sprintf(
				'<div class="site-logo sticky-logo navigation-logo">
					<a href="%1$s" title="%2$s" rel="home">
						<img src="%3$s" alt="%4$s" class="is-logo-image" height="35" width="85"/>
					</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' ) ) )
			);

        return $output;
});

[Brendan]

Hi, we’re close. That filter successfully added dimensions.

The image source url is missing. For whatever reason sprintf value %3$s is empty

<img src="%3$s" alt="%4$s" class="is-logo-image" width="85" height="35" />

It works if I hard code the image.

Should the function that gets the following IMG Url be declared in the filter? Perhaps the filter is running before the gp-premium plugin functions load?

esc_url( apply_filters( 'generate_navigation_logo', $settings['sticky_menu_logo'] ) ),

[Elvin]

The image source url is missing. For whatever reason sprintf value %3$s is empty

did you have a logo assigned on Appearance > Customize > Sticky navigation?

That’s where %3$s will pull its logo from. If it’s empty, there will be no value for %3$s

[Brendan]

Hi,

Still not working. Now the image disappears on desktop.

Here are my customizer configurations:

Customizing->Layout->Primary Navigation->Navigation Logo Placement = Sticky
(If I select “Static” or “Sticky + Static”, the image URL doesn’t appear in the tag)

Customizing->Layout->Sticky Navigation = On, Transition = None, Hide when scrolling down = Checked

[Elvin]

Still not working. Now the image disappears on desktop.

Can you point us to what logo were you trying to applying this?

Is it for this one? https://share.getcloudapp.com/wbubeLGG

If it’s for the mobile logo only, you can use this filter instead. generate_mobile_header_logo_output

Example:

https://docs.generatepress.com/article/generate_mobile_header_logo_output/#setting-a-width-and-height

[Author]

Posts