From d71315f3202497c441f375dbde91749b4d721e34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Canouil?=
 <8896044+mcanouil@users.noreply.github.com>
Date: Sun, 25 Jan 2026 23:48:23 +0100
Subject: [PATCH] fix: `listing:image-lazy-loading` does not work for values of
 `true` or `false`

Fixes #13951
---
 .../website/listing/website-listing-read.ts   | 26 ++++++++++++++-----
 .../listing/website-listing-template.ts       |  2 ++
 .../website/listing/item-default.ejs.md       |  2 +-
 .../projects/website/listing/item-grid.ejs.md |  2 +-
 .../website/listing/listing-table.ejs.md      |  2 +-
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/project/types/website/listing/website-listing-read.ts b/src/project/types/website/listing/website-listing-read.ts
index c8aacd50096..05b8ff153c4 100644
--- a/src/project/types/website/listing/website-listing-read.ts
+++ b/src/project/types/website/listing/website-listing-read.ts
@@ -393,14 +393,16 @@ export function completeListingItems(
         debug(`[listing] Processing image match`);
         const progressive = imgMatch[1] === "true";
         const imgHeight = imgMatch[2];
-        const listingId = imgMatch[3];
-        const docRelativePath = imgMatch[4];
+        const lazy = imgMatch[3] !== "false";
+        const listingId = imgMatch[4];
+        const docRelativePath = imgMatch[5];
         const docAbsPath = join(projectOutputDir(context), docRelativePath);
         const imgPlaceholder = imagePlaceholder(
           listingId,
           docRelativePath,
           progressive,
           imgHeight,
+          lazy,
         );
         debug(`[listing] ${docAbsPath}`);
         debug(`[listing] ${imgPlaceholder}`);
@@ -435,6 +437,7 @@ export function completeListingItems(
               },
               progressive,
               imgHeight,
+              lazy,
             );
 
             debug(`[listing] replacing: ${docAbsPath}`);
@@ -454,7 +457,7 @@ export function completeListingItems(
             };
             fileContents = fileContents.replace(
               imgPlaceholder,
-              imageSrc(imagePreview, progressive, imgHeight),
+              imageSrc(imagePreview, progressive, imgHeight, lazy),
             );
           } else {
             debug(`[listing] using empty div: ${docAbsPath}`);
@@ -501,11 +504,14 @@ export function imagePlaceholder(
   file: string,
   progressive: boolean,
   height?: string,
+  lazy?: boolean,
 ): string {
   return file
     ? `<!-- img(9CEB782EFEE6)[progressive=${
       progressive ? "true" : "false"
-    }, height=${height ? height : ""}]:${id}:${file} -->`
+    }, height=${height ? height : ""}, lazy=${
+      lazy === false ? "false" : "true"
+    }]:${id}:${file} -->`
     : "";
 }
 
@@ -517,7 +523,7 @@ const descriptionPlaceholderRegex =
   /<!-- desc\(5A0113B34292\)\[max\=(.*)\]:(.*) -->/;
 
 const imagePlaceholderRegex =
-  /<!-- img\(9CEB782EFEE6\)\[progressive\=(.*), height\=(.*)\]:(.*):(.*) -->/;
+  /<!-- img\(9CEB782EFEE6\)\[progressive\=(.*), height\=(.*), lazy\=(.*)\]:(.*):(.*) -->/;
 
 function hydrateListing(
   format: Format,
@@ -1202,8 +1208,14 @@ async function listItemFromFile(
   }
 }
 
-function imageSrc(image: PreviewImage, progressive: boolean, height?: string) {
-  return `<p class="card-img-top"><img ${
+function imageSrc(
+  image: PreviewImage,
+  progressive: boolean,
+  height?: string,
+  lazy?: boolean,
+) {
+  const lazyAttr = lazy === false ? "" : "loading='lazy' ";
+  return `<p class="card-img-top"><img ${lazyAttr}${
     progressive ? "data-src" : "src"
   }="${image.src}" ${image.alt ? `alt="${image.alt}" ` : ""}${
     height ? `style="height: ${height};" ` : ""
diff --git a/src/project/types/website/listing/website-listing-template.ts b/src/project/types/website/listing/website-listing-template.ts
index 50a538b23aa..6d7d38e62b7 100644
--- a/src/project/types/website/listing/website-listing-template.ts
+++ b/src/project/types/website/listing/website-listing-template.ts
@@ -447,6 +447,7 @@ export function reshapeListing(
     listingId: string,
     itemNumber: number,
     itemPath: string,
+    lazy?: boolean,
   ) => {
     const pageSize = listing[kPageSize];
     return imagePlaceholder(
@@ -454,6 +455,7 @@ export function reshapeListing(
       itemPath,
       itemNumber > pageSize,
       listing[kImageHeight] as string,
+      lazy,
     );
   };
 
diff --git a/src/resources/projects/website/listing/item-default.ejs.md b/src/resources/projects/website/listing/item-default.ejs.md
index 91114a7867f..823f32c18d3 100644
--- a/src/resources/projects/website/listing/item-default.ejs.md
+++ b/src/resources/projects/website/listing/item-default.ejs.md
@@ -45,7 +45,7 @@ print(`<div class="metadata-value listing-${field}">${listing.utilities.outputLi
 <% if (item.image) { %>
 <%= listing.utilities.img(itemNumber, item.image, "thumbnail-image", item['image-alt'], item['image-lazy-loading'] ?? listing['image-lazy-loading']) %>
 <% } else { %>
-<%= listing.utilities.imgPlaceholder(listing.id, itemNumber, item.outputHref) %>
+<%= listing.utilities.imgPlaceholder(listing.id, itemNumber, item.outputHref, item['image-lazy-loading'] ?? listing['image-lazy-loading']) %>
 <% } %>
 </a></div>
 ```
diff --git a/src/resources/projects/website/listing/item-grid.ejs.md b/src/resources/projects/website/listing/item-grid.ejs.md
index e19307988d9..94fd1251c39 100644
--- a/src/resources/projects/website/listing/item-grid.ejs.md
+++ b/src/resources/projects/website/listing/item-grid.ejs.md
@@ -57,7 +57,7 @@ return !["title", "image", "image-alt", "date", "author", "subtitle", "descripti
 <% } else { %>
 
 ```{=html}
-<%= listing.utilities.imgPlaceholder(listing.id, itemNumber, item.outputHref) %>
+<%= listing.utilities.imgPlaceholder(listing.id, itemNumber, item.outputHref, item['image-lazy-loading'] ?? listing['image-lazy-loading']) %>
 ```
 
 <% } %>
diff --git a/src/resources/projects/website/listing/listing-table.ejs.md b/src/resources/projects/website/listing/listing-table.ejs.md
index d45de6ccf91..d3ae5836490 100644
--- a/src/resources/projects/website/listing/listing-table.ejs.md
+++ b/src/resources/projects/website/listing/listing-table.ejs.md
@@ -57,7 +57,7 @@ if (field === "image") {
 if (item.image) {
 value = listing.utilities.img(itemNumber, item[field], "", item['image-alt'], item['image-lazy-loading'] ?? listing['image-lazy-loading']);
 } else {
-value = listing.utilities.imgPlaceholder(listing.id, itemNumber, item.outputHref);
+value = listing.utilities.imgPlaceholder(listing.id, itemNumber, item.outputHref, item['image-lazy-loading'] ?? listing['image-lazy-loading']);
 }
 }
 return listing.utilities.outputLink(item, field, value, `listing-${field}`);