From 044d6720d2c9c6502a870f90799e18739ff3c4d3 Mon Sep 17 00:00:00 2001
From: Michael Stapelberg <stapelberg@users.noreply.github.com>
Date: Tue, 18 Apr 2023 13:58:23 +0200
Subject: [PATCH] Provide hidpi versions of logos and product pictures (#3235)

Co-authored-by: Raphael Michel <michel@rami.io>
---
 .../pretixbase/forms/widgets/thumbnailed_file_input.html    | 2 +-
 src/pretix/presale/templates/pretixpresale/event/base.html  | 4 ++--
 .../pretixpresale/event/fragment_addon_choice.html          | 6 ++++--
 .../pretixpresale/event/fragment_product_list.html          | 2 ++
 .../presale/templates/pretixpresale/event/voucher.html      | 4 +++-
 .../presale/templates/pretixpresale/organizers/base.html    | 2 ++
 6 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/pretix/base/templates/pretixbase/forms/widgets/thumbnailed_file_input.html b/src/pretix/base/templates/pretixbase/forms/widgets/thumbnailed_file_input.html
index de8adc9ee..a4c2e20a1 100644
--- a/src/pretix/base/templates/pretixbase/forms/widgets/thumbnailed_file_input.html
+++ b/src/pretix/base/templates/pretixbase/forms/widgets/thumbnailed_file_input.html
@@ -1,7 +1,7 @@
 {% load thumb %}
 {% if widget.is_initial %}{{ widget.initial_text }}: <a href="{{ widget.value.url }}">{{ widget.value }}</a>{% if not widget.required %}
     <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}">
-    <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>{% endif %}{% if widget.value.is_img %}<br><a href="{{ widget.value.url }}" data-lightbox="{{ widget.name }}"><img src="{{ widget.value|thumb:"200x100" }}" /></a>{% endif %}<br>
+    <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>{% endif %}{% if widget.value.is_img %}<br><a href="{{ widget.value.url }}" data-lightbox="{{ widget.name }}"><img src="{{ widget.value|thumb:"200x100" }}" srcset="{{ widget.value|thumb:"400x200" }} 2x, {{ widget.value|thumb:"600x300" }} 3x" /></a>{% endif %}<br>
     {{ widget.input_text }}:{% endif %}
 <input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>
 {% if widget.cachedfile %}<input type="hidden" name="{{ widget.hidden_name }}" value="{{ widget.cachedfile.id }}">{% endif %}
diff --git a/src/pretix/presale/templates/pretixpresale/event/base.html b/src/pretix/presale/templates/pretixpresale/event/base.html
index a3c2e48a8..84ebdc30b 100644
--- a/src/pretix/presale/templates/pretixpresale/event/base.html
+++ b/src/pretix/presale/templates/pretixpresale/event/base.html
@@ -71,12 +71,12 @@
             {% if event_logo and event_logo_image_large %}
                 <a href="{% eventurl event "presale:event.index" cart_namespace=cart_namespace|default_if_none:"" %}"
                    aria-label="{% trans 'Homepage' %}" title="{% trans 'Homepage' %}">
-                    <img src="{{ event_logo|thumb:'1170x5000' }}" alt="" class="event-logo" />
+                    <img src="{{ event_logo|thumb:'1170x5000' }}" srcset="{{ event_logo|thumb:'2340x5000' }} 2x, {{ event_logo|thumb:'3510x5000' }} 3x" alt="" class="event-logo" />
                 </a>
             {% elif event_logo %}
                 <a href="{% eventurl event "presale:event.index" cart_namespace=cart_namespace|default_if_none:"" %}"
                    aria-label="{% trans 'Homepage' %}" title="{% trans 'Homepage' %}">
-                    <img src="{{ event_logo|thumb:'5000x120' }}" alt="" class="event-logo" />
+                    <img src="{{ event_logo|thumb:'5000x120' }}" srcset="{{ event_logo|thumb:'5000x240' }} 2x, {{ event_logo|thumb:'5000x360' }} 3x" alt="" class="event-logo" />
                 </a>
             {% else %}
                 <h1>
diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html b/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
index 744b35ac1..73e287acc 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_addon_choice.html
@@ -47,7 +47,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|thumb:'120x120^' }} 2x, {{ item.picture|thumb:'180x180^' }} 3x"
+                                         alt="{{ item.name }}"/>
                                 </a>
                             {% endif %}
                             <div class="product-description {% if item.picture %}with-picture{% endif %}">
@@ -218,7 +219,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|thumb:'120x120^' }} 2x, {{ item.picture|thumb:'180x180^' }} 3x"
+                                     alt="{{ item.name }}"/>
                             </a>
                         {% endif %}
                         <div class="product-description {% if item.picture %}with-picture{% endif %}">
diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
index 8d7182beb..912fac475 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_product_list.html
@@ -25,6 +25,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|thumb:'120x120^' }} 2x, {{ item.picture|thumb:'180x180^' }} 3x"
                                          alt="{{ item.name }}"/>
                                 </a>
                             {% endif %}
@@ -222,6 +223,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|thumb:'120x120^' }} 2x, {{ item.picture|thumb:'180x180^' }} 3x"
                                      alt="{{ item.name }}"/>
                             </a>
                         {% endif %}
diff --git a/src/pretix/presale/templates/pretixpresale/event/voucher.html b/src/pretix/presale/templates/pretixpresale/event/voucher.html
index 1c7e3c249..911e353c6 100644
--- a/src/pretix/presale/templates/pretixpresale/event/voucher.html
+++ b/src/pretix/presale/templates/pretixpresale/event/voucher.html
@@ -129,7 +129,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|thumb:'120x120^' }} 2x, {{ item.picture|thumb:'180x180^' }} 3x"
+                                                 alt="{{ item.name }}"/>
                                             </a>
                                         {% endif %}
                                         <div class="product-description {% if item.picture %}with-picture{% endif %}">
@@ -286,6 +287,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|thumb:'120x120^' }} 2x, {{ item.picture|thumb:'180x180^' }} 3x"
                                                  alt="{{ item.name }}"/>
                                         </a>
                                     {% endif %}
diff --git a/src/pretix/presale/templates/pretixpresale/organizers/base.html b/src/pretix/presale/templates/pretixpresale/organizers/base.html
index 98357c420..a8de8d025 100644
--- a/src/pretix/presale/templates/pretixpresale/organizers/base.html
+++ b/src/pretix/presale/templates/pretixpresale/organizers/base.html
@@ -42,11 +42,13 @@
             {% 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 }}"
+                         srcset="{{ organizer_logo|thumb:'2340x5000' }} 2x, {{ organizer_logo|thumb:'3510x5000' }} 3x"
                          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 }}"
+                            srcset="{{ organizer_logo|thumb:'5000x240' }} 2x, {{ organizer_logo|thumb:'5000x360' }} 3x"
                             class="organizer-logo" />
                 </a>
             {% else %}