Disable Retina Images

[ChrisSavoie]

How can I quickly disable retina display images? I’ve customized this theme to fit a client’s needs and all of the images are broken on apple OS’s.

[livemesh]

At present the theme does not replace any of the images with retina versions of it, only the icons are made retina ready. If images are broken, the issue is something else.

Among the icons, many are font-icons which are retina ready by default and there is no replacement happening there. For others, you can find the code for retina support at the bottom of {theme directory}/css/responsive.css starting with line number 201 to 217 like this –

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
....
}

Let me know if you need further help on this. Will need the URL for the site to have a look. Thanks

[elaine]

Is there a workaround code I can add to my site to display retina versions of graphic .png files?

I’ve got the code to display retina version for the logo in header but would like to also have the ‘services’ icons be retina too.

the website link (work in progress) is http://creativestoreys.com/enlw/

Thanks.

[livemesh]

If you want to do this more often, there is a lightweight script which does this for you if you do not want to write the JS code yourself –

https://github.com/leonsmith/retina-replace-js

All you need to ensure is having another image with a name suffix _2x added to the original image name and residing in the same folder. You then call the script on the targeted element like this in js/main.js file –

$('.service-box2').retinaReplace();

Pls check it out and let me know if you have questions. To include this script, pls modify the custom/custom-functions.php file and use the function call –

/* Load specific scripts for the framework. */
    add_action('wp_enqueue_scripts', 'mo_enqueue_scripts');

function mo_enqueue_scripts() {
    wp_enqueue_script('retina-replace', get_template_directory_uri() . '/js/lib/retina.replace.js');
}

[Author]

Posts