From 0d45c98335b62d45892ebd0eb3cc59b315a144f1 Mon Sep 17 00:00:00 2001
From: hiyach28 <hiyach28@gmail.com>
Date: Fri, 18 Sep 2026 18:43:13 +0530
Subject: [PATCH] fix(layouts): stop emitting invalid ids on Markdown images

`first 6 (shuffle (seq 1 500))` returns a slice, not a number, so every
Markdown image rendered as id="[487 38 279 330 254 290]". That is not a
valid HTML id, and it affected all 380 Markdown images on the site.

The id existed only so the inline onclick could look the image back up.
openModal already accepts an <img> element (layouts/partials/image-modal.html),
and the DOMContentLoaded handler there passes the element anyway, so the
id had no remaining reader. Drop it and pass the element directly.

Verified by building master with and without this change: 380 invalid ids
before, 0 after, with the same images on the same pages and no duplicate
ids introduced.

Signed-off-by: hiyach28 <hiyach28@gmail.com>
---
 layouts/_default/_markup/render-image.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 1caa20e2d992..f5ab8e99ada3 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -2,12 +2,13 @@
   magnific modal popup. Use format ![alt text](/path/to/image.img) -->
 <!-- Place this file in layouts > _default > _markup > render-image.html -->
 <!-- Also place the image-modal.css and partial/image-modal.html appropriately. -->
-<!-- Id for the image on the page is set to a random 6 numbers, chosen from 1 to 500 -->
-<!-- Onclick opens the modal, and displays/overlays the the image that has the id for the 
-  clicked image. -->
+<!-- The image is passed to openModal directly, so no generated id is needed. The previous
+  `first 6 (shuffle (seq 1 500))` emitted a whole slice, e.g. id="[487 38 279 330 254 290]",
+  which is not a valid HTML id. openModal accepts an <img> element as well as an id. -->
+<!-- Onclick opens the modal, and displays/overlays the clicked image. -->
 <!-- attribution appreciated. github: zjeaton web: https://froglegs.co -->
 
 <div class="md__image">
-  <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" 
+  <img src="{{ .Destination | safeURL }}" onclick="openModal(this)" alt="{{ .Text }}"
   class="md-image-responsive{{ with .Title }} {{ . }}{{ end }}" />
 </div>
\ No newline at end of file