WP Retina 2x not recognizing Retina Logo

Here’s a follow-up to my earlier question. I tried the strategy recommended in the WP Retina 2x tutorial, but it didn’t work. So I then contacted the maker of my theme, and he suggested this two-step process: 1.) Upload the retina-display image into the non-retina display field of Appearance>Customizer. 2.) Add the following CSS to the Appearance>Customizer:

header[role=”banner”] img {
max-width: 100%;
width: 580px;
}

That’s an effective workaround, in terms of creating a crisp logo on retina-display screens. My logo looks good now. Unfortunately, the underlying problem still persists: when the WP Retina 2x plugin is activated, it somehow forces my theme to display a non-retina logo even when the website is viewed on a retina-display screen. So without the workaround described above, I’d get a blurry logo. If there’s any way that WP Retina 2x plugin could be modified so that it no longer forces my theme to display the non-retina logo on retina-display screens, I’d appreciate it. Thanks!

Hi,

Yes, that strategy should work too. However, I don’t understand why the plugin would display a non-retina logo even though… you actually only uploaded a retina logo, right?

By the way, for me, your logo is retina, and I can see the plugin is also enabled ?? So is there actually a problem?

Let me clarify: When I uploaded a non-retina logo and also a retina logo, the plugin displayed only the non-retina logo, even when the website was viewed on a retina-display computer screen. To come up with a workaround, I deleted the non-retina logo and replaced it with a retina logo. In other words, I’ve now uploaded two retina logos instead of one retina logo and one non-retina logo. One of those retina logos resides in my theme’s Customizer slot specifically intended for a non-retina logo. The other retina logo resides in the slot specifically intended for a retina logo. When I activate the WP Retina 2x plugin and then view my website using a retina-screen computer, my website displays the retina logo placed in the non-retina-logo slot. (When I deactivate WP Retina 2x, my website correctly displays the retina logo placed in the retina slot.)

Unfortunately, the retina logo placed in the non-retina slot looks too big on my website. So I’m using the following code inserted into the Customizer to reduce its size:

header[role=”banner”] img {
max-width: 100%;
width: 580px;
}

That workaround (putting a retina logo in the non-retina slot and inserting that snippet of CSS) produces a nice, crisp logo image that’s the correct size.

So basically, thanks to that workaround, I’ve come up with a satisfactory result. In that sense, the problem is solved. But I’m still curious why the WP Retina 2x plugin would force my website to display the retina logo located in my Customizer’s non-retina-logo slot, rather than display the retina logo located in the retina-logo slot.