Retina Logo in Enfold – Reprise

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

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? https://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

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 (-webkit-min-device-pixel-ratio: 1.5) {

.logo {

background-image: url(' (Email address hidden if logged out) ');

background-size: 200px 100px;

}

}

Thanks,

Nick