Tagged: ,

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

    Hi,

    my last post was closed as a moderator thought it was resolved, but it isn’t so again my question:

    I want to use a Retina Quality Logo in Enfold.

    I found another thread that tells to add an image size attribute to the function-set-avai-frontend.php but this has no influence if I use this in enfold.

    I did:

    if($logo = avia_get_option('logo'))
    {
    $logo = "<img src=".$logo." alt='' width='200' height='100'/>";
    $logo = "<$headline_type class='logo'><a href='".home_url('/')."'>".$logo."$sub</a></$headline_type>";
    }

    The Logo is still displayed bigger at his regular size. (the image is double the size(400×120 in my case for retina display)

    Do i need to refresh something ( I am quite new in WordPress so please be detailed)

    Btw. is 200×100 really the max. recommended size for Enfold or can one go bigger.

    Thanks Frank

    #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 (-webkit-min-device-pixel-ratio: 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.