Merge pull request #305 from torchbox/feature/work-page-img-alt

Add extra alt text options to the work page image

Author: helenb

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

@@ -19,7 +19,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/migrations/0035_add_alt_text_options_to_work_image.py

@@ -0,0 +1,30 @@
+# Generated by Django 4.2.13 on 2024-07-30 08:18
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("work", "0034_add_earth_colour_theme"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="workpage",
+            name="header_alt_text",
+            field=models.CharField(
+                blank=True,
+                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.",
+                max_length=255,
+            ),
+        ),
+        migrations.AddField(
+            model_name="workpage",
+            name="header_image_is_decorative",
+            field=models.BooleanField(
+                default=False,
+                help_text="If checked, this will make the alt text empty.",
+            ),
+        ),
+    ]

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(