WordPress.org

Forums

Making the header logo Retina (14 posts)

  1. Matthew Downey
    Member
    Posted 2 years ago #

    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).

  2. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

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

  3. Matthew Downey
    Member
    Posted 2 years ago #

    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.

  4. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

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

  5. Matthew Downey
    Member
    Posted 2 years ago #

    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.

  6. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

  7. Matthew Downey
    Member
    Posted 2 years ago #

    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?

  8. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

    Appearance
    Editor

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

  9. Matthew Downey
    Member
    Posted 2 years ago #

    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.

  10. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

    There's one for CSS, jQuery etc.

  11. Matthew Downey
    Member
    Posted 2 years ago #

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

  12. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    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.

  13. Matthew Downey
    Member
    Posted 2 years ago #

    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.

  14. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags