Retina Images for WordPress

- by Gerasimos Tsiamalos | Posted under: Freebies, Plugins

retina

Here’s our latest plugin that lets you generate and serve retina friendly images to your visitors. Let’s see what is all about.

A few days ago Matt wrote on his personal blog about the double-resolution images his visitor will see if they visit his photo galleries using a device equipped with retina display (like the new MacBook Pro). I tried to figure out how he did it and while i am not sure he is using this technique, i found this amazing script that lets you do exactly that. It serves different images based on the device being used by the viewer. It takes like five minutes to set things up so i tried to set it up on a testing WordPress installation. It worked.

Why not make a WordPress plugin out of it?

My next thought was exactly that but i didn’t want to manually create double-resolution images. I wanted to automatically create these images every time i upload an image to WordPress like this:

The script in order to serve a double-resolution image needs an image file with the same filename of the original, plus the “@2x” before the extension of the file. Every time you upload a new image, the plugin will take care of that. Cool eh?

Note: As you can see the plugin will create x2 images for every image size set in Settings > Media including any custom images sizes set in your theme with add_image_size(). If the source image is not big enough though, like WordPress, it will ignore image sizes with higher dimensions than the original one. So if you have set really high resolution image sizes make sure to use high resolution source images as well.

What about my already uploaded files?

Once the plugin is activated, you can regenerate your images using the amazing Regenerate Thumbnails plugin and double-resolution images will be created as well. The note above is valid for this process as well.

Installation

Download the plugin, upload it and activate it. That’s it. Now every time you upload an image, a new double-resolution version will be created and served on Retina displays.

An extra step if .htaccess isn’t writable

If your .htaccess is not writable then there’s one extra step. You need to edit (or create one if there isn’t one already created for you) and paste the following lines:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^(.*)\.(jpe?g|gif|png)$ /home/user/public_html/wordpressinstallation/wp-content/plugins/ci-retina/retinaimages.php [L}
</IfModule>

Make sure to change the long path displayed with your path and if your WordPress is installed in a subdirectory change the second line from

RewriteBase /

to

RewriteBase /subfolder

Feedback

Your feedback is crucial at this stage. So if you find a bug please do give us a shout.

Requirements

  • WordPress 3.3+
  • mod_rewrite

Credits

  • Big Applaud goes to Jeremy Worboys for his Retina images script.
  • The rest of the CSSIgniter crew because they can make things work.

18 thoughts on “Retina Images for WordPress

  1. Hello man and thanks for your work and your reactivity, but it visibly don’t work on WordPress 3.4 :/

    All my images or not found. And the path in .htaccesse is correct … :/

      • I really don’t understand why, but when I activate your plug-in my .htaccess change from this :

        RewriteEngine On
        RewriteBase /lab/wordpress34
        RewriteRule ^index\.php$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.php [L]

        to this:

        RewriteEngine On
        RewriteBase /lab/wordpress34/
        RewriteRule ^(.*)\.(jpe?g|gif|png)$ /homepages/9/d327660227/htdocs/lab/wordpress34/wp-content/plugins/ci-retina/retinaimages.php [L]

        The path is okay, @2x are create, Js is on my header but no images on my front AND back office.

        I try on WP 3.2, 3.3.1, 3.4, at the roots and in this folder, same problem … :/
        That’s really strange.

        • Can you try editing your .htaccess and confirm that the RewriteBase rule ( RewriteBase /lab/wordpress34/ ) is the same, both on BEGIN WordPress and BEGIN CI_RETINA sections of the file, preferably with a slash at the end of the path.
          Also, keep in mind that depending on you host, changes in .htaccess may not be reflected immediately.

          • yes the RewriteBase rule are the same in BEGIN WordPress and BEGIN CI_RETINA, and I’ve got the same problem with the plugin by Jordy Meow.
            Maybe my host ? 1&1 ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>