Skip to content
This repository has been archived by the owner on Nov 27, 2019. It is now read-only.

Add Retina support #146

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion cmsplugin_filer_image/cms_plugins.py
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ class FilerImagePlugin(CMSPluginBase):
('width', 'height', 'crop', 'upscale'),
'thumbnail_option',
'use_autoscale',
'use_hidpi_pair',
)
}),
(None, {
Expand Down Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions cmsplugin_filer_image/models.py
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 %}
Expand Down