stefanfoulis/cmsplugin-filer — pull request #146 by mkoistinen (2014-09-15 04:04:59+00:00)
Title: Add Retina support

Solves #77

Yes, this is an opinionated PR, but we're in the latter half of 2014 and we still don't have Retina support for cmsplugin_filer_image.

This is a relatively simple change that does the following:
1. Adds a checkbox in FilerImage model/plugin labeled "Use Hi-DPI image pair";
2. When this is checked, the template for filer will add an image attribute data-src with the normal source, and data-src2x with the retina image source. The normal img tags src will reference a 1x1 transparent GIF in cmsplugin-filer's static files;
3. Add this jQuery to the bottom of the page:
```` Javascript
(function($){
var use_hidpi = (window.devicePixelRatio > 1.5);
$('img[data-src][data-src2x]').each(function(){
var $img = $(this);
$img.attr('src', use_hidpi ? $img.data('src2x') : $img.data('src'));
});
}(window.jQuery));
````

A case can be made to make this pure JS. Any takers?

Yes, there will be issues with non-JS environments... most likely screen readers, which won't need/want the images anyway. Also, there's a myth that some people don't enable JS. I've checked on a pretty busy site... there were exactly zero non-bots (i.e., real people) who disabled their JS. Sure, there are cases where the site's audience is likely to not use JS, in these cases, the web developer should simply not check the box labeled: "Use Hi-DPI image pair" checkbox and the behavior will just remain as it is now.