Provide hidpi versions of logos and product pictures (#3235)

Co-authored-by: Raphael Michel <michel@rami.io>
This commit is contained in:
Michael Stapelberg
2023-04-18 13:58:23 +02:00
committed by GitHub
parent 2427421945
commit 044d6720d2
6 changed files with 14 additions and 6 deletions

View File

@@ -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>

View File

@@ -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 %}">

View File

@@ -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 %}

View File

@@ -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 %}

View File

@@ -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 %}