WordPress.org

Ready to get started?Download WordPress

Forums

WP Retina 2x
[resolved] Using "Custom Logo" In Theme (17 posts)

  1. ercourtney
    Member
    Posted 2 years ago #

    Hello,

    Love the product. I'm currently using the Kraken theme by Authentic and they allow for a custom logo upload. However, no matter how many different sizes I try, I cannot get the image to display correctly on a retina display.

    Do you know of any work arounds when working with a theme that has custom options?

    Thanks!

    http://wordpress.org/extend/plugins/wp-retina-2x/

  2. Jordy Meow
    Member
    Plugin Author

    Posted 2 years ago #

    Hello,

    That is because this kind of theme usually uses a very special size for the logo, and they don't register that size in WordPress neither (and they shouldn't, as it is only use for ONE image).

    Is is actually easy. Do you know where the image is located? Check the logo file name, find it on your server, and upload manually a "@2x" image next to it. For example, if your logo is "mylogo-400x20.png" (resolution 400*20), you should upload a "mylogo-400x20@2x.png" (resolution 800x40 though). Then it should work!

    Please tell me the result :)

  3. ercourtney
    Member
    Posted 2 years ago #

    Hmm, still not working. Do you have to have the dimensions of the image in the file name?

  4. Jordy Meow
    Member
    Plugin Author

    Posted 2 years ago #

    The dimension in the file name has actually nothing to do with WP Retina 2x, it's just the way WordPress renames the files.

    You can upload a logo named logo.png and its equivalent for Retina would be logo@2x.png.

    Can you give me the URL to your website?

  5. chrisgeorgio
    Member
    Posted 2 years ago #

    I have also tried this and it doesn't work.

  6. Jordy Meow
    Member
    Plugin Author

    Posted 2 years ago #

    Please share with me your websites URL, I will check.

  7. jlomaga
    Member
    Posted 1 year ago #

    I'm having the same issue, url http://www.vgrevolution.com
    image normal http://img1.vgrevolution.com/vgrlogo2.png
    image retina http://img1.vgrevolution.com/vgrlogo2@2x.png

    and a snipet of the code

    <div id="branding" class="clearfix">
    	<div class="logo">
    <a href="http://www.vgrevolution.com"><img src="http://img1.vgrevolution.com/vgrlogo2.png"></a>
    	</div>
  8. Jordy Meow
    Member
    Plugin Author

    Posted 1 year ago #

    I checked VG Revolution, but the plugin doesn't seem to be loaded... Did you try using the client-method?

  9. jlomaga
    Member
    Posted 1 year ago #

    Yes the plugin is loaded and set to client-side as we use Cloudflare. I see it swap out the various wordpress uploaded images fine, and I've checked the image URLs after it swaps them out and they are the @2x images. The only images it doesn't seem to swap out are the images I have coded into the theme.

    I have it in debug mode right now and if you visit the homepage you'll see the NHL image loads as a @2x, but the logo does not.

    **I just looked a little more into, if I right click and view the image URL the image URL says @2x version, however if I look at the page source none of the images are @2x versions, is that supposed to be? I also don't see any script related in the page source, the images are swapping out I see the version switch as the page loads, so it's working at some level.

  10. PozHonks
    Member
    Posted 1 year ago #

    In order to get the right logo size, you must add some CSS code. First, you must know the size in pixel of your logo at normal definition. This is the information missing when you upload the logo with your theme. When you upload images via the media section in wordpress, it adds the width and height for each image it includes in an article. The theme setup usually does not do it, unfortunately.

    The logo must also be enclosed between DIV or SPAN tags. It will not work if there is only the IMG tag.

    So, if your logo is coded like this:

    <div class="logo">
    <a href="http://www.domain.com"><img src="/logo.png"></a>
    </div>

    You have to add the following CSS code:

    #logo {height: 75px; width: 313px;}
    #logo  img {width: 100%;}

    The any retina hack will have problems when the size of images are not setup properly, and the browser will display a twice bigger image instead.

  11. jlomaga
    Member
    Posted 1 year ago #

    @PozHonks
    I tried what you said and still no dice. You can see the code I have within WP above. And my CSS code is as follows

    #branding				{ width: 980px; margin: 0 auto; padding: 0 0 10px; }
    .logo					{ height: 100px; width: 590px; float: left; margin: 11px 0 0 10px; }
    .logo img 			      {width: 100%;}

    Am I doing something wrong??

  12. Jordy Meow
    Member
    Plugin Author

    Posted 1 year ago #

    @jlomaga, did you find a way to make it work? By the way I don't think you need the second line, but I might be wrong ;)

  13. jlomaga
    Member
    Posted 1 year ago #

    No it doesn't work that way either. The only way I can a high-res logo to load is if I use the @2x logo as the img and then let the css size it down, but that defeats the purpose since it loads the same large image for all displays.
    I've tried the code with and without the img 100%

  14. Jordy Meow
    Member
    Plugin Author

    Posted 1 year ago #

    If it is only for the logo, you could do that actually. I wouldn't bother much ;) But on my websites, my logo displays well. You can check http://www.haikyo.org (using the client-side method) and http://www.totorotimes.com (using the server-side method).

    Alternatively you could ask the theme developer to do it for you. They will have to take care of this issue eventually anyways, so be the one who ask :) We can probably debug and help you here, but it's not related to the plugin, it is a general "Retina" issue and the themes have to improve their code (as most of the themes by default are working with it by default).

  15. Jordy Meow
    Member
    Plugin Author

    Posted 1 year ago #

    I will "close" that issue as it is not really related to this plugin anyways. We can continue to chat here to find a solution to help you.

  16. jlomaga
    Member
    Posted 1 year ago #

    Jordy, I'm a bit confused on your examples, your logos on those pages are text? there is no image being loaded. Unless you mean on the second example the image of the little fella reading the paper, that appears to load via css as a background img?

    My logo is coded in straight html wrapped in a div.

    From what I gather you are pretty much using the http://retinajs.com/ script correct? From their set-up instructions, it seems all you need to do is call the script and then it pulls the @2x versions. It doesn't even seem to need css sizes, besides background images.

  17. Jordy Meow
    Member
    Plugin Author

    Posted 1 year ago #

    My logos? Of course there are many images being downloaded :) On Haikyo the logo is not at the top, it is on the main page, the Totoro with two persons around it (I am one of them). Same for Totoro Times (using a different method, there is a big image and a smaller logo with Totoro reading the newspaper.

    You are exact, I am using Retina.js for the client-method. Did you work your issue out?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic