From 9628a397f3582b72cbc7d70e293fe9f2ef8bb61f Mon Sep 17 00:00:00 2001
From: Leander Schulten <Leander.Schulten@rwth-aachen.de>
Date: Wed, 26 Jun 2024 11:14:16 +0200
Subject: [PATCH] Use custom django-imagekit with extensions (use webp +
 generate srcset).

See the following PRs:
- https://github.com/matthewwithanm/django-imagekit/pull/574
- https://github.com/matthewwithanm/django-imagekit/pull/575
---
 main/templates/main/bar.html | 9 +++------
 requirements.txt             | 4 +++-
 studibars/settings.py        | 3 +++
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/main/templates/main/bar.html b/main/templates/main/bar.html
index 5990635..71ba7b5 100644
--- a/main/templates/main/bar.html
+++ b/main/templates/main/bar.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% load imagekit %}
 
 {% block content %}
     <div class="container px-0 col-11 col-lg-8">
@@ -11,15 +12,11 @@ <h1>{{ bar.name }}</h1>
                     <div id="carouselExample" class="carousel slide" data-bs-theme="light">
                         <div class="carousel-inner">
                             <div class="carousel-item active">
-                                <img style="height: 400px" src="{{ bar.image.url }}"
-                                     class="d-block w-100 object-fit-cover"
-                                     alt="{{ bar.name }}">
+                                {% thumbnail 'x400' bar.image -- alt=bar.name style="height: 400px" class="d-block w-100 object-fit-cover" %}
                             </div>
                             {% for image in bar.images.all %}
                                 <div class="carousel-item">
-                                    <img style="height: 400px" src="{{ image.image.url }}"
-                                         class="d-block w-100 object-fit-cover"
-                                         alt="{{ bar.name }}">
+                                    {% thumbnail 'x400' image.image -- alt=bar.name style="height: 400px" class="d-block w-100 object-fit-cover" %}
                                 </div>
                             {% endfor %}
                         </div>
diff --git a/requirements.txt b/requirements.txt
index f80c820..2c637a8 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -6,7 +6,9 @@ drf-spectacular
 django-filter
 setuptools
 ics # für ics calendar
-django-imagekit # um im template thumbnails zu generieren https://github.com/matthewwithanm/django-imagekit
+# django-imagekit # um im template thumbnails zu generieren https://github.com/matthewwithanm/django-imagekit
+# Mit https://github.com/matthewwithanm/django-imagekit/pull/574 und https://github.com/matthewwithanm/django-imagekit/pull/575 :
+git+https://github.com/autoantwort/django-imagekit@068a9f087dedcc1e60ec55137b12edccfb503be5#egg=django-imagekit
 # See https://github.com/zelenij/django-bootstrap-v5/issues/33
 git+https://github.com/math-a3k/django-bootstrap-v5.git@9d9f01988f0554028c0fd276939fc1336f0fa997#egg=django-bootstrap-v5
 
diff --git a/studibars/settings.py b/studibars/settings.py
index aa79018..ad6050e 100644
--- a/studibars/settings.py
+++ b/studibars/settings.py
@@ -150,3 +150,6 @@
         'django_filters.rest_framework.DjangoFilterBackend',
     ),
 }
+
+IMAGEKIT_DEFAULT_THUMBNAIL_FORMAT = "WEBP"
+IMAGEKIT_DEFAULT_THUMBNAIL_SRCSET_SCALES = [2, 3]