Replacing logo with Retina Logo « Support Forum | Kriesi.at

Support Forum » Propulsion

Replacing logo with Retina Logo

10 posts from 2 voices

Started 3 months ago by Lindsey
Latest reply from Nick
This topic is closed
This topic is resolved

Tags:

logo
retina

Lindsey
Member

Hi Team,

I've updated all my site's icons and images with retina and all is well on mobile.

I'd like to now replace my logo with a retina image. This is what is working for me for site wide images in my media queries:

#list .icon { background: url("../images/icon@2x.png") no-repeat top left; background-size: 60%; }

However, when I try to implement retina replacement for my logo, my retina image shows up under the logo and to the left, so instead of replacing the original logo on mobile devices, there are two images there.

I have tried the following and they are showing up but the original image isn't going away:

h1.logo { background: url("../images/TFC-logo-912x1144@2x.png") no-repeat top left; background-size: 60%; }

h1.logo a { background: url("../images/TFC-logo-912x1144@2x.png") no-repeat top left; background-size: 60%; }

h1.logo a img { background: url("../images/TFC-logo-912x1144@2x.png") no-repeat top left; background-size: 60%; }

I've done this for other sites when hand-coding, but this is my first time attempting with a theme and I'm not sure how to correct this in the php.

Thank you for your help!

- Lindsey

Posted 3 months ago #
Nick
Moderator

Hi,

What are you using (code) to display retina? Have you tried this http://conditionizr.com/ or http://wordpress.org/extend/plugins/wp-retina-2x/

Thanks,

Nick

Posted 3 months ago #
Lindsey
Member

Thanks Nick,

I'm just using my own layout.css document with these media queries, which are successful with all my other images, so I'm not sure why the logo isn't updating:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
}

I had the Retina2x plugin but it wasn't working, so I just created my own media queries and uploaded icon@2x.png for all my images and icon and coded it out with the above media query, and everything except the logo worked. Retina2x documentation states "The plugin can transform the images that go through the WordPress API and the 'Image Sizes' properly. Themes often uses a one-time customized size for the logo, and for that reason the image wouldn't be taken care of by the plugin. The easiest way to go around this is to create the Retina image by yourself. For example, if you are logo is 200x100 and named 'logo.png', upload a 400x200 version of that logo named 'logo@2x.png' next to the other one. It should them work immediately." I did that, but it still didn't replace it, so I had no need for the plugin and deactivated and deleted it.

So with my own code, my images are fine and retina images are replacing, but the logo isn't.

Posted 3 months ago #

Nick
Moderator

Hi,

Please try this

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

  /* Retina-specific stuff here */

}

Your line 2 is not correct. min moz device ... not ... min moz min device

Thanks,

Nick

Posted 3 months ago #

Lindsey
Member

Thanks Nick,

I've updated my CSS and checked my Firefox app on my iPhone, and they look the same. I've read articles on using both types of moz, one from css-tricks.com even says "The super weird min--moz-device-pixel-ratio is probably a bug, might wanna put in -moz-min-device-pixel-ratio also in case they fix it but leave it prefixed". In any event, I have changed mine to your suggestion - thank you so much, although my icons are appearing the same.

Regarding the image replacement for the logo, I have it in my media query as such:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {

h1.logo a { background: url("/wp-content/uploads/2011/12/TFC-logo-114x143@2x.png") no-repeat top left; background-size: 60%; }
}

The image shows up and looks great, except it's peeking out from behind my original logo. I can't display:none on the original logo because they have the same selector. I'm not sure why the original logo isn't disappearing. I have saved my CSS so you should be able to see it on my home page http://www.toxicfreechallenge.com.

This is a very interesting dilemma.

Thank you for your help!!

- Lindsey

Posted 3 months ago #
Nick
Moderator
Hi,

Hehe. I got the css I posted from the same website. Yet it didn't say to remove the original, it just says to add the variation. You can also look at this http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/

You have your main logo hardcoded in the html so it will be displayed no matter what
```
<h1 class="logo"><a href="http://www.toxicfreechallenge.com/"><img src="http://toxicfreechallenge.com/wp-content/uploads/2011/12/TFC-logo-114x143.png" alt=""></a></h1>
```
You need to have both the retina and the original image inside the css and to show one or the other class based on the media query. Please look here for example http://www.sitepoint.com/css-techniques-for-retina-displays/

I would still use http://wordpress.org/extend/plugins/wp-retina-2x/faq/ ... the developer guarantees it and even offers free support. can't beat that.
Thanks,

Nick
Posted 3 months ago #
Lindsey
Member

Hello,

This is a great article and resource you have given me. I will conquer this! I appreciate your help.

Yes, I hard-coded the logo in the Theme Options inside WordPress. I wonder if I should replace it with the high-res one, and just change the background size via CSS in my mobile media query instead of swapping it out. I think that would work.

I will try this and also reinstall the plugin and I will update you soon.

Thank you so kindly, Nick!

- Lindsey

Posted 3 months ago #

Nick
Moderator

Hi,

You could do it like this ... below is pseudo code to give you an idea.

#top h1.logo {   background-image: url(logo-non-retina.png) !important;
}
@media ...al the media queries from above
only screen and ( min-resolution: 2dppx) {
#top h1.logo { background: url("/retina.png")  !important; }
}

and for the html

<h1 id="logo" class="logo">
    <a href="abc.com">Website name</a>
</h1>

Ref: http://stackoverflow.com/questions/665037/replacing-h1-text-with-a-logo-image-best-method-for-seo-and-accessibility

Thanks,

Nick

Posted 3 months ago #

Lindsey
Member

Thanks Nick,

With the Propulsion theme, if I remove my image from the Theme Options, the Propulsion image is the default logo, and displays with my logo as well.

After installing WP Retina2X, I was able to remove media queries completely for the logo. All I needed to do was rename the Propulsion logo as p-logo.png and drop in my original size image in named logo.png, as well as a high res version as logo@2x.png. The high res version loads about 3 seconds after the original version on the iPhone.

Thank you so much for all of your help and kindness!!

Sincerely,
Lindsey

Posted 3 months ago #
Nick
Moderator

Hi,

hmmmmm 3 seconds? thats not good. Why don't you encode the image to base64 and stick it in the css , you may have a large css file, but mobiles load css instantly unlike images. It would shave 90% on your load time. Here is the url to the converter http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

Good luck!

Nick

Posted 3 months ago #