WordPress.org

Support

Support » Plugins and Hacks » [Resolved] [Plugin: WP Retina 2x] Using "Custom Logo" In Theme

[Resolved] [Plugin: WP Retina 2x] Using "Custom Logo" In Theme

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author Jordy Meow
    Participant

    @tigroumeow

    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-400×20.png” (resolution 400*20), you should upload a “mylogo-400×20@2x.png” (resolution 800×40 though). Then it should work!

    Please tell me the result 🙂

    ercourtney
    Member

    @ercourtney

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

    Plugin Author Jordy Meow
    Participant

    @tigroumeow

    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?

    chrisgeorgio
    Member

    @chrisgeorgio

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

    Plugin Author Jordy Meow
    Participant

    @tigroumeow

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

    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>
    Plugin Author Jordy Meow
    Participant

    @tigroumeow

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

    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.

    PozHonks
    Member

    @pozhonks

    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.

    jlomaga
    Member

    @jlomaga

    @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??

    Plugin Author Jordy Meow
    Participant

    @tigroumeow

    @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 😉

    jlomaga
    Member

    @jlomaga

    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%

    Plugin Author Jordy Meow
    Participant

    @tigroumeow

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

    Plugin Author Jordy Meow
    Participant

    @tigroumeow

    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.

    jlomaga
    Member

    @jlomaga

    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.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘[Resolved] [Plugin: WP Retina 2x] Using "Custom Logo" In Theme’ is closed to new replies.