Making the header logo Retina

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.

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.

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?

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.

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.

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 ‘[email protected]’ 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.

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.