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).
What do you mean, make your logo optimised?
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,
– 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
If it still doesn’t work, tell me the jQuery you’ve used.
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
Your code something like this?
Have you got this part
var images = $("img.hires")?
<img>element will have to contain a class called “hires” (
<img class="hires">), or must match this
If you have this,
also include this
Just above your other
If that does nothing, remove it.
- The topic ‘Making the header logo Retina’ is closed to new replies.