Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #20481

    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(“.. (Email address hidden if logged out) “) 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 (Email address hidden if logged out) “) no-repeat top left; background-size: 60%; }

    h1.logo a { background: url(“../images/TFC (Email address hidden if logged out) “) no-repeat top left; background-size: 60%; }

    h1.logo a img { background: url(“../images/TFC (Email address hidden if logged out) “) 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

    #107827

    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

    #107828

    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 (Email address hidden if logged out) 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 200×100 and named ‘logo.png’, upload a 400×200 version of that logo named (Email address hidden if logged out) ‘ 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.

    #107829

    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

    #107830

    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 (Email address hidden if logged out) “) 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

    #107831

    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

    #107832

    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

    #107833

    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

    #107834

    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 (Email address hidden if logged out) . 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

    #107835

    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

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Replacing logo with Retina Logo’ is closed to new replies.