From edd2410b42cf5b55619a238e9664e4f831e949e3 Mon Sep 17 00:00:00 2001
From: Rachel Smith <rachel.smith@torchbox.com>
Date: Tue, 14 Nov 2023 15:14:07 +0000
Subject: [PATCH] Replace image tags with picture tags

- Uses Wagtail 5.2 picture tags https://docs.wagtail.org/en/latest/releases/5.2.html#responsive-multi-format-images-with-the-picture-tag
- Each image now has three renditions for avif, webp and jpeg formats
- Some images now have two sizes on top of this (6 renditions in total) for different screen sizes
---
 bakerydemo/settings/base.py                               | 2 ++
 bakerydemo/templates/base/home_page.html                  | 4 ++--
 bakerydemo/templates/base/include/header-blog.html        | 2 +-
 bakerydemo/templates/base/include/header-hero.html        | 2 +-
 bakerydemo/templates/base/preview/person.html             | 2 +-
 bakerydemo/templates/blocks/image_block.html              | 2 +-
 bakerydemo/templates/blog/blog_page.html                  | 2 +-
 bakerydemo/templates/includes/card/blog-listing-card.html | 2 +-
 bakerydemo/templates/includes/card/listing-card.html      | 2 +-
 bakerydemo/templates/includes/card/location-card.html     | 2 +-
 bakerydemo/templates/includes/card/picture-card.html      | 4 ++--
 bakerydemo/templates/recipes/recipe_page.html             | 2 +-
 bakerydemo/templates/search/search_results.html           | 3 ++-
 bakerydemo/templates/tags/gallery.html                    | 2 +-
 14 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/bakerydemo/settings/base.py b/bakerydemo/settings/base.py
index 68ff436..ac7c920 100644
--- a/bakerydemo/settings/base.py
+++ b/bakerydemo/settings/base.py
@@ -202,6 +202,8 @@ WAGTAIL_CONTENT_LANGUAGES = LANGUAGES = [
     ("ar", "العربيّة"),
 ]
 
+WAGTAILIMAGES_AVIF_QUALITY = 60
+
 ADMIN_PASSWORD = os.environ.get("ADMIN_PASSWORD", "changeme")
 
 # Content Security policy settings
diff --git a/bakerydemo/templates/base/home_page.html b/bakerydemo/templates/base/home_page.html
index 46c6bca..7b0c066 100644
--- a/bakerydemo/templates/base/home_page.html
+++ b/bakerydemo/templates/base/home_page.html
@@ -5,7 +5,7 @@
     <div class="homepage">
 
         <div class="container-fluid hero">
-            {% image page.image fill-1920x600 class="hero-image" alt="" %}
+            {% picture page.image format-{avif,webp,jpeg} fill-{800x650,1920x900} sizes="100vw" class="hero-image" alt="" %}
             <div class="hero-gradient-mask"></div>
             <div class="container">
                 <div class="row">
@@ -55,7 +55,7 @@
                         </div>
                     {% endif %}
                     {% if page.promo_image %}
-                        <figure>{% image page.promo_image fill-590x413-c100 %}</figure>
+                        <figure>{% picture page.promo_image format-{avif,webp,jpeg} fill-590x413-c100 %}</figure>
                     {% endif %}
                 </div>
             </div>
diff --git a/bakerydemo/templates/base/include/header-blog.html b/bakerydemo/templates/base/include/header-blog.html
index 7fee63e..15c3a33 100644
--- a/bakerydemo/templates/base/include/header-blog.html
+++ b/bakerydemo/templates/base/include/header-blog.html
@@ -2,7 +2,7 @@
 
 {% if page.image %}
     <div class="container-fluid hero hero--blog">
-        {% image page.image fill-1920x600 class="hero-image" alt="" %}
+        {% picture page.image format-{avif,webp,jpeg} fill-{800x650,1920x600} sizes="100vw" class="hero-image" alt="" %}
     </div>
 {% endif %}
 <div class="container">
diff --git a/bakerydemo/templates/base/include/header-hero.html b/bakerydemo/templates/base/include/header-hero.html
index 6608931..49d7d06 100644
--- a/bakerydemo/templates/base/include/header-hero.html
+++ b/bakerydemo/templates/base/include/header-hero.html
@@ -2,7 +2,7 @@
 
 {% if page.image %}
     <div class="container-fluid hero">
-        {% image page.image fill-1920x600 class="hero-image" alt="" %}
+        {% picture page.image format-{avif,webp,jpeg} fill-{800x650,1920x600} sizes="100vw" class="hero-image" alt="" %}
         <div class="hero__container">
             <h1 class="hero__title">{{ page.title }}</h1>
         </div>
diff --git a/bakerydemo/templates/base/preview/person.html b/bakerydemo/templates/base/preview/person.html
index 158512c..ecd5c54 100644
--- a/bakerydemo/templates/base/preview/person.html
+++ b/bakerydemo/templates/base/preview/person.html
@@ -9,7 +9,7 @@
 
 {% block content %}
     <div>
-        {% image object.image fill-200x200-c100 class="blog__avatar" %}
+        {% picture object.image format-{avif,webp,jpeg} fill-200x200-c100 class="blog__avatar" %}
         <h2>{{ object.first_name }} {{ object.last_name }}</h2>
         <p>{{ object.job_title }}</p>
     </div>
diff --git a/bakerydemo/templates/blocks/image_block.html b/bakerydemo/templates/blocks/image_block.html
index a4b1bad..092ddb6 100644
--- a/bakerydemo/templates/blocks/image_block.html
+++ b/bakerydemo/templates/blocks/image_block.html
@@ -1,6 +1,6 @@
 {% load wagtailimages_tags %}
 
 <figure>
-    {% image self.image fill-600x338 loading="lazy" %}
+    {% picture self.image format-{avif,webp,jpeg} fill-{400x220,600x338} sizes="(max-width: 768px) 200px, 900px" loading="lazy" %}
     <figcaption>{{ self.caption }} - {{ self.attribution }}</figcaption>
 </figure>
diff --git a/bakerydemo/templates/blog/blog_page.html b/bakerydemo/templates/blog/blog_page.html
index cd9524d..0254ed7 100644
--- a/bakerydemo/templates/blog/blog_page.html
+++ b/bakerydemo/templates/blog/blog_page.html
@@ -12,7 +12,7 @@
                     {% if page.authors %}
                         <div class="blog__avatars">
                             {% for author in page.authors %}
-                                <div class="blog__author">{% image author.image fill-50x50-c100 class="blog__avatar" %}
+                                <div class="blog__author">{% picture author.image format-{avif,webp,jpeg} fill-50x50-c100 class="blog__avatar" %}
                                     {{ author.first_name }} {{ author.last_name }}</div>
                             {% endfor %}
                         </div>
diff --git a/bakerydemo/templates/includes/card/blog-listing-card.html b/bakerydemo/templates/includes/card/blog-listing-card.html
index e621478..04eb7da 100644
--- a/bakerydemo/templates/includes/card/blog-listing-card.html
+++ b/bakerydemo/templates/includes/card/blog-listing-card.html
@@ -4,7 +4,7 @@
     <a class="blog-listing-card__link" href="{% pageurl blog %}">
         {% if blog.image %}
             <figure class="blog-listing-card__image">
-                {% image blog.image fill-322x247-c100 loading="lazy" %}
+                {% picture blog.image format-{avif,webp,jpeg} fill-322x247-c100 loading="lazy" %}
             </figure>
         {% endif %}
         <div class="blog-listing-card__contents">
diff --git a/bakerydemo/templates/includes/card/listing-card.html b/bakerydemo/templates/includes/card/listing-card.html
index 8aa58d6..4b6d645 100644
--- a/bakerydemo/templates/includes/card/listing-card.html
+++ b/bakerydemo/templates/includes/card/listing-card.html
@@ -4,7 +4,7 @@
     <a class="listing-card__link" href="{{ page.url }}">
         {% if page.image %}
             <figure class="listing-card__image">
-                {% image page.image fill-180x180-c100 loading="lazy" %}
+                {% picture page.image format-{avif,webp,jpeg} fill-180x180-c100 loading="lazy" %}
             </figure>
         {% endif %}
         <div class="listing-card__contents">
diff --git a/bakerydemo/templates/includes/card/location-card.html b/bakerydemo/templates/includes/card/location-card.html
index 809051c..49d3ea6 100644
--- a/bakerydemo/templates/includes/card/location-card.html
+++ b/bakerydemo/templates/includes/card/location-card.html
@@ -3,7 +3,7 @@
 <div class="location-card col-sm-4">
     <a class="location-card__link" href="{{page.url}}">
         <figure class="location-card__image">
-            {% image page.image fill-430x320-c100 loading="lazy" %}
+            {% picture page.image format-{avif,webp,jpeg} fill-{300x320-c100,430x320-c100} sizes="(max-width: 768px) 150px, 400px" loading="lazy" %}
         </figure>
         <div class="location-card__contents">
             <h3 class="location-card__title">{{page.title}}</h3>
diff --git a/bakerydemo/templates/includes/card/picture-card.html b/bakerydemo/templates/includes/card/picture-card.html
index 7e23332..bd7c7ac 100644
--- a/bakerydemo/templates/includes/card/picture-card.html
+++ b/bakerydemo/templates/includes/card/picture-card.html
@@ -4,9 +4,9 @@
     <a class="picture-card__link" href="{{ page.url }}">
         <figure class="picture-card__image">
             {% if portrait %}
-                {% image page.image fill-433x487-c100 loading="lazy" %}
+                {% picture page.image format-{avif,webp,jpeg} fill-{250x320-c100,433x487-c100} sizes="(max-width: 768px)125px,400px" loading="lazy" %}
             {% else %}
-                {% image page.image fill-645x480-c75 loading="lazy" %}
+                {% picture page.image format-{avif,webp,jpeg} fill-{300x200-c75,645x480-c75} sizes="(max-width: 768px)150px,30vw" loading="lazy" %}
             {% endif %}
             <div class="picture-card__contents">
                 <h3 class="picture-card__title">{{ page.title }}</h3>
diff --git a/bakerydemo/templates/recipes/recipe_page.html b/bakerydemo/templates/recipes/recipe_page.html
index 5b57a35..c8e5dbc 100644
--- a/bakerydemo/templates/recipes/recipe_page.html
+++ b/bakerydemo/templates/recipes/recipe_page.html
@@ -12,7 +12,7 @@
                     {% if page.authors %}
                         <div class="blog__avatars">
                             {% for author in page.authors %}
-                                <div class="blog__author">{% image author.image fill-50x50-c100 class="blog__avatar" %}
+                                <div class="blog__author">{% picture author.image format-{avif,webp,jpeg} fill-50x50-c100 class="blog__avatar" %}
                                     {{ author.first_name }} {{ author.last_name }}</div>
                             {% endfor %}
                         </div>
diff --git a/bakerydemo/templates/search/search_results.html b/bakerydemo/templates/search/search_results.html
index 5e4f363..c285ab9 100644
--- a/bakerydemo/templates/search/search_results.html
+++ b/bakerydemo/templates/search/search_results.html
@@ -20,7 +20,7 @@
                                 <a class="listing-card__link" href="{% pageurl result.specific %}">
                                     {% if result.specific.image %}
                                         <figure class="listing-card__image">
-                                            {% image result.specific.image fill-180x180-c100 loading="lazy" %}
+                                            {% picture result.specific.image format-{avif,webp,jpeg} fill-180x180-c100 loading="lazy" %}
                                         </figure>
                                     {% endif %}
                                     <div class="listing-card__contents">
@@ -75,6 +75,7 @@
                                     {% else %}
                                         <a class="listing-card__link" href="{{ search_promotion.external_link_url }}">
                                             <figure class="listing-card__image">
+                                                {% picture search_promotion.page.specific.image format-{avif,webp,jpeg} fill-180x180-c100 loading="lazy" %}
                                             </figure>
                                             <div class="listing-card__contents">
                                                 <h3 class="listing-card__title">{{ search_promotion.external_link_text }}</h3>
diff --git a/bakerydemo/templates/tags/gallery.html b/bakerydemo/templates/tags/gallery.html
index 069bfdb..d66cf60 100644
--- a/bakerydemo/templates/tags/gallery.html
+++ b/bakerydemo/templates/tags/gallery.html
@@ -3,7 +3,7 @@
 {% for img in images %}
     <div class="picture-card">
         <figure class="picture-card__image">
-            {% image img fill-645x480-c100 loading="lazy" %}
+            {% picture img format-{avif,webp,jpeg} fill-{300x200-c75,645x480-c75} sizes="(max-width: 768px)150px,30vw" loading="lazy" %}
             <div class="picture-card__contents">
                 <p class="picture-card__title">{{ img.title }}</p>
             </div>