[Plugin: WP Retina 2x] Using "Custom Logo" In Theme

Hello,

That is because this kind of theme usually uses a very special size for the logo, and they don’t register that size in WordPress neither (and they shouldn’t, as it is only use for ONE image).

Is is actually easy. Do you know where the image is located? Check the logo file name, find it on your server, and upload manually a “@2x” image next to it. For example, if your logo is “mylogo-400×20.png” (resolution 400*20), you should upload a “mylogo-400×[email protected]” (resolution 800×40 though). Then it should work!

Please tell me the result ??

Hmm, still not working. Do you have to have the dimensions of the image in the file name?

The dimension in the file name has actually nothing to do with WP Retina 2x, it’s just the way WordPress renames the files.

You can upload a logo named logo.png and its equivalent for Retina would be [email protected].

Can you give me the URL to your website?

I have also tried this and it doesn’t work.

Please share with me your websites URL, I will check.

I’m having the same issue, url https://www.vgrevolution.com
image normal https://img1.vgrevolution.com/vgrlogo2.png
image retina https://img1.vgrevolution.com/[email protected]

and a snipet of the code

<div id="branding" class="clearfix">
	<div class="logo">
<a href="https://www.vgrevolution.com"><img src="https://img1.vgrevolution.com/vgrlogo2.png"></a>
	</div>

I checked VG Revolution, but the plugin doesn’t seem to be loaded… Did you try using the client-method?

Yes the plugin is loaded and set to client-side as we use Cloudflare. I see it swap out the various wordpress uploaded images fine, and I’ve checked the image URLs after it swaps them out and they are the @2x images. The only images it doesn’t seem to swap out are the images I have coded into the theme.

I have it in debug mode right now and if you visit the homepage you’ll see the NHL image loads as a @2x, but the logo does not.

**I just looked a little more into, if I right click and view the image URL the image URL says @2x version, however if I look at the page source none of the images are @2x versions, is that supposed to be? I also don’t see any script related in the page source, the images are swapping out I see the version switch as the page loads, so it’s working at some level.

In order to get the right logo size, you must add some CSS code. First, you must know the size in pixel of your logo at normal definition. This is the information missing when you upload the logo with your theme. When you upload images via the media section in wordpress, it adds the width and height for each image it includes in an article. The theme setup usually does not do it, unfortunately.

The logo must also be enclosed between DIV or SPAN tags. It will not work if there is only the IMG tag.

So, if your logo is coded like this:

<div class="logo">
<a href="https://www.domain.com"><img src="/logo.png"></a>
</div>

You have to add the following CSS code:

#logo {height: 75px; width: 313px;}
#logo  img {width: 100%;}

The any retina hack will have problems when the size of images are not setup properly, and the browser will display a twice bigger image instead.

@pozhonks
I tried what you said and still no dice. You can see the code I have within WP above. And my CSS code is as follows

#branding				{ width: 980px; margin: 0 auto; padding: 0 0 10px; }
.logo					{ height: 100px; width: 590px; float: left; margin: 11px 0 0 10px; }
.logo img 			      {width: 100%;}

Am I doing something wrong??

@jlomaga, did you find a way to make it work? By the way I don’t think you need the second line, but I might be wrong ??

No it doesn’t work that way either. The only way I can a high-res logo to load is if I use the @2x logo as the img and then let the css size it down, but that defeats the purpose since it loads the same large image for all displays.
I’ve tried the code with and without the img 100%

If it is only for the logo, you could do that actually. I wouldn’t bother much ?? But on my websites, my logo displays well. You can check https://www.haikyo.org (using the client-side method) and https://www.totorotimes.com (using the server-side method).

Alternatively you could ask the theme developer to do it for you. They will have to take care of this issue eventually anyways, so be the one who ask ?? We can probably debug and help you here, but it’s not related to the plugin, it is a general “Retina” issue and the themes have to improve their code (as most of the themes by default are working with it by default).

I will “close” that issue as it is not really related to this plugin anyways. We can continue to chat here to find a solution to help you.

Jordy, I’m a bit confused on your examples, your logos on those pages are text? there is no image being loaded. Unless you mean on the second example the image of the little fella reading the paper, that appears to load via css as a background img?

My logo is coded in straight html wrapped in a div.

From what I gather you are pretty much using the https://retinajs.com/ script correct? From their set-up instructions, it seems all you need to do is call the script and then it pulls the @2x versions. It doesn’t even seem to need css sizes, besides background images.