Archived topic
SVG Logo Issue
8 replies · Started by Gonzalo on March 15, 2023
Hi
I added the following code I found here to add width and height attributed to logo on my website since it is an SVG file and it was causing a CLS issue on Page Speed Insights
add_filter('generate_logo_attributes', function($output){
$add_attr = array(
'width' => '200',
'height' => '56',
);
$new_output = array_merge($output,$add_attr);
return $new_output;
});
It is working for the whole website but not on the homepage for some reason.
I am using a merge element for the homepage to display a transparent header.
Is there anything I need to update for the above code to work on the homepage's logo as well?
The SVG file for the logo is the same in the home page as in the rest of the website so not sure why this is not working.
Thanks much
Hi there,
Can you add the code above again and then replace generate_logo_attributes with generate_page_hero_logo_attributes?
Let me know :)
Hi
I did add that code you suggested as a new snippet but it is not working unfortunately.
Do I need to add that additional code to the same code snippet I am using for the other pages or was setting it up as a new snippet correct?
I added it to the same snippet and as a separate snippet and either way the home page logo still having issues
Sorry - let's take a small step back first.
I just noticed that the logo for the home page is the same as all other pages - is there a specific reason why an extra page hero logo is needed here? The appearance should be exactly the same without it.
Let me know if I'm missing something here.
I did a page hero because all other pages on the website have a black header background and in the home page I wanted it to be transparent backgound on top of the image of the first container.
I understand why the page hero/transparent header is needed but I don't believe a separate logo is needed.
You would only use the page hero logo field if you want a different logo with a transparent header.
For example: https://docs.generatepress.com/article/navigation-as-a-header/#different-logo-and-navigation-colors
In your case, it's the white logo with or without the transparent header so it shouldn't be needed.
Let me know if this makes sense :)
Oh got it! that worked, I just removed the page hero logo and now the logo displays ok and has dimensions all over the site.
However, and I am so sorry to bother you, my page still has some serious CLS issues and I thought it was the logo but it is not (since now I fixed that).
Do you have any ideas what could be causing the huge CLS on home page. Page Speed Insights shows the issue is mostly on desktop.
Hi Gonzalo,
I tried testing your site multiple times and I'm not getting any significant CLS issues. The CLS score I'm getting is almost perfect. See: https://share.getcloudapp.com/YEue12kd
The other issues seem to stem from your Server's response time and Javascript from your plugins.
Can you try testing again?
