Add Retina support

cmsplugin_filer_image/cms_plugins.py

@@ -33,6 +33,7 @@ class FilerImagePlugin(CMSPluginBase):
                 ('width', 'height', 'crop', 'upscale'),
                 'thumbnail_option',
                 'use_autoscale',
+                'use_hidpi_pair',
             )
         }),
         (None, {
@@ -107,11 +108,13 @@ def render(self, context, instance, placeholder):
             self.TEMPLATE_NAME % 'default')
         )
         options = self._get_thumbnail_options(context, instance)
+        size = options.get('size', None)
         context.update({
             'instance': instance,
             'link': instance.link,
             'opts': options,
-            'size': options.get('size', None),
+            'size': size,
+            'double_size': tuple(map(lambda x: x * 2, size )),
             'placeholder': placeholder
         })
         return context

cmsplugin_filer_image/models.py

@@ -28,6 +28,8 @@ class FilerImage(CMSPlugin):
     alt_text = models.CharField(_("alt text"), null=True, blank=True, max_length=255)
     use_original_image = models.BooleanField(_("use the original image"), default=False,
         help_text=_('do not resize the image. use the original image instead.'))
+    use_hidpi_pair = models.BooleanField(_("create a pair of images for Retina/HiDPI."),
+            default=False)
     thumbnail_option = models.ForeignKey('ThumbnailOption', null=True, blank=True, verbose_name=_("thumbnail option"),
                                         help_text=_('overrides width, height, crop and upscale with values from the selected thumbnail option'))
     use_autoscale = models.BooleanField(_("use automatic scaling"), default=False,

cmsplugin_filer_image/templates/cmsplugin_filer_image/plugins/image/default.html

@@ -1,4 +1,4 @@
-{% load thumbnail filer_tags filer_image_tags %}{% spaceless %}
+{% load filer_tags filer_image_tags sekizai_tags staticfiles thumbnail %}{% spaceless %}
 {% comment %}
 	You may change the image size for special cases in your project by overriding
 	this template. There are a few size manipulation filters for this in
@@ -14,7 +14,21 @@
 
 {% if link %}<a href="{{ link }}"{% if instance.target_blank %} target="_blank"{% endif %} class="filer_image_link">{% endif %}
 {% if instance.image %}
-	{% if instance.use_original_image %}
+	{% if instance.use_hidpi_pair %}
+		{% thumbnail instance.image size crop=opts.crop upscale=opts.upscale subject_location=opts.subject_location as losrc %}
+		{% thumbnail instance.image double_size crop=opts.crop upscale=opts.upscale subject_location=opts.subject_location as hisrc %}
+		<img class="filer_image filer_image_hidpi {% if instance.alignment %}{{ instance.alignment }}{% endif %}" alt="{% if instance.alt %}{{ instance.alt }}{% endif %}" src="{% static "cmsplugin_filer_image/images/t.gif" %}" data-src="{{ losrc.url }}" data-src2x="{{ hisrc.url }}" {% if instance.width %} width="{{ instance.width }}"{% endif %}{% if instance.height %} height="{{ instance.height }}"{% endif %}{% if instance.caption %} title="{{ instance.caption }}"{% endif %} />
+		{% addtoblock "js" %}
+<script>
+(function($){$(function(){
+  var hidpi=(window.devicePixelRatio>1.5);
+  $('img[data-src][data-src2x]').each(function(){
+    var im=$(this);im.attr('src',hidpi?im.data('src2x'):im.data('src'));
+  });
+});}(jQuery));
+</script>
+		{% endaddtoblock %}
+	{% elif instance.use_original_image %}
 		<img class="filer_image {% if instance.alignment %}{{ instance.alignment }}{% endif %}" alt="{% if instance.alt %}{{ instance.alt }}{% endif %}" src="{{ instance.image.url }}"{% if instance.width %} width="{{ instance.width }}"{% endif %}{% if instance.height %} height="{{ instance.height }}"{% endif %}{% if instance.caption %} title="{{ instance.caption }}"{% endif %} />
 	{% else %}
 		{% thumbnail instance.image size crop=opts.crop upscale=opts.upscale subject_location=opts.subject_location as thumbnail %}