TheLovinator/ttvdrops
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add support for modern image formats (WebP and AVIF) and implement image conversion commands

Browse source
This commit is contained in:
Joakim Hellsén 2026-02-12 21:29:17 +01:00
commit 477bb753ae
Signed by: Joakim Hellsén
SSH key fingerprint: SHA256:/9h/CsExpFp+PRhsfA0xznFx2CGfTT5R/kpuFfUgEQk
15 changed files with 629 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

7
templates/twitch/badge_list.html
View file

@ -1,4 +1,5 @@
{% extends "base.html" %}
{% load image_tags %}
{% block title %}
Chat Badges - ttvdrops
{% endblock title %}
@ -14,11 +15,7 @@
<tr>
<td style="width: 40px;">
<a href="{% url 'twitch:badge_set_detail' set_id=data.set.set_id %}">
<img src="{{ badge.image_url_4x }}"
height="36"
width="36"
alt="{{ badge.title }}"
title="{{ badge.description }}" />
{% picture badge.image_url_4x alt=badge.title width=36 height=36 %}
</a>
</td>
<td>

10
templates/twitch/badge_set_detail.html
View file

@ -1,4 +1,5 @@
{% extends "base.html" %}
{% load image_tags %}
{% block title %}
{{ badge_set.set_id }} Badges - ttvdrops
{% endblock title %}
@ -31,14 +32,7 @@
<code>{{ badge.badge_id }}</code>
</td>
<td>
<img src="{{ badge.image_url_4x }}"
height="72"
width="72"
alt="{{ badge.title }}"
title="{{ badge.description }}"
style="width: 72px !important;
height: 72px !important;
object-fit: contain" />
{% picture badge.image_url_4x alt=badge.title width=72 height=72 style="width: 72px !important; height: 72px !important; object-fit: contain" %}
</td>
<td>{{ badge.title }}</td>
<td>{{ badge.description }}</td>

21
templates/twitch/campaign_detail.html
View file

@ -1,5 +1,6 @@
{% extends "base.html" %}
{% load static %}
{% load image_tags %}
{% block title %}
{{ campaign.clean_name }}
{% endblock title %}
@ -20,10 +21,7 @@
{% endfor %}
<!-- Campaign image -->
{% if campaign.image_best_url %}
<img height="160"
width="160"
src="{{ campaign.image_best_url }}"
alt="{{ campaign.name }}" />
{% picture campaign.image_best_url alt=campaign.name width=160 height=160 %}
{% endif %}
<!-- Campaign description -->
<p>{{ campaign.description|linebreaksbr }}</p>
@ -106,24 +104,13 @@
<td>
{% for benefit in drop.drop.benefits.all %}
{% if benefit.image_asset_url %}
<img height="160"
width="160"
loading="lazy"
style="object-fit: cover;
margin-right: 3px"
src="{{ benefit.image_best_url|default:benefit.image_asset_url }}"
alt="{{ benefit.name }}" />
{% picture benefit.image_best_url|default:benefit.image_asset_url alt=benefit.name width=160 height=160 style="object-fit: cover; margin-right: 3px" %}
{% endif %}
{% if benefit.distribution_type == "BADGE" and drop.awarded_badge %}
<div style="margin-top: 6px; font-size: 0.9em;">
<strong>Awards Badge:</strong>
<a href="{% url 'twitch:badge_set_detail' set_id=drop.awarded_badge.badge_set.set_id %}">
<img src="{{ drop.awarded_badge.image_url_2x }}"
alt="{{ drop.awarded_badge.title }} badge"
height="24"
width="24"
style="vertical-align: middle;
margin-right: 4px" />
{% picture drop.awarded_badge.image_url_2x alt=drop.awarded_badge.title|add:" badge" width=24 height=24 style="vertical-align: middle; margin-right: 4px" %}
{{ drop.awarded_badge.title }}
</a>
{% if drop.awarded_badge.description %}

14
templates/twitch/campaign_list.html
View file

@ -1,5 +1,7 @@
{% extends "base.html" %}
{% load static %}
{% load image_tags %}
{% load image_tags %}
{% block title %}
Drop Campaigns - Twitch Drops Tracker
{% endblock title %}
@ -53,11 +55,7 @@
<div style="display: flex; gap: 1rem;">
<div>
{% if game_group.grouper.box_art_best_url %}
<img src="{{ game_group.grouper.box_art_best_url }}"
loading="lazy"
alt="Box art for {{ game_group.grouper.display_name }}"
width="120"
height="160" />
{% picture game_group.grouper.box_art_best_url alt="Box art for "|add:game_group.grouper.display_name width=120 height=160 %}
{% else %}
<div style="width: 120px;
height: 160px;
@ -98,11 +96,7 @@
<a href="{% url 'twitch:campaign_detail' campaign.twitch_id %}"
style="text-decoration: none">
{% if campaign.image_best_url %}
<img src="{{ campaign.image_best_url }}"
alt="Campaign artwork for {{ campaign.name }}"
width="120"
height="120"
style="border-radius: 4px" />
{% picture campaign.image_best_url alt="Campaign artwork for "|add:campaign.name width=120 height=120 style="border-radius: 4px" %}
{% endif %}
<h4 style="margin: 0.5rem 0; text-align: left">{{ campaign.clean_name }}</h4>
</a>

13
templates/twitch/dashboard.html
View file

@ -1,5 +1,6 @@
{% extends "base.html" %}
{% load static %}
{% load image_tags %}
{% block title %}
Twitch drops
{% endblock title %}
@ -35,11 +36,7 @@ Hover over the end time to see the exact date and time.
</header>
<div style="display: flex; gap: 1rem;">
<div style="flex-shrink: 0;">
<img src="{{ game_data.box_art }}"
alt="Box art for {{ game_data.name }}"
width="200"
height="267"
style="border-radius: 8px" />
{% picture game_data.box_art alt="Box art for "|add:game_data.name width=200 height=267 style="border-radius: 8px" %}
</div>
<div style="flex: 1; overflow-x: auto;">
<div style="display: flex; gap: 1rem; min-width: max-content;">
@ -52,11 +49,7 @@ Hover over the end time to see the exact date and time.
flex-shrink: 0">
<div>
<a href="{% url 'twitch:campaign_detail' campaign_data.campaign.twitch_id %}">
<img src="{{ campaign_data.campaign.image_best_url|default:campaign_data.campaign.image_url }}"
alt="Image for {{ campaign_data.campaign.name }}"
width="120"
height="120"
style="border-radius: 4px" />
{% picture campaign_data.campaign.image_best_url|default:campaign_data.campaign.image_url alt="Image for "|add:campaign_data.campaign.name width=120 height=120 style="border-radius: 4px" %}
<h4 style="margin: 0.5rem 0; text-align: left;">{{ campaign_data.campaign.clean_name }}</h4>
</a>
<time datetime="{{ campaign_data.campaign.end_at|date:'c' }}"

9
templates/twitch/emote_gallery.html
View file

@ -1,4 +1,5 @@
{% extends "base.html" %}
{% load image_tags %}
{% block title %}
Emotes
{% endblock title %}
@ -8,13 +9,7 @@
<a href="{% url 'twitch:campaign_detail' emote.campaign.twitch_id %}"
title="{{ emote.campaign.name }}"
style="display: inline-block">
<img src="{{ emote.image_url }}"
height="96"
width="96"
alt="Emote"
style="max-width: 96px;
max-height: 96px"
loading="lazy" />
{% picture emote.image_url alt="Emote" width=96 height=96 style="max-width: 96px; max-height: 96px" %}
</a>
{% empty %}
<p>No drop campaigns with emotes found.</p>

31
templates/twitch/game_detail.html
View file

@ -1,4 +1,5 @@
{% extends "base.html" %}
{% load image_tags %}
{% block title %}
{{ game.display_name }}
{% endblock title %}
@ -23,11 +24,7 @@
</div>
<!-- Game image -->
{% if game.box_art_best_url %}
<img id="game-image"
height="160"
width="160"
src="{{ game.box_art_best_url }}"
alt="{{ game.name }}" />
{% picture game.box_art_best_url alt=game.name width=160 height=160 %}
{% endif %}
<!-- Game owner -->
{% if owners %}
@ -53,13 +50,7 @@
{% for benefit in campaign.sorted_benefits %}
<span class="benefit-item" title="{{ benefit.name }}">
{% if benefit.image_best_url or benefit.image_asset_url %}
<img src="{{ benefit.image_best_url|default:benefit.image_asset_url }}"
alt="{{ benefit.name }}"
width="24"
height="24"
style="display: inline-block;
margin-right: 4px;
vertical-align: middle" />
{% picture benefit.image_best_url|default:benefit.image_asset_url alt=benefit.name width=24 height=24 style="display: inline-block; margin-right: 4px; vertical-align: middle" %}
{% endif %}
{{ benefit.name }}
</span>
@ -88,13 +79,7 @@
{% for benefit in campaign.sorted_benefits %}
<span class="benefit-item" title="{{ benefit.name }}">
{% if benefit.image_best_url or benefit.image_asset_url %}
<img src="{{ benefit.image_best_url|default:benefit.image_asset_url }}"
alt="{{ benefit.name }}"
width="24"
height="24"
style="display: inline-block;
margin-right: 4px;
vertical-align: middle" />
{% picture benefit.image_best_url|default:benefit.image_asset_url alt=benefit.name width=24 height=24 style="display: inline-block; margin-right: 4px; vertical-align: middle" %}
{% endif %}
{{ benefit.name }}
</span>
@ -124,13 +109,7 @@
{% for benefit in campaign.sorted_benefits %}
<span class="benefit-item" title="{{ benefit.name }}">
{% if benefit.image_best_url or benefit.image_asset_url %}
<img src="{{ benefit.image_best_url|default:benefit.image_asset_url }}"
alt="{{ benefit.name }}"
width="24"
height="24"
style="display: inline-block;
margin-right: 4px;
vertical-align: middle" />
{% picture benefit.image_best_url|default:benefit.image_asset_url alt=benefit.name width=24 height=24 style="display: inline-block; margin-right: 4px; vertical-align: middle" %}
{% endif %}
{{ benefit.name }}
</span>

8
templates/twitch/games_grid.html
View file

@ -1,4 +1,5 @@
{% extends "base.html" %}
{% load image_tags %}
{% block title %}
Games - Grid View
{% endblock title %}
@ -27,12 +28,7 @@
text-align: center">
<div style="margin-bottom: 0.25rem;">
{% if item.game.box_art_best_url %}
<img src="{{ item.game.box_art_best_url }}"
alt="Box art for {{ item.game.display_name }}"
loading="lazy"
width="180"
height="240"
style="border-radius: 8px" />
{% picture item.game.box_art_best_url alt="Box art for "|add:item.game.display_name width=180 height=240 style="border-radius: 8px" %}
{% else %}
<div style="width: 180px;
height: 240px;

6
templates/twitch/reward_campaign_detail.html
View file

@ -1,5 +1,6 @@
{% extends "base.html" %}
{% load static %}
{% load image_tags %}
{% block title %}
{{ reward_campaign.name }}
{% endblock title %}
@ -16,10 +17,7 @@
</p>
<!-- Campaign image -->
{% if reward_campaign.image_best_url %}
<img height="160"
width="160"
src="{{ reward_campaign.image_best_url }}"
alt="{{ reward_campaign.name }}" />
{% picture reward_campaign.image_best_url alt=reward_campaign.name width=160 height=160 %}
{% endif %}
<!-- RSS Feeds -->
<div style="margin-bottom: 1rem;">