Archived topic
logo not getting dimensions in html using GP betas
7 replies · Started by Natalie on October 7, 2021
I'm not sure if this is related to the beta versions or not
I've added an SVG logo in customiser / site identity
The html does not have height and width in the img tag
If I use a png logo then it does have the height and width in the img tag.
To troubleshoot this I have a 'test' site with a starter site from the GP site library loaded.
I loaded the 'health' starter site.
It has an svg logo and has the same problem - no height and width in the img tag
But when I look at the actual 'preview' of the 'health' starter site on https://generatepress.com/site-library/ then the svg logo DOES have the height and width
This is the html on my test site:
<img class="header-image is-logo-image" alt="GP site test" src="https://gpsites/wp-content/uploads/health-logo-1.svg" title="GP site test">
This is the html on the preview on the site library:
<img class="header-image is-logo-image" alt="Health" src="https://gpsites.co/health/wp-content/uploads/sites/78/health-logo.svg" title="Health" width="100" height="25">
I have no plugins other than those loaded by the starter site
GP plugin is: Version 2.1.0-beta.1
GB: Version 1.4.0-beta.1
GP Theme is: Version: 3.1.0-beta.1
Hi there,
this is generally an issue with the SVG not including a viewBox attribute.
If you can link me to your site where the SVG is missing its height/width i can take a look.
Thanks David.
I don't have a site anywhere at the moment - only local.
As I said though, I imported the 'health' starter site from the gp site library and it has the same issue. Can you test that site with the beta versions? I have checked and the svg logo for that site DOES have the viewbox set
Oh - good spot - we'll take a look at that. Thanks for letting us know.
OK
The issue is that the svg image in WordPress doesn't have any dimensions associated with it. The GP function that creates the header logo html code uses wp_get_attachment_metadata to get the dimensions from WordPress, but WordPress hasn't saved any dimensions with the svg, so that is where it is failing.
So its just a case of who and what should be setting the svg dimensions.
1. obviously importing a starter site DOESN'T set the dimensions of the svg as it is imported
2. WordPress doesn't natively allow SVG to be uploaded to the media library, so the method that you choose to load the svg to WordPress needs to add the dimensions to the svg
I use the 'Safe SVG' plugin to upload svg. I haven't had time to look into it yet, to see why it doesn't set the dimensions or whether it even claims that it does.
I have found a function that you can add to your functions.php which will set the dimensions for svg as they are uploaded.
I used this: https://wordpress.stackexchange.com/a/256701/73029
It did work but I haven't checked it yet so I don't endorse it.
Once the svg logo has dimensions (as shown in the media library), then it correctly gets the dimensions in the html code.
So not an issue with the actual GP code, but really just a case for a bit of documentation I think
Maybe you could share which plugin / code you use to upload svg files as whatever you use is obviously setting the image dimensions
thanks for looking into this... yeah definitely something weird that WP does when we're importing the site.
One thing that crossed my mind is the Site Import doesn't include the SVG Support plugin ( we stopped using Safe SVG as its been abandoned ) - but even with that plugin installed before the import still fails to deliver real values - just width="0" height="0" ... and yet the Media Attachment does display the real values. Very peculiar.
We're going to see what we can do to improve that... but not sure if its a real problem or not, as it only seems to affect the imported SVG logo - which presumably a user would be replacing with their own. And adding a new logo SVG with valid viewBox attributes is working.
Thanks for the suggestion of a replacement plugin: 'SVG support'
I can confirm that if I use that plugin then the dimensions do get set correctly.
This is the page that would benefit from being updated with your updated recommendation for the SVG plugin :
https://docs.generatepress.com/article/adding-svg-logo/
Aah yes - we need to change that doc - will get that done ASAP.
Thanks for testing and feedback - really appreciated.
