Add retina display resolution to the logo

Hi 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 :)

Hi Tom. Where must the mime filter be added, when i use the child theme?

Marko

Correct: https://generatepress.com/knowledgebase/adding-php-functions/

Hi 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

Hi Lisa. Do you delete your browser cache and reload the site?

Marko

Hi 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

Marko - 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?

Hi Tom. The mime filter for upload is working on my side. No svg logo are be displayed with the code from above.

Marko

What about when you upload it through "Customize > Site Identity"?

Hi 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

There 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/

Hi 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,

The "Safe SVG" plugin suggested provides a safe way to upload SVG files.

Quiero 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!