Update src/pretix/helpers/thumb.py

Co-authored-by: Richard Schreiber <schreiber@rami.io>

src/pretix/helpers/templatetags/thumb.py

@@ -22,10 +22,11 @@
 import logging
 
 from django import template
+from django.core.cache import cache
 from django.core.files.storage import default_storage
 
 from pretix import settings
-from pretix.helpers.thumb import get_thumbnail
+from pretix.helpers.thumb import get_srcset_sizes, get_thumbnail
 
 register = template.Library()
 logger = logging.getLogger(__name__)
@@ -46,3 +47,30 @@ def thumb(source, arg):
         # default_storage.url works for all files in NanoCDNStorage. For others, this may return an invalid URL.
         # But for a fallback, this can probably be accepted.
         return source.url if hasattr(source, 'url') else default_storage.url(str(source))
+
+
+@register.filter
+def thumbset(source, arg):
+    cache_key = f"thumbset:{source}:{arg}"
+    cached_thumbset = cache.get(cache_key)
+    if cached_thumbset is not None:
+        return cached_thumbset
+    formats = list(set().union(
+        settings.PILLOW_FORMATS_IMAGE,
+        settings.PILLOW_FORMATS_QUESTIONS_FAVICON,
+        settings.PILLOW_FORMATS_QUESTIONS_IMAGE
+    ))
+
+    srcs = []
+    if not cached_thumbset:
+        for thumbsize, factor in get_srcset_sizes(arg):
+            try:
+                t = get_thumbnail(source, thumbsize, formats=formats, skip_if_limited_by_input=True)
+                if t:
+                    srcs.append(f"{t.thumb.url} {factor}")
+            except:
+                logger.exception(f'Failed to create thumbnail of {source} at {thumbsize}')
+
+    srcset = ", ".join(srcs)
+    cache.set(cache_key, srcset, timeout=3600)
+    return srcset

src/pretix/helpers/thumb.py

@@ -96,7 +96,27 @@ def get_minsize(size):
     return (min_width, min_height)
 
 
+def get_srcset_sizes(size):
+    w, h = size.split("x")
+    for m in (2, 3):
+        if w.endswith("_"):
+            new_w = f"{int(w.rstrip('_')) * m}_"
+        else:
+            new_w = f"{int(w) * m}"
+        if h.endswith("_"):
+            new_h = f"{int(h.rstrip('_')) * m}_"
+        elif h.endswith("^"):
+            new_h = f"{int(h.rstrip('^')) * m}^"
+        else:
+            new_h = f"{int(h) * m}"
+
+        yield f"{new_w}x{new_h}", f"{m}x"
+
+
 def get_sizes(size, imgsize):
+    """
+    :return: Tuple of (new_size, crop_box, size_limited_by_input)
+    """
     crop = False
     if size.endswith('^'):
         crop = True
@@ -112,37 +132,48 @@ def get_sizes(size, imgsize):
     else:
         size = [int(size), int(size)]
 
+    wfactor = min(1, size[0] / imgsize[0])
+    hfactor = min(1, size[1] / imgsize[1])
+    limited_by_input = size[1] > imgsize[1] and size[0] > imgsize[0]
+
     if crop:
         # currently crop and min-size cannot be combined
-        wfactor = min(1, size[0] / imgsize[0])
-        hfactor = min(1, size[1] / imgsize[1])
         if wfactor == hfactor:
-            return (int(imgsize[0] * wfactor), int(imgsize[1] * hfactor)), \
+            return (
-                   (0, int((imgsize[1] * wfactor - imgsize[1] * hfactor) / 2),
+                (int(imgsize[0] * wfactor), int(imgsize[1] * hfactor)),
-                    imgsize[0] * hfactor, int((imgsize[1] * wfactor + imgsize[1] * wfactor) / 2))
+                (0, int((imgsize[1] * wfactor - imgsize[1] * hfactor) / 2),
+                 imgsize[0] * hfactor, int((imgsize[1] * wfactor + imgsize[1] * wfactor) / 2)),
+                limited_by_input
+            )
         elif wfactor > hfactor:
-            return (int(size[0]), int(imgsize[1] * wfactor)), \
+            return (
-                   (0, int((imgsize[1] * wfactor - size[1]) / 2), size[0], int((imgsize[1] * wfactor + size[1]) / 2))
+                (int(size[0]), int(imgsize[1] * wfactor)),
+                (0, int((imgsize[1] * wfactor - size[1]) / 2), size[0], int((imgsize[1] * wfactor + size[1]) / 2)),
+                limited_by_input
+            )
         else:
-            return (int(imgsize[0] * hfactor), int(size[1])), \
+            return (
-                   (int((imgsize[0] * hfactor - size[0]) / 2), 0, int((imgsize[0] * hfactor + size[0]) / 2), size[1])
+                (int(imgsize[0] * hfactor), int(size[1])),
+                (int((imgsize[0] * hfactor - size[0]) / 2), 0, int((imgsize[0] * hfactor + size[0]) / 2), size[1]),
+                limited_by_input
+            )
     else:
-        wfactor = min(1, size[0] / imgsize[0])
-        hfactor = min(1, size[1] / imgsize[1])
-
         if wfactor == hfactor:
-            return (int(imgsize[0] * hfactor), int(imgsize[1] * wfactor)), None
+            return (int(imgsize[0] * hfactor), int(imgsize[1] * wfactor)), None, limited_by_input
         elif wfactor < hfactor:
-            return (size[0], int(imgsize[1] * wfactor)), None
+            return (size[0], int(imgsize[1] * wfactor)), None, limited_by_input
         else:
-            return (int(imgsize[0] * hfactor), size[1]), None
+            return (int(imgsize[0] * hfactor), size[1]), None, limited_by_input
 
 
 def resize_image(image, size):
+    """
+    :return: Tuple of (new_image, size_limited_by_input)
+    """
     # before we calc thumbnail, we need to check and apply EXIF-orientation
     image = ImageOps.exif_transpose(image)
 
-    new_size, crop = get_sizes(size, image.size)
+    new_size, crop, limited_by_input = get_sizes(size, image.size)
     image = image.resize(new_size, resample=Resampling.LANCZOS)
     if crop:
         image = image.crop(crop)
@@ -162,10 +193,10 @@ def resize_image(image, size):
 
         image = image.crop((new_x, new_y, new_x + new_width, new_y + new_height))
 
-    return image
+    return image, limited_by_input
 
 
-def create_thumbnail(source, size, formats=None):
+def create_thumbnail(source, size, formats=None, skip_if_limited_by_input=False):
     source_name = str(source)
 
     # HACK: this ensures that the file is opened in binary mode, which is not guaranteed otherwise, esp. for
@@ -181,10 +212,17 @@ def create_thumbnail(source, size, formats=None):
         raise ThumbnailError('Could not load image')
 
     frames = []
+    any_limited_by_input = False
     durations = []
     for f in ImageSequence.Iterator(image):
         durations.append(f.info.get("duration", 1000))
-        frames.append(resize_image(f, size))
+        img, limited_by_input = resize_image(f, size)
+        any_limited_by_input = any_limited_by_input or limited_by_input
+        frames.append(img)
+
+    if any_limited_by_input and skip_if_limited_by_input:
+        return
+
     image_out = frames[0]
     save_kwargs = {}
     source_ext = os.path.splitext(source_name)[1].lower()
@@ -223,10 +261,10 @@ def create_thumbnail(source, size, formats=None):
     return t
 
 
-def get_thumbnail(source, size, formats=None):
+def get_thumbnail(source, size, formats=None, skip_if_limited_by_input=False):
     # Assumes files are immutable
     try:
         source_name = str(source)
         return Thumbnail.objects.get(source=source_name, size=size)
     except Thumbnail.DoesNotExist:
-        return create_thumbnail(source, size, formats=formats)
+        return create_thumbnail(source, size, formats=formats, skip_if_limited_by_input=skip_if_limited_by_input)

src/pretix/presale/templates/pretixpresale/event/base.html

@@ -85,12 +85,14 @@
             {% if event_logo and event_logo_image_large %}
                 <a href="{% eventurl event "presale:event.index" cart_namespace=cart_namespace|default_if_none:"" %}"
                    title="{% trans 'Homepage' %}">
-                    <img src="{{ event_logo|thumb:'1170x5000' }}" alt="{{ event.name }}" class="event-logo" />
+                    <img src="{{ event_logo|thumb:'1170x5000' }}" srcset="{{ event_logo|thumbset:'1170x5000' }}"
+                         alt="{{ event.name }}" class="event-logo" />
                 </a>
             {% elif event_logo %}
                 <a href="{% eventurl event "presale:event.index" cart_namespace=cart_namespace|default_if_none:"" %}"
                    title="{% trans 'Homepage' %}">
-                    <img src="{{ event_logo|thumb:'5000x120' }}" alt="{{ event.name }}" class="event-logo" />
+                    <img src="{{ event_logo|thumb:'5000x120' }}" srcset="{{ event_logo|thumbset:'5000x120' }}"
+                         alt="{{ event.name }}" class="event-logo" />
                 </a>
             {% else %}
                 <h1>

src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html

@@ -48,7 +48,8 @@
                                         {# Yes, double-escape to prevent XSS in lightbox #}
                                         data-lightbox="{{ item.id }}">
                                     <img src="{{ item.picture|thumb:'60x60^' }}"
-                                            alt="{{ item.name }}"/>
+                                         srcset="{{ item.picture|thumbset:'60x60^' }}"
+                                         alt="{{ item.name }}"/>
                                 </a>
                             {% endif %}
                             <div class="product-description {% if item.picture %}with-picture{% endif %}">
@@ -239,7 +240,8 @@
                                     {# Yes, double-escape to prevent XSS in lightbox #}
                                     data-lightbox="{{ item.id }}">
                                 <img src="{{ item.picture|thumb:'60x60^' }}"
-                                        alt="{{ item.name }}"/>
+                                     srcset="{{ item.picture|thumbset:'60x60^' }}"
+                                     alt="{{ item.name }}"/>
                             </a>
                         {% endif %}
                         <div class="product-description {% if item.picture %}with-picture{% endif %}">

src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html

@@ -39,6 +39,7 @@
                                    data-lightbox="{{ item.id }}"
                                    aria-label="{% blocktrans trimmed with item=item.name %}Show full-size image of {{ item }}{% endblocktrans %}">
                                     <img src="{{ item.picture|thumb:'60x60^' }}"
+                                         srcset="{{ item.picture|thumbset:'60x60^' }}"
                                          alt="{{ item.name }}"/>
                                 </a>
                             {% endif %}
@@ -258,6 +259,7 @@
                                data-lightbox="{{ item.id }}"
                                aria-label="{% blocktrans trimmed with item=item.name %}Show full-size image of {{ item }}{% endblocktrans %}">
                                 <img src="{{ item.picture|thumb:'60x60^' }}"
+                                     srcset="{{ item.picture|thumbset:'60x60^' }}"
                                      alt="{{ item.name }}"/>
                             </a>
                         {% endif %}

src/pretix/presale/templates/pretixpresale/event/voucher.html

@@ -93,7 +93,8 @@
                                                data-lightbox="{{ item.id }}"
                                                aria-label="{% blocktrans trimmed with item=item.name %}Show full-size image of {{ item }}{% endblocktrans %}">
                                             <img src="{{ item.picture|thumb:'60x60^' }}"
-                                                        alt="{{ item.name }}"/>
+                                                 srcset="{{ item.picture|thumbset:'60x60^' }}"
+                                                 alt="{{ item.name }}"/>
                                             </a>
                                         {% endif %}
                                         <div class="product-description {% if item.picture %}with-picture{% endif %}">
@@ -274,6 +275,7 @@
                                            data-lightbox="{{ item.id }}"
                                            aria-label="{% blocktrans trimmed with item=item.name %}Show full-size image of {{ item }}{% endblocktrans %}">
                                             <img src="{{ item.picture|thumb:'60x60^' }}"
+                                                 srcset="{{ item.picture|thumbset:'60x60^' }}"
                                                  alt="{{ item.name }}"/>
                                         </a>
                                     {% endif %}

src/pretix/presale/templates/pretixpresale/organizers/base.html

@@ -53,13 +53,15 @@
             {% endif %}
             {% if organizer_logo and organizer.settings.organizer_logo_image_large %}
                 <a href="{% eventurl organizer "presale:organizer.index" %}" title="{{ organizer.name }}">
-                    <img src="{{ organizer_logo|thumb:'1170x5000' }}" alt="{{ organizer.name }}"
+                    <img src="{{ organizer_logo|thumb:'1170x5000' }}" srcset="{{ organizer_logo|thumbset:'1170x5000' }}"
+                         alt="{{ organizer.name }}"
                          class="organizer-logo" />
                 </a>
             {% elif organizer_logo %}
                 <a href="{% eventurl organizer "presale:organizer.index" %}" title="{{ organizer.name }}">
-                    <img src="{{ organizer_logo|thumb:'5000x120' }}" alt="{{ organizer.name }}"
+                    <img src="{{ organizer_logo|thumb:'5000x120' }}" srcset="{{ organizer_logo|thumbset:'5000x120' }}"
-                            class="organizer-logo" />
+                         alt="{{ organizer.name }}" 
+                         class="organizer-logo" />
                 </a>
             {% else %}
                 <h1><a href="{% eventurl organizer "presale:organizer.index" %}" class="no-underline">{{ organizer.name }}</a></h1>

src/tests/helpers/test_thumb.py

@@ -19,92 +19,213 @@
 # You should have received a copy of the GNU Affero General Public License along with this program.  If not, see
 # <https://www.gnu.org/licenses/>.
 #
+import io
+import re
+
+import pytest
+from django.core.files.base import ContentFile
+from django.core.files.storage import default_storage
 from PIL import Image
 
+from pretix.helpers.templatetags.thumb import thumbset
 from pretix.helpers.thumb import resize_image
 
 
 def test_no_resize():
     img = Image.new('RGB', (40, 20))
-    img = resize_image(img, "100x100")
+    img, limited_by_input = resize_image(img, "100x100")
     width, height = img.size
+    assert limited_by_input
     assert width == 40
     assert height == 20
 
     img = Image.new('RGB', (40, 20))
-    img = resize_image(img, "100x100^")
+    img, limited_by_input = resize_image(img, "100x100^")
     width, height = img.size
+    assert limited_by_input
+    assert width == 40
+    assert height == 20
+
+    img = Image.new('RGB', (40, 20))
+    img, limited_by_input = resize_image(img, "40x20^")
+    width, height = img.size
+    assert not limited_by_input
     assert width == 40
     assert height == 20
 
 
 def test_resize():
     img = Image.new('RGB', (40, 20))
-    img = resize_image(img, "10x10")
+    img, limited_by_input = resize_image(img, "10x10")
     width, height = img.size
+    assert not limited_by_input
     assert width == 10
     assert height == 5
 
     img = Image.new('RGB', (40, 20))
-    img = resize_image(img, "100x10")
+    img, limited_by_input = resize_image(img, "100x10")
     width, height = img.size
+    assert not limited_by_input
     assert width == 20
     assert height == 10
 
     img = Image.new('RGB', (40, 20))
-    img = resize_image(img, "10x100")
+    img, limited_by_input = resize_image(img, "10x100")
     width, height = img.size
+    assert not limited_by_input
     assert width == 10
     assert height == 5
 
 
 def test_crop():
     img = Image.new('RGB', (40, 20))
-    img = resize_image(img, "10x10^")
+    img, limited_by_input = resize_image(img, "10x10^")
     width, height = img.size
+    assert not limited_by_input
     assert width == 10
     assert height == 10
 
+    img = Image.new('RGB', (40, 20))
+    img, limited_by_input = resize_image(img, "40x20^")
+    width, height = img.size
+    assert not limited_by_input
+    assert width == 40
+    assert height == 20
+
+    img = Image.new('RGB', (40, 20))
+    img, limited_by_input = resize_image(img, "50x30^")
+    width, height = img.size
+    assert limited_by_input
+    assert width == 40
+    assert height == 20
+
 
 def test_exactsize():
     img = Image.new('RGB', (6912, 3456))
-    img = resize_image(img, "600_x5000")
+    img, limited_by_input = resize_image(img, "600_x5000")
     width, height = img.size
+    assert not limited_by_input
     assert width == 600
     assert height == 300
 
     img = Image.new('RGB', (60, 20))
-    img = resize_image(img, "10_x10")
+    img, limited_by_input = resize_image(img, "10_x10")
     width, height = img.size
+    assert not limited_by_input
     assert width == 10
     assert height == 3
 
     img = Image.new('RGB', (10, 20))
-    img = resize_image(img, "10_x10")
+    img, limited_by_input = resize_image(img, "10_x10")
     width, height = img.size
+    assert not limited_by_input
     assert width == 10
     assert height == 10
 
     img = Image.new('RGB', (60, 20))
-    img = resize_image(img, "10x10_")
+    img, limited_by_input = resize_image(img, "10x10_")
     width, height = img.size
+    assert not limited_by_input
     assert width == 10
     assert height == 10
 
     img = Image.new('RGB', (20, 60))
-    img = resize_image(img, "10x10_")
+    img, limited_by_input = resize_image(img, "10x10_")
     width, height = img.size
+    assert not limited_by_input
     assert width == 3
     assert height == 10
 
     img = Image.new('RGB', (20, 60))
-    img = resize_image(img, "10_x10_")
+    img, limited_by_input = resize_image(img, "10_x10_")
     width, height = img.size
+    assert not limited_by_input
     assert width == 10
     assert height == 10
 
     img = Image.new('RGB', (20, 60))
-    img = resize_image(img, "100_x100_")
+    img, limited_by_input = resize_image(img, "100_x100_")
     width, height = img.size
+    assert limited_by_input
     assert width == 100
     assert height == 100
+
+    img = Image.new('RGB', (20, 60))
+    img, limited_by_input = resize_image(img, "20_x60_")
+    width, height = img.size
+    assert not limited_by_input
+    assert width == 20
+    assert height == 60
+
+
+def _create_img(size):
+    img = Image.new('RGB', size)
+    with io.BytesIO() as output:
+        img.save(output, format="PNG")
+        contents = output.getvalue()
+    return default_storage.save("_".join(str(a) for a in size) + ".png", ContentFile(contents))
+
+
+@pytest.mark.django_db
+def test_thumbset():
+    # Product picture example
+    img = _create_img((60, 60))
+    assert not thumbset(img, "60x60^")
+
+    img = _create_img((110, 110))
+    assert not thumbset(img, "60x60^")
+
+    img = _create_img((120, 120))
+    assert re.match(
+        r".*\.120x120c\.png 2x$",
+        thumbset(img, "60x60^"),
+    )
+
+    img = _create_img((150, 150))
+    assert re.match(
+        r".*\.120x120c\.png 2x$",
+        thumbset(img, "60x60^"),
+    )
+
+    img = _create_img((180, 180))
+    assert re.match(
+        r".*\.120x120c\.png 2x, .*\.180x180c.png 3x$",
+        thumbset(img, "60x60^"),
+    )
+
+    img = _create_img((500, 500))
+    assert re.match(
+        r".*\.120x120c\.png 2x, .*\.180x180c.png 3x$",
+        thumbset(img, "60x60^"),
+    )
+
+    # Event logo (large version) example
+    img = _create_img((400, 200))
+    assert not thumbset(img, "1170x5000")
+
+    img = _create_img((1170, 120))
+    assert not thumbset(img, "1170x5000")
+
+    img = _create_img((2340, 240))
+    assert re.match(
+        r".*\.2340x10000\.png 2x$",
+        thumbset(img, "1170x5000"),
+    )
+
+    img = _create_img((2925, 180))
+    assert re.match(
+        r".*\.2340x10000\.png 2x$",
+        thumbset(img, "1170x5000"),
+    )
+
+    img = _create_img((3510, 360))
+    assert re.match(
+        r".*\.2340x10000\.png 2x, .*\.3510x15000.png 3x$",
+        thumbset(img, "1170x5000"),
+    )
+
+    img = _create_img((4680, 480))
+    assert re.match(
+        r".*\.2340x10000\.png 2x, .*\.3510x15000.png 3x$",
+        thumbset(img, "1170x5000"),
+    )