Updating For Retina

I spent some time recently upgrading the graphics on my photog­raphy site, Bob Rockefeller Photography. Some of it was pretty easy, some of it just needed a little code tweak to go with paired images (one at normal reso­lution, the other at high), and some of it took a little more work. Here’s what I did.

The favicon was the least trouble. I figured there was no need to do all the work John Gruber explained to make two different reso­lu­tions of the favicon to be served to normal and retina displays. So I just created the favicon at 32 x 32, in PNG format, and served that to all comers. Well… not to Internet Explorer visitors. IE doesn’t do PNG, so I put an old 16 x 16 ICO format favicon in the web site’s root directory for it. For everyone else, I called for the 32 x 32 favicon like this:

Why do we still have to jump through hoops for Internet Explorer? Never mind…

If you’d like the WordPress dash­board to use that favicon, too, add this to your theme’s functions.php file:

You can get more details from the article Understand the Favicon.

Next up was the site logo and that was pretty straight-forward. I went back to the source file (Abobe Illustrator) and saved it in SVG instead of PNG format. A little HTML work and that was done.

The accordion slider on the home page required a little more work, but after a couple of attempts that turned out to be dead ends, it wasn’t too bad. The root of the solution was to add the retina.js script to my site. This little gem checks your <img> tags for image files that look like image.jpg and swaps them out for ones that look like image@2x.jpg.

Create double reso­lution images for all your standard reso­lution files and save them in the same place with the now-common image@2x.jpg naming convention and the script takes over from there. The bonus is that this JavaScript takes care of ALL my images, even the ones in my port­folio galleries. For extra ease, add the WP Retina 2x plug-in and it will create all the right assets auto­mat­i­cally when you add media to your site. Done.

Last up was handling images loaded into a lightbox for viewing larger; the thumb­nails were taken care of with retina.js. I was using Lightbox Evolution which was perfect for what I wanted before, but when I attempted to contact the author to see if he was planning to make changes to accom­modate retina displays, I got no reply. A little detective work lead me to ColorBox.

At first ColorBox didn’t use low reso­lution images for regular displays and high-resolution images for retina displays. But a posting on the ColorBox GitHub page and a couple of emails exchanged with the author, Jack Moore, and it does now!

I could have just used the JavaScript directly, but instead chose to have the WordPress plug-in jQuery Lightbox For Native Galleries handle loading and config­u­ration. The plug-in has been discon­tinued in favor of features in JetPack, but it still works just fine. I do my devel­opment locally and JetPack does not work well in that envi­ronment. The only trick was that the plug-in comes with an older version of ColorBox, so I had to update that manually.

To get thinks working just as I wanted, I made a small change to jquery-lightbox-for-native-galleries.php so the JavaScript constructed looks like this:

That finished the work. All my images, in every size, are shown as normal reso­lution for normal displays and high-resolution for retina-class displays.