- This topic has 17 replies, 4 voices, and was last updated 1 year, 7 months ago by
.
-
Posts
-
Hello,
We use SVG logo for our site and we found that GeneratePress doesn’t set the width and height for it, even after selecting logo width in theme setting. This can cause CLS problem.
How to set width and height for SVG logo ?
Thank you !
Customer Support
Hi there,
if you change Customizer > General –> Structure to Flexbox, the GP 3.0 should insert the Width and Height attributes.
You should also ensure that the original canvas size of your SVG is that of the size you want it displayed.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Thank you David,
But I already use Flexbox.
Also, if I use a SVG logo that already has the target width, it will only work for desktop since there’s no option to upload a different logo for mobile.
I just tested your logo on a local dev site with the flexbox version and the width and height attributes are present. I notice on your site the logo has a
loading="eager"attribute which is not a default setting of WP – how has that been added? As that may be affecting the way the image is output ?As a side note – i also tested the site for CLS and there is none present.
For mobile – if required the Mobile Header option in Customizer > Header can be enabled which has its own Logo.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Hello David,
I am sorry but I can’t find any width or height argument for the logo in the source code.
Also the new GTMEtrix which uses Lighthouse doesn’t see dimension either.The CLS value you see is “lab only” if any image doesn’t have proper size set before loading, it will cause a CLS issue in the “real world”.
Thanks
GP 3.0 ( Flexbox ) uses the core
wp_get_attachment_metadatafunction to get the image width and height attributes. This relies on two things:1. The Image has width and height attributes, can you check the image in your Media Library to make sure it has defined width and height?
2. No other function has modified the logo output – as i asked above the image has theloading="eager"attribute, WP does not add this by default so there must be another function or plugin that is adding this – which may in turn be removing the size attributes. Can you disable any lazyload functions / plugins to test.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/I faced the same problem and I don’t have anything like loading=”eager” attribute but also the image tag has width and height.
Same Site as in Signature.
ThanksSEO, WordPress Optimization, Blogging Tutorials.
GeneratePress Tutorial: https://www.wplogout.comHi Suraj,
are you having an issue here ? I am seeing size attributes for you logo image. And as its an inline navigation logo its height is defined by the Menu Item height so would not be an issue if it were missing attributes.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Hello David,
There’s no size specified in wordpress media for SVG ! It’s only for normal images.
loading=”eager” is added by a plugin of mine and has no effect on this problem (it doesn’t deactivate width and height)).
I uploaded the SVG with the Safe SVG Plugin installed and it has dimensions:
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Hello,
i installed your plugin and it does pu some dimension that I had not before !
It’s very strange, I don’t understand but it seems to work.Glad to hear its working
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Yes, it has a size attribute and also I have resized it with CSS.
Uploaded my logo using Safe SVG plugin but still same problemSEO, WordPress Optimization, Blogging Tutorials.
GeneratePress Tutorial: https://www.wplogout.comCustomer Support
Can you open a new topic for your question?
Thanks 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Hi, It’s the same question so I don’t want to duplicate it.
Do I need to?
ThanksSEO, WordPress Optimization, Blogging Tutorials.
GeneratePress Tutorial: https://www.wplogout.com
- You must be logged in to reply to this topic.