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

[Brendan]

Yes, that’s correct logo. I need image dimensions on desktop only. The mobile display has dimensions.

[David]

I am not sure what the difficulty is.
Bu the only Function you should require is the one that Tom provided here.

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

Can you temporarily remove any other functions you added. And just add the above one.

[Brendan]

Hi @David: the dimensions are missing from the desktop navigation logo. The mobile navigation logo has image dimensions.

The other solutions have been close. I only need the desktop navigation logo image.

I already tried applying the filter you provided and it didn’t work. I’ll try again tomorrow.

Thanks for your assistance, I’ll play with this some more before replying.

[David]

If the Snippet Tom provided isn’t working then the most likely issue is the Image itself doesn’t have correct width and height values. And in that case you can use this snippet:

add_filter('generate_logo_attributes', function($output){
	$add_attr = array(
		'width' => '150',
		'height' => '100',
	);
	$new_output = array_merge($output,$add_attr);
	return $new_output;
});

[Brendan]

Update: Had to hardcode a solution for desktop image dimensions. Mobile remains unaffected.

Customizer settings:
Header Sticky = Off
Primary Navigation->Navigation Logo Placement = Static
Sticky Navigation = Off

The filter Elvin provided works except it doesn’t return an image URL. I realize Sticky Navigation = Off, so maybe the function is asking for an IMG url that it can’t access/doesn’t exist? I also had to hardcode image dimensions.

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="[path to image.png]" 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;
});

I picked around the code. I even searched my wp_options table to find the static navigation logo name. No luck. Closest thing I foudn was “regular-menu” in the GP-Premium plugin files.

The following from GP-Premium plugin will get IMG url if I provide the image post ID, where “123” is an imaginary ID:
$navigation_logo_url = wp_get_attachment_url( absint( 123 ) );

It seems this snippet of the filter isn’t getting the IMG url. If it did, I’d simply put %3$s where my hard code URL exists:

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

Are there any other workarounds? Perhaps something that uses wp_get_attachment_url and gets image attributes automatically?

At this point, I can’t spend more time on this. The hardcode solution will work for now.

[David]

Can we roll back a little.

Currently i do not see a navigation logo, because the Site Header is enabled, but being hidden by this CSS in Simple CSS:

.inside-header {
    display: none !important;
}

If i disable that CSS then i can see that image.
And that image is displaying but its Source is coming from Shortpixel.

So whats the endgame here – Are you NOT wanting the Site Header ? If so Enable the Navigation as Header option in Customizer > Layout > Header. This will then place the Site Identity Logo in the Nav.

If we can get that cleared up then we can look at the missing width height attributes.

Let me know ( and apologies if i missed something in the thread )

[Brendan]

Hi @David,

I wanted the same transparent logo appearing on mobile to appear to the left of the desktop navigation menu. Thus the appearance on mobile and desktop would look similar.

Just now, I removed the filter from my functions.php file. When I select “Header as Navigation”, I get a tiny favicon with a lot of padding to the right. This doesn’t look good.

Looking back, I had someone add that CSS you saw. Upon removal I had to deselect the site title, tagline and logo because extra whitespace was added to the top.

Original problem: I was able to use the mobile logo on desktop. The only problem was that it didn’t have dimensions.

At this point, I don’t think any GP bug is causing this problem. It seems to be a combination of CSS and setting up the right GP customizations.

I’ve removed the desktop logo entirely for now. The page runs faster. I can live with that. The mobile logo still works as expected.

If anything, I’d simplify the customization process. There are too many logo images to add. It gets confusing which image appears where, and how to customize them.

I don’t want to keep wasting time on this, I appreciate everyone’s input. Thanks.

[Tom]

I agree that there are too many logos happening – we need to find a way to merge a couple of those settings.

If I was to make a suggestion, I would:

1. Turn on “Navigation as Header”: https://docs.generatepress.com/article/navigation-as-a-header/
2. Turn off the Mobile Header (Navigation as Header is the same thing)

This should use the logo set in “Customize > Site Identity” for both desktop and mobile.

If it’s too small, you may need to increase the height of your navigation, as the logo will force itself to fit inside the navigation (min 10px of top/bottom padding).

Let us know if you want us to take a look when the logo is too small 🙂

[Brendan]

Hi @Tom, and others,

Really appreciate your support on this. Allow me some time to play with this in the coming days.

Want to be clear: GeneratePress is an amazing theme. It’s lightweight, reliable, loads fast, with plenty of easy ways to customize. I’ve been using it for 4+ years and happily purchased the premium plugin a couple years back.

The logo problem is minor, I’m a very satisfied customer at this point.

[Tom]

That’s great to hear – thank you! 🙂

[Author]

Posts