Configuring RoyalSlider for Retina

I’ve expressed my love for the RoyalSlider WordPress plugin before, but it takes a little massaging to get it to fully work with retina displays. This walkthrough is intended for non-technical users and uses two completely free WordPress plugins.

Retinafying the Slider Image

The first step is to make the main image of the slider retina compatible. I use Jordy Meow’s WP Retina @2x plugin. This plugin uses the excellent retina.js script and automatically creates @2x versions of all your images for all your image sizes if they are of sufficient resolution.

Getting RoyalSlider to display these @2x images automatically is really simple.

Image options

  • Lazy loading: Check

Miscellaneous

  • Slides to preload: Number of slides in your slider

The reason we need to preload these images is that retina.js looks for image files, searches for an @2x version, and if it finds one, replaces the standard res image with the retina image. If RoyalSlider doesn’t preload the images, retina.js won’t replace them. The downside is that this will slow page load times. I think it’s justifiable, but that may not always be the case.

Retinafying the Thumbnails

To swap the thumbnails to retina, we need to make a new image size, and to do that we are going to use Rahe’s Simple Image Sizes plugin. If you’re more technically inclined, you can also add this directly to your theme. We need to add this size because RoyalSlider doesn’t officially register the image size with WordPress, so WP Retina 2x won’t automatically create @2x versions of the images.

Once you have installed the plugin, in WordPress:

Settings -> Media

  • Click: Add a new size of thumbnail
  • Name the new size
  • Click: Validate image size name
  • Enter width and height information, default thumbnail size is 96×72, which will be fine in most cases.
  • Choose a public name, you can use the size name you entered before.
  • Click Crop. Thumbnails, by default, are cropped, meaning they’ll fit the full height and width of the image. Unless you have abnormally wide or tall images, or images that have essential information that is being cropped, check this button.
  • If you want to be able to insert this image size into posts with the media menu, click “Show in post insertion,” though this probably isn’t something you want.
  • Click validate.

I have a site where the images in a slider are particularly wide and the cropping of the thumbnails looks terrible. I just made a new thumbnail size of 126×72 and the problem was solved. If you are on a storage-limited server, you may want to limit the number of image sizes you create. However, 126×72, or even the 252×144 @2x version have small file sizes.

Next we need to generate @2x versions of these images, so we go back to the WP Retina 2x plugin:

Media -> WP Retina 2x

  • Click: Generate

and that’s it! Retina thumbnails!

Retinafying the Interface

This step is going to require a slightly higher level of technical knowledge. Also, I have only created retina interface elements for the “Light” theme, as this is the one I use.

The first thing we need to do is add an @2x version of the sprite image containing all the interface elements. Download this file and place it in /wp-content/plugins/new-royalslider/lib/royalslider/skins/default-inverted/ add the following to the bottom of rs-default-inverted.css in the same directory:

Please note line 38 and modify it accordingly.

You may also want to include a retina preloader, the spinning graphic that displays as the slides load. The downside here, again, is that a retina preloader is going to load more data, but, again, it isn’t that much in comparison to the retina images the slider will be loading. Additionally, since we have to preload all the retina images this preloader will display for longer than the non-retina version.

I have created two new images for the preloader animation using preloaders.net, that you can download here and here. You can easily make your own: a 20×20 file named preloader.gif and a 40×40 file named preloader@2x.gif. Put those files in /wp-content/plugins/new-royalslider/lib/skins/preloaders/ and add this to the rs-default-inverted.css we modified earlier.

And that’s it! Everything is retinafied!

RoyalSlider is also available as a jQuery plugin, I have no idea if anything written here applies.

2013/02/27

[jpshare]

Comments are closed.