Retina display implementation

In my opinion the Drupal way would be very close to what you have suggested, essentially image styles is the way to go.

Maybe you could extend upon the following?

https://drupal.org/project/resp_img

Does https://drupal.org/project/picture support custom media queries? In that case it can be done like this example: https://github.com/scottjehl/picturefill#hd-media-queries

    <span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        <span data-src="small.jpg"></span>
        <span data-src="small_x2.jpg"      data-media="(min-device-pixel-ratio: 2.0)"></span>
        <span data-src="medium.jpg"        data-media="(min-width: 400px)"></span>
        <span data-src="medium_x2.jpg"     data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)"></span>
        <span data-src="large.jpg"         data-media="(min-width: 800px)"></span>
        <span data-src="large_x2.jpg"      data-media="(min-width: 800px) and (min-device-pixel-ratio: 2.0)"></span>
        <span data-src="extralarge.jpg"    data-media="(min-width: 1000px)"></span>
        <span data-src="extralarge_x2.jpg" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></span>

        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
        <noscript>
            <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        </noscript>
    </span>

What I wanted to say was that retina support is a task for the picture module. I know about data-src-retina as I read the code for unveil.js, but to add support for that in the unveil.module would be to reimplement a poor-mans version of the picture module. As long as there is compatibility between the picture module and unveil (which I believe there is now, with the latest patch in #2211575) there already is retina support. We are already using it in production.

Yes, I understand that the only purpose of the module is to provide integration between unveil.js and drupal. My main point though, I don't know if I made my self clear enough, was that I don't think that you need (or should) add support for the retina feature of unveil.js, but instead provide that feature through the picture integration. So once you have a working integration between unveil and picture, this issue can be closed (I think). But perhaps you already agree on this?

To implement this you would probably have to (as you probably are aware of):

• Add an admin interface for creating image style "profiles" of some sort with one retina style associated with the corresponding non-retina image style.
• Either add a formatter, or performing a lookup based on the current style in the theme function that will get the retina variant.

This is exactly what the picture module does (using formatters) and more! Apart from this it also has support for any pixel-ratio, not just > 1 as in jquery.unveil.js.

I see no reason why you would want to bloat Unveil with functionally that is provided by another module.

The only objections I can think of are:

• The UI of the picture module is poorly designed and a cause for user confusion, you would prefer a simpler interface, not forcing the user to use a complex module.

Agreed, but the writing some simple instructions how to get retina support by using the picture module could address this. You would basically just follow this https://drupal.org/node/1904690 guide, but instead of 'min-width: xx' just have one breakpoint with "all" (min-width: 0px will also work) and check the multipliers you want support for. And once you get the hang of it, picture is NOT a very complex module at all.

• You "just" want support for retina, not confuse the user with other things concerning responsive images.

Well, this is a valid point. But first of you will not get as good support for retina (no custom pixel ratios) as the picture module provides, and if a user later on also want responsive images, the two configurations are incompatible and he/she would have to move all the settings in Unveil to the Picture settings format, instead of simply just adding another breakpoint.

I would love to this this functionality added to the Drupal Unveil module as retina support is very important.

Okay why don't we take a look at the way Retina.js works, it searches for the same image with @2x appended to the filename. You need to output this as a variable that replaces the "data-src-retina" attribute, if an @2x is not found then it doesn't need to perform anything. This would support the standard functionality of Unveil.js without overcomplicating things.

It would be down to yourself to upload your own @2x images, this could be separate functionality for a separate module but at least this module would be complete.

Me personally I would simply add another image field to my content types specifically for retina images. Please could you respond and let me know if this solution is convenient as it would be the most efficient method of completing the functionality.

@lorique

In my struggle to make this module work the way I would have hoped I have created a fix for my project. I have modified the code in module.info as follows:

  // Return image URL
  $filename = file_create_url($variables['path']);
  
  // Find the dot in the filename
  $extension = strrpos($filename, '.');
  
  // Create variable to modify original filename to retina file name
  $retinaname = substr($filename, 0, $extension) . '@2x' . substr($filename, $extension);

  $attributes = array('title' => $variables['title'], 'alt' => $variables['alt']);
  // Attributes.
  $attributes += $variables['attributes'];
  $attributes['src'] = file_create_url(drupal_get_path('module', 'unveil') . '/image_placeholder.gif');
  $attributes['data-src'] = $filename;
  $attributes['data-src-retina'] = $retinaname;

This will simply add the @2x image URL to the supported 'data-src-retina' attribute allowing Unveil.js to handle the rest. I currently do not have a fallback support when no retina image is available but in the case of my project I want all images to be retina supported anyway. If we can create a fall back then I think this task will be complete.

Now I just need to find a solution so that retina images can be uploaded to Drupal creating the standard and retina versions for me to make things easier. I would love a solution like imgix.com or a similar system to be integrated with Drupal so that you can upload 1 image and the system will create a URL for the retina image saving you storring 2 files for each image e.g. - cdn.yourwebsite.com/image.jpg?=retinaimage and cdn.yourwebsite.com/image.jpg.