From 6771f51ca0c3c3987d16fd753ecf048dea09e6f2 Mon Sep 17 00:00:00 2001
From: Stefan Wehrmeyer <mail@stefanwehrmeyer.com>
Date: Thu, 12 Oct 2023 16:10:36 +0200
Subject: [PATCH] Use responsive filer image template for campaign slider
 images

Currently they are resized to 250w which looks bad on many devices.
---
 .../cms/plugins/primarylink/campaign.html     | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/fragdenstaat_de/fds_cms/templates/cms/plugins/primarylink/campaign.html b/fragdenstaat_de/fds_cms/templates/cms/plugins/primarylink/campaign.html
index e62cbc71d..55253a72d 100644
--- a/fragdenstaat_de/fds_cms/templates/cms/plugins/primarylink/campaign.html
+++ b/fragdenstaat_de/fds_cms/templates/cms/plugins/primarylink/campaign.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-{% load thumbnail %}
+{% load fds_cms_tags %}
 {% load static %}
 {% load markup %}
 
@@ -9,13 +9,23 @@
   {% endif %}
   <div class="bg-callout py-2 text-center">
     {% if object.image %}
+      {# the column values are guesses, the glider js config determines actual size. #}
+      {% get_responsive_filer_image object.image "col-6 col-md-4" as respimg %}
       <picture>
-        {% thumbnail object.image 250x0 crop subject_location=object.image.subject_location as thumb %}
-        <source
-          srcset="{{ thumb.url }}.avif"
-          type="image/avif"
-        />
-        <img class="img-sm-vertical" loading="lazy" src="{{ thumb.url }}" alt="{{ object.image.default_alt_text|default:"" }}" />
+        {% for source in respimg.sources %}
+          <source
+            srcset="{{ source.srcset }}"
+            sizes="{{ respimg.sizes }}"
+            type="{{ source.mime_type }}"
+          />
+        {% endfor %}
+              
+        <img class="img-sm-vertical" loading="lazy"
+          src="{{ respimg.src }}" srcset="{{ respimg.srcset }}" sizes="{{ respimg.sizes }}"
+          alt="{{ object.image.default_alt_text|default:"" }}"
+          width="{{ object.image.width|floatformat:"0u" }}"
+          height="{{ object.image.height|floatformat:"0u" }}"
+        >
       </picture>
     {% endif %}
   </div>