If you have troubles since the update to WordPress 4.5 please read this post before opening a new thread.

Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #25255
    #126271

    Hi,

    Logo can go bigger.but try to keep it to those proportions. 2×1

    For retina, I prefer to use this plugin http://wordpress.org/plugins/wp-retina-2x/ Since its well supported and has tons of updates all the time. Its much easier to do it that way.

    Thanks,

    Nick

    #126272

    Thanks for the hint with the Plugin. But i only want to have a Crisp Logo. As i expect GEW Retina visitors. So a Solution like the One Pointer Out above but Working would be Great.

    Frank

    #126273

    Hi,

    What solution? Those lines of code you pasted are lines 425-429 of functions-set-avia-frontend.php

    I am guessing you are following this post? http://www.kriesi.at/support/topic/retina-logo-on-homepage#post-115183 , Do you have a url where you placed this code because you should have uploaded the logo at size 400x200px if you are now displaying at 200x100px, which sounds too even numbered so something isn’t right. Please show the code so we can look at the sizes and get to bottom of this.

    Thanks,

    Nick

    #126274

    Hi Nick, sure i uploaded the file at Double Resolution. But instead of displaying at 100x200px. It displays at 200x400px. No URL at the Moment as its only in my mamp Server. Any hints? Greatly appreciated.

    #126275

    Hi,

    You mean it displays at that size on a non-retina browser? at 200 height and 400 width? Are you sure about that , because the theme will resize anything over 120 height or so and maybe 230 width. That’s why I wanted to take a look at it..

    Alright, since you don’t want to go the easy with the plugin, we will go the hard way by installing the retina.js manually. You will need to download it from the src folder here https://github.com/imulus/retinajs … also as you can see there are some useful tests you can run calibrating it. . Just add the retina.js file to the /js/ theme folder and now in your functions.php file, add the following code to line 200 (which is empty)

    wp_register_script( 'jquery-retina', $template_url.'/js/retina.js', array('jquery'), 1, true );

    and add this code to line 207 of the same file

    wp_enqueue_script( 'jquery-retina' );

    Alright now just resize the image exactly twice bigger but save it under the same name as original but with @2x at the end, so that if you had logo.png , you will now have (Email address hidden if logged out) and put it right next to where your logo is stored in same folder.

    Now for your logo, you will need to change the above line you pasted to look like this

    $logo = "<img src=".$logo." alt='' width='200' height='100'/>";

    to look like this

    <img src="http://full-url-to-image/logo.png" data-at2x="http: (Email address hidden if logged out) " />

    And last but not least, here is the css you must use, just add it to /css/custom.css , Just please replace with name of your file, url to file and url to retina image and sizes.

    .logo {
    background-image: url('/images/my_image.png');
    }

    @media all and (- (Purchase code hidden if logged out) : 1.5) {
    .logo {
    background-image: url(' (Email address hidden if logged out) ');
    background-size: 200px 100px;
    }
    }

    Thanks,

    Nick

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Retina Logo in Enfold – Reprise’ is closed to new replies.