Allow lazy images on index grid items

nationalarchives · Jun 5, 2024 · 31b7fd6 · 31b7fd6
1 parent b9dc6e8
commit 31b7fd6
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.58...HEAD)
 
 ### Added
+
+- Allow `lazyImages` attribute for lazy loading of index grid images
+
 ### Changed
 ### Deprecated
 ### Removed

diff --git a/src/nationalarchives/components/index-grid/fixtures.json b/src/nationalarchives/components/index-grid/fixtures.json
@@ -243,6 +243,43 @@
       },
       "html": "<nav class=\"tna-index-grid\" aria-label=\"My dogs\"><div class=\"tna-container\"><div class=\"tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny\"><h2 class=\"tna-heading-l tna-index-grid__heading\">My dogs</h2>Lorem ipsum</div></div><ul class=\"tna-index-grid__items tna-container\"><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-0\" class=\"tna-index-grid__item\" title=\"Category #101\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #101</span><br><span class=\"tna-index-grid__item-subtitle\"><span class=\"tna-visually-hidden\">(</span>Category subtitle<span class=\"tna-visually-hidden\">)</span></span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-1\" class=\"tna-index-grid__item\" title=\"Category #102\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #102</span><br><span class=\"tna-index-grid__item-subtitle\"><span class=\"tna-visually-hidden\">(</span>Category subtitle<span class=\"tna-visually-hidden\">)</span></span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-2\" class=\"tna-index-grid__item\" title=\"Category #103\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #103</span><br><span class=\"tna-index-grid__item-subtitle\"><span class=\"tna-visually-hidden\">(</span>Category subtitle<span class=\"tna-visually-hidden\">)</span></span></span></a></li></ul></nav>"
     },
+    {
+      "name": "lazy images",
+      "options": {
+        "title": "My dogs",
+        "headingLevel": 2,
+        "items": [
+          {
+            "href": "#/category-0",
+            "src": "https://picsum.photos/id/237/800/600",
+            "alt": "Photo of a puppy",
+            "width": 800,
+            "height": 600,
+            "title": "Category #101"
+          },
+          {
+            "href": "#/category-1",
+            "src": "https://picsum.photos/id/237/800/600",
+            "alt": "Photo of a puppy",
+            "width": 800,
+            "height": 600,
+            "title": "Category #102"
+          },
+          {
+            "href": "#/category-2",
+            "src": "https://picsum.photos/id/237/800/600",
+            "alt": "Photo of a puppy",
+            "width": 800,
+            "height": 600,
+            "title": "Category #103"
+          }
+        ],
+        "lazyImages": true,
+        "columns": 3,
+        "classes": "index-grid__test-class"
+      },
+      "html": "<nav class=\"tna-index-grid index-grid__test-class\" aria-label=\"My dogs\"><div class=\"tna-container\"><div class=\"tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny\"><h2 class=\"tna-heading-l tna-index-grid__heading\">My dogs</h2></div></div><ul class=\"tna-index-grid__items tna-container\"><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3\"><a href=\"#/category-0\" class=\"tna-index-grid__item\" title=\"Category #101\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\" loading=\"lazy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #101</span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3\"><a href=\"#/category-1\" class=\"tna-index-grid__item\" title=\"Category #102\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\" loading=\"lazy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #102</span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3\"><a href=\"#/category-2\" class=\"tna-index-grid__item\" title=\"Category #103\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\" loading=\"lazy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #103</span></span></a></li></ul></nav>"
+    },
     {
       "name": "with classes",
       "options": {

diff --git a/src/nationalarchives/components/index-grid/index-grid.stories.js b/src/nationalarchives/components/index-grid/index-grid.stories.js
@@ -12,6 +12,7 @@ const argTypes = {
   body: { control: "text" },
   text: { control: "text" },
   items: { control: "object" },
+  lazyImages: { control: "boolean" },
   columns: { control: "number" },
   columnsMedium: { control: "number" },
   columnsSmall: { control: "number" },
@@ -42,6 +43,7 @@ const Template = ({
   body,
   text,
   items,
+  lazyImages,
   columns,
   columnsMedium,
   columnsSmall,
@@ -61,6 +63,7 @@ const Template = ({
       body,
       text,
       items,
+      lazyImages,
       columns,
       columnsMedium,
       columnsSmall,

diff --git a/src/nationalarchives/components/index-grid/macro-options.json b/src/nationalarchives/components/index-grid/macro-options.json
@@ -110,6 +110,12 @@
       }
     ]
   },
+  {
+    "name": "lazyImages",
+    "type": "boolean",
+    "required": false,
+    "description": "If true, make the images a lazily-loaded."
+  },
   {
     "name": "columns",
     "type": "string",

diff --git a/src/nationalarchives/components/index-grid/template.njk b/src/nationalarchives/components/index-grid/template.njk
@@ -63,7 +63,7 @@
     {%- for item in params.items %}
     <li class="{{ itemClasses | join(' ') }}">
       <a href="{{ item.href }}" class="tna-index-grid__item" title="{{ item.title }}">
-        <img src="{{ item.src }}" class="tna-index-grid__item-image" width="{{ item.width }}" height="{{ item.height }}" alt="{{ item.alt }}">
+        <img src="{{ item.src }}" class="tna-index-grid__item-image" width="{{ item.width }}" height="{{ item.height }}" alt="{{ item.alt }}"{%- if params.lazyImages %} loading="lazy"{% endif %}>
         <span class="tna-index-grid__item-content">
           <span class="tna-index-grid__item-title">{{ item.title }}</span>
           {%- if item.label %}