Add extra alt text options to the work page image

Author: helenb

tbx/project_styleguide/templates/patterns/pages/work/work_page.html

@@ -21,7 +21,7 @@
             <picture>
                 <source media="(max-width: 598px)" srcset="{{ mobile_image.url }} 1x, {{ mobile_image_retina.url }} 2x" />
                 <source media="(min-width: 599px)" srcset="{{ desktop_image.url }} 1x, {{ desktop_image_retina.url }} 2x" />
-                <img src="{{ desktop_image.url }}" alt="{{ desktop_image.alt }}" />
+                <img src="{{ desktop_image.url }}" alt="{% if not page.header_image_is_decorative %}{{ page.header_image_alt_text }}{% endif %}" />
             </picture>
 
             {% if page.header_caption %}

tbx/work/models.py

@@ -201,6 +201,16 @@ class WorkPage(ColourThemeMixin, ContactMixin, SocialFields, NavigationFields, P
         on_delete=models.SET_NULL,
         related_name="+",
     )
+    header_image_is_decorative = models.BooleanField(
+        help_text="If checked, this will make the alt text empty.",
+        default=False,
+    )
+    header_alt_text = models.CharField(
+        blank=True,
+        max_length=255,
+        help_text="By default the image title (shown above) is used as the alt text. "
+        "Use this field to provide more specific alt text if required.",
+    )
 
     header_caption = models.CharField("caption", max_length=255, blank=True)
     header_attribution = models.CharField("attribution", max_length=255, blank=True)
@@ -226,6 +236,8 @@ class WorkPage(ColourThemeMixin, ContactMixin, SocialFields, NavigationFields, P
         MultiFieldPanel(
             [
                 FieldPanel("header_image"),
+                FieldPanel("header_alt_text"),
+                FieldPanel("header_image_is_decorative"),
                 FieldPanel("header_caption"),
                 FieldPanel("header_attribution"),
             ],
@@ -277,6 +289,12 @@ def first_author(self):
             return author.author
         return None
 
+    @cached_property
+    def header_image_alt_text(self):
+        if header_alt_text := self.header_alt_text:
+            return header_alt_text
+        return self.header_image.title
+
     @property
     def related_works(self):
         prefetch_listing_images = models.Prefetch(