From 0917e39e40a81580293650d594399ec2699dce25 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Tue, 13 Jun 2023 09:31:45 +0100
Subject: [PATCH] Use picture tag to support smaller hero image on small
 screens

---
 website/common/templates/wagtail_base.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/website/common/templates/wagtail_base.html b/website/common/templates/wagtail_base.html
index 5bb3263..04113e7 100644
--- a/website/common/templates/wagtail_base.html
+++ b/website/common/templates/wagtail_base.html
@@ -11,7 +11,13 @@
 {% endblock %}
 
 {% block main_content %}
-  {% if page.hero_image_url %}<img class="hero" src="{{ page.hero_image_url }}" decoding="async" alt="" />{% endif %}
+  {% if page.hero_image_url %}
+    <picture>
+      {% if page.list_image_url %}<source srcset="{{ page.list_image_url }}" media="(max-width: 800px)" />{% endif %}
+
+      <img class="hero" src="{{ page.hero_image_url }}" decoding="async" alt="" />
+    </picture>
+  {% endif %}
 
   {% if page.get_view_restrictions.exists %}
     <section class="notification is-danger" id="view-restriction-banner">