I'm building a conference event site and now that I have a retina screen MacBook Pro of course everything looks like crap. I grafted retina.js into a Rocket Theme template, and it works, but it doesn't work for rollovers for some reason.

Is there an alternative to this script that will pull @2x images for regular images places in JCE using the image editor and that have rollover images set for them?

I tried retina.js in both the header and then just sticking it in the debug module area. Neither one will make the rollover images go @2x.

  • Are you seeing any errors when the page loads?
    – TryHarder
    Jul 13 '14 at 2:06
  • no, no errors, I think it just is ignoring the rollovers.
    – Brian Peat
    Jul 13 '14 at 21:27
  • I'm afraid I don't know an alternative, but this link might help you find a retina.js based solution github.com/imulus/retinajs/issues/41
    – TryHarder
    Jul 14 '14 at 23:44
  • yeah, I stumbled on that same page. I may try to figure out just what the last poster did and see if I can do it too. Thanks!
    – Brian Peat
    Jul 15 '14 at 2:32

Retina.JS should ALWAYS appear just before the final tag so it is the last thing to load so it can action the images in the content. If the script runs before all them images, it doesn't work.

Not sure where the debug area appears on rockettheme, or if it even loads when you are not debugging.

Putting in the header would not have worked

To quote the retina.js website

The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). To use it, download the script and include it at the bottom of your page.

Place the retina.js file on your server Include the script on your page

(put it at the bottom of your template, before your closing tag) That's it!

I don't have enough points yet to comment.. go figure.. however I hope this helps your work out an answer.

Its been a while since I used gantry and dont have access to one to play with at present, but if I am not mistaken

  • Upload the retina.js to the js directory of the template
  • Add $gantry->addScript("retina.js"); to the appropriate place in the template index.php file
  • Yeah, originally I made a gantry "feature" but it loaded in the head. I'll try seeing if there's a way to load at the end instead. As far as I know, the debug loads late, down below the footer, but it may still not be late enough I guess.
    – Brian Peat
    Jul 18 '14 at 17:01
  • You could always just add a standard script call yourself into the index.php just as a test.. make sure it works before coding it in the proper way
    – MOLEDesign
    Jul 18 '14 at 17:04
  • are you using the latest gantry framework or one of the older versions? I may have a curious look later out of interest
    – MOLEDesign
    Jul 18 '14 at 17:05
  • Yeah, it's new. I'm at a conference this week but next week I"m going to tackle this.
    – Brian Peat
    Jul 18 '14 at 18:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.