This project is not covered by Drupal’s security advisory policy.

Summary

Extends core image styles/effects by providing retina versions of any defined style, by simply adding @2x before the file extension, e.g. some-great-file@2x.png. The resulting image is double as wide as the width defined in the image style effect.

This module can’t do magic, so be aware that all source image widths should be at least double the width of your image style effect. The upsampling rules are taken from the effect setting, so if upsampling is disabled, the @2x derivative image will not be upsampled either. And visa versa. You can check Reports > recent log messages to look for retina images of poor quality; filter by module = auto_retina.

If you have a dependency on this module and you need a Drupal 8 version, please let me know by commenting on (or creating) the issue called “Drupal 8 Port”. I will prioritize those modules that have the most votes for Drupal 8 first over others.

What this module is not

  • This module will not detect retina devices.
  • This module will not output html tags for your images.
  • This module does not handle the front end of retina image handling.

What this module is

It simply provides the retina version of every image style you define, with not extra work on your part.

Requirements

  1. Depends on the Drupal 7 core image module.

Installation

  1. Install as usual, see http://drupal.org/node/70151 for further information.

Configuration

  1. This module leverages the administer image styles permission for making configuration changes.
  2. The suffix can be changed from the default @2x by visiting the configuration page.
  3. You can make these settings available to Javascript files by enabling the option in the advanced settings. This will provide a Drupal.settings.autoRetina object, and can be handy for exposing configuration to your js files that deal with retina images.

Suggested Use

Once enabled, visit the image url of any derivate image, modify the url by prepending the extension with ‘@2x’, and you should see the image double in width.

As an example, if the following produced a derivate image at 100px wide:

sites/default/files/styles/thumbnail/public/images/my-great-photo.jpg?itok=hpMKPMBm

You would change the url to this, and see an image at 200px wide:

sites/default/files/styles/thumbnail/public/images/my-great-photo@2x.jpg?itok=hpMKPMBm

Please note that you must include the itok param when visiting a derivate url for the first time. This is a requirement of the image module. See image_style_deliver() for more info, reading about image_allow_insecure_derivatives.

Poor Quality (and Recent log messages)

When a retina image is generated and the quality could be better with a larger source image, an entry will be made in the message log. In this way you can identify which images need larger originals to provide the best retina quality. To disable this feature add the following to settings.php.

$conf['auto_retina_log'] = FALSE;

Image Style Quality Module

Though not required, this module dovetails with the Image Style Quality Module module nicely in two ways. First, if you simply enable the Image Style Quality Module and visit the admin page for this module, you are presented with an option to diminish the overall quality of all retina images, generated for all styles. On the other hand, you may still use Image Style Quality Module on a per-style basis and this module will still apply the multiplier to those explicite style effects. The key point to note is that you do not need to add image style quality effects to each image style to take advantage of how this module integrates with Image Style Quality Module.

Uninstall

Be aware that when you uninstall this module, it will NOT delete the retina derivatives that it has created.

Developers

  1. auto_retina_image_style_create_derivative() is meant to replace image_style_create_derivative() in your code, if you wish to take advantage of the functionality of this module at a programattic level.

Design Decisions/Rationale

We needed a way to have @2x versions of the images on the server without extra work, without any extra configuration, absolutely turn-key. We did not need the front end handling of the retina images as this was already accomplished by other means. Current Drupal modules did not provide this use case.

Similar Modules

  1. https://www.drupal.org/project/hires_images
  2. https://www.drupal.org/project/retina
  3. https://www.drupal.org/project/retina_images
  4. https://www.drupal.org/project/foresight
  5. https://www.drupal.org/project/resp_img
Supporting organizations: 
Development

Project Information

Downloads