Support » Themes and Templates » Making the header logo Retina

  • Just wanted to know if there’s a way I can make the header logo in my site Retina optimised, so looking at it on a Retina display isn’t a painful experience.

    My site is running Origin, but the only means of support is paying $30/year to access the forums, so I can’t exactly ask them directly (although I suppose asking them on Twitter isn’t out of the question).

Viewing 13 replies - 1 through 13 (of 13 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    What do you mean, make your logo optimised?
    Better quality?

    Edit: Oh I think you mean change the words/text to Retina Optimised?

    No – I’d like to make the header logo on the site Retina optimised, so it’s better quality.

    You can hopefully see in this screenshot that the logo really stands out on the likes of the third generation iPad’s screen as a low resolution image, and I’d really like to change that.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Are you looking for a photo manipulating technique to optimise your logo?

    Then is there a way to re-upload your logo?

    No, if I make a bigger image and upload it then the logo will simply be larger (the way the site works). Basically, I want to know if anyone knows a way of getting the site to load one image on normal devices and another, larger image, on Retina devices.

    I know there’s a way to do it, but I just don’t know how to implement it in my WordPress theme. Sorry – this is what I should have said at the start.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    You’ll need to just add that code (from the tutorial) into the header.php file.

    You see, that’s where it gets complicated for me. I have no idea what part of the header.php file I should be looking to replace. Is there anything specific I need to look for or does it vary from theme to them?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    It should be editable through the admin panel, go to,

    Appearance
    Editor

    – then look on the right for Templates
    – find header.php

    No, no, I know how to get to the header.php. I just don’t know what part of the header.php file I should be looking for.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Which method (of the tutorial) are you planning to use?

    There’s one for CSS, jQuery etc.

    I really hadn’t thought about it? Do you have any recommendations (as you can tell, I’m not that technically minded.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I’d use the jQuery in this instance, as you can plonk it at the bottom of the page, as opposed to fiddling about where it goes.

    Could you open, in the admin editor, the template of the page you’re using? Since it’s the logo and you want it to repeat on all pages, I’d open the footer.php page.

    Once you’ve completed the jQuery tutorial, add the jQuery code just above the </body> tag.

    If it still doesn’t work, tell me the jQuery you’ve used.

    I think I’ve completed the tutorial correctly. I now have a file called ‘Techwhirl.png’ used for the logo and a file called ‘Techwhirl@2x.png’ in the same location. I copied the code from the tutorial (the one starting ‘<script type=”text/javascript”>’) into the end of my header.php befond the </body> tag, but it still doesn’t work. Have I not followed the tutorial completely or is there another reason why it still isn’t finished?

    BTW, I really appreciate your help with this; it is really useful to me.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I would add this to the bottom of the page, just above the </body> tag.

    Your code something like this?

    <script type="text/javascript">
    $(function () {
    
    	if (window.devicePixelRatio == 2) {
    
              var images = $("img.hires");
    
              // loop through the images and make them hi-res
              for(var i = 0; i < images.length; i++) {
    
                // create new image name
                var imageType = images[i].src.substr(-4);
                var imageName = images[i].src.substr(0, images[i].src.length - 4);
                imageName += "@2x" + imageType;
    
                //rename image
                images[i].src = imageName;
              }
         }
    
    });
    </script>

    Have you got this part var images = $("img.hires")?
    Your <img> element will have to contain a class called “hires” (<img class="hires">), or must match this var.

    If you have this,
    also include this
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    Just above your other <script> tag.
    If that does nothing, remove it.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Making the header logo Retina’ is closed to new replies.