- This topic has 21 replies, 11 voices, and was last updated 5 years, 5 months ago by David.
-
AuthorPosts
-
November 19, 2015 at 4:11 am #154178Arturo Garcia
Hi Tom,
The logo in the website of one of my clients does not look sharp when using retina display.
Have you any easy/fast method to add the logo in high resolution?
I have tried plugins like WP Retina 2x but it is not working.
Thank you.
November 19, 2015 at 10:46 am #154245TomLead DeveloperLead DeveloperHi there,
Your best bet is to use an SVG file for the logo – this makes it scalable and retina ready.
Otherwise, you would have to create your logo twice the size of the actual size, and use CSS to resize it down to the actual size (squishing more pixels into the same area).
To allow SVG upload in the theme, you would need to use this function:
function generate_mime_types($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'generate_mime_types');
Hope this helps 🙂
November 19, 2015 at 11:41 am #154262MarkoHi Tom. Where must the mime filter be added, when i use the child theme?
Marko
November 19, 2015 at 11:44 am #154263TomLead DeveloperLead DeveloperNovember 19, 2015 at 1:14 pm #154281Lisa LidgrenHi Tom, I copy/paste the code into functions.php and then tried to upload the image and got the answer “this format is not allowed because of security reasons”. Is this because of the host-rules or have I misunderstood the instructions maybe?
Thank you in advance, Lisa
November 19, 2015 at 10:49 pm #154305MarkoHi Lisa. Do you delete your browser cache and reload the site?
Marko
November 19, 2015 at 10:54 pm #154306MarkoHi Tom
How can i use the svg image then as header logo with php? The following code doesn’t work for svg images 🙁<div class="site-logo"> <a href="http://www.domain.de/"><img class="header-image" src="http://www.domain.de/wp-content/uploads/2015/11/logo.svg" alt="My Logo" title="My Company"></a> </div>
Marko
November 19, 2015 at 11:28 pm #154310TomLead DeveloperLead DeveloperMarko – did the function I gave you above allow you to upload the SVG? If so, Lisa, I believe it’s a hosting thing.
What about the above isn’t working? Does nothing show, or is it just not retina?
November 23, 2015 at 12:43 am #154894MarkoHi Tom. The mime filter for upload is working on my side. No svg logo are be displayed with the code from above.
Marko
November 23, 2015 at 9:00 am #154991TomLead DeveloperLead DeveloperWhat about when you upload it through “Customize > Site Identity”?
April 17, 2017 at 1:52 am #306736RyanHi Tom
I tried both ways but non of then are working:
With the SVG method, the file uploads fine, but it does not display
With the PNG+CSS method I have lot of issues when using it in combination with navigation logo + mobile logo because it squeeze its proportions
I would like to have a step by step tutorial where I can solve all those issues otherwise I simply give up using retina logos
As request, I whish you could add some simple way retina logos in future updates of your great theme
April 17, 2017 at 8:58 am #306860TomLead DeveloperLead DeveloperThere will be an option to reduce your logo by 50% in a future version.
As for using an SVG, this article should help: https://docs.generatepress.com/article/adding-svg-logo/
April 17, 2017 at 8:40 pm #307091SharifHi Tom,
Does the above function in reply #154245 prevents security issues too for uploading SVG or just it is for uploading SVG. I want to have a function to limit SVG uploading for just administrators.
Regards,April 17, 2017 at 9:03 pm #307097TomLead DeveloperLead DeveloperThe “Safe SVG” plugin suggested provides a safe way to upload SVG files.
April 27, 2017 at 11:38 am #311154JesusQuiero dejar mi aporte, para quien le interese. Lo haré en español (nativo) y en inglés (Google Translate)
En ESPAÑOL…
1. Yo NO utilicé el método SVG. Aunque sí sirvió el Function, nunca se vio el logo en la web.2. Mi el logo lo quería con un max-width de 300px, por tanto le doblé el tamaño, a 600px.
3. Descargué el plugin Simple CSS y copié y pegué estos dos códigos CSS…
—-
.site-logo img {
max-width: 300px; /* half of your original image size */
}
—-
@media (max-width: 500px) {
.site-logo img {
max-width: 100%;
}
}
—-4. Subí el logo con 600px de width en Appearance > Customize > Site Identity
Y listo!
In ENGLISH…
1. I did NOT use the SVG method. Although Function served, the logo was never seen on the web.2. My logo wanted it with a max-width of 300px, so I doubled the size, to 600px.
3. I downloaded the Simple CSS plugin and copied and pasted these two CSS codes …
—-
.site-logo img {
Max-width: 300px; / * Half of your original image size * /
}
—-
@media (max-width: 500px) {
.site-logo img {
Max-width: 100%;
}
}
—-4. I uploaded the logo with 600px width in Appearance> Customize> Site Identity
That’s all!
-
AuthorPosts
- You must be logged in to reply to this topic.