Add alt text for unsplash image URLs

website/common/models.py

@@ -195,6 +195,13 @@ class BaseContentPage(BasePage, MetadataMixin):
     def list_image_url(self) -> Optional[str]:
         return self.hero_url("small")
 
+    @cached_property
+    def hero_image_alt(self) -> str:
+        if self.hero_unsplash_photo_id is None:
+            return ""
+
+        return self.hero_unsplash_photo.data.get("description", "")
+
     def get_meta_url(self) -> str:
         return self.full_url
 

website/common/templates/common/listing-item.html

@@ -6,7 +6,7 @@
     <figure class="media-left column is-3 image-column">
       {% if page.list_image_url %}
         <a href="{% pageurl page %}" class="image" title="{{ page.title }}">
-          <img src="{{ page.list_image_url }}" alt="" loading="lazy" decoding="async" />
+          <img src="{{ page.list_image_url }}" alt="{{ page.hero_image_alt }}" loading="lazy" decoding="async" />
         </a>
       {% endif %}
     </figure>

website/common/templates/wagtail_base.html

@@ -15,7 +15,7 @@
     <picture>
       {% for width, image_url in page.hero_image_urls.items reversed %}<source srcset="{{ image_url }}" media="(max-width: {{ width }}px)" />{% endfor %}
 
-      <img class="hero" src="{{ page.hero_image_url }}" decoding="async" alt="" />
+      <img class="hero" src="{{ page.hero_image_url }}" decoding="async" alt="{{ page.hero_image_alt }}" />
     </picture>
   {% endif %}