Use custom django-imagekit with extensions (use webp + generate srcset).

See the following PRs: - matthewwithanm/django-imagekit#574 - matthewwithanm/django-imagekit#575
studi-bars · Jun 26, 2024 · 9628a39 · 9628a39
1 parent 6982698
commit 9628a39
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git 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
@@ -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
@@ -150,3 +150,6 @@
         'django_filters.rest_framework.DjangoFilterBackend',
     ),
 }
+
+IMAGEKIT_DEFAULT_THUMBNAIL_FORMAT = "WEBP"
+IMAGEKIT_DEFAULT_THUMBNAIL_SRCSET_SCALES = [2, 3]