From 1ff3ec0896071c5a73621a9c85d8d004ed1aca8c Mon Sep 17 00:00:00 2001
From: chinmayee <chinmayeers910@gmail.com>
Date: Tue, 22 Sep 2026 23:08:36 +0530
Subject: [PATCH 1/4] fix: preserve image rendering and accessibility

Signed-off-by: chinmayee <chinmayeers910@gmail.com>
---
 assets/scss/_image-modal_project.scss      |  13 ++
 layouts/_default/_markup/render-image.html |  42 ++++--
 layouts/partials/image-modal.html          | 148 ++++++++++++++++-----
 3 files changed, 160 insertions(+), 43 deletions(-)

diff --git a/assets/scss/_image-modal_project.scss b/assets/scss/_image-modal_project.scss
index 0c8f72ffd51c..f1d54eea1ca3 100644
--- a/assets/scss/_image-modal_project.scss
+++ b/assets/scss/_image-modal_project.scss
@@ -3,6 +3,19 @@
   cursor: pointer;
 }
 
+/* Native button used as the keyboard-accessible image trigger */
+.md__image-trigger {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
 /* The Modal (background) */
 .modal {
   display: none;
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 34af92caad01..668ab083209f 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -31,14 +31,38 @@
 <div class="md__image">
 {{- with $img }}
   {{- $webp := .Process "webp q85" }}
-  <picture>
-    <source srcset="{{ $webp.RelPermalink }}" type="image/webp" width="{{ .Width }}" height="{{ .Height }}">
-    <img src="{{ $dest | safeURL }}" onclick="openModal(this)" alt="{{ $alt }}"
-    width="{{ .Width }}" height="{{ .Height }}"
-    class="{{ $class }}" />
-  </picture>
+  <button
+    type="button"
+    class="md__image-trigger"
+    aria-label="Expand image{{ with $alt }}: {{ . }}{{ end }}"
+  >
+    <picture>
+      <source
+        srcset="{{ $webp.RelPermalink }}"
+        type="image/webp"
+        width="{{ .Width }}"
+        height="{{ .Height }}"
+      >
+      <img
+        src="{{ $dest | safeURL }}"
+        alt="{{ $alt }}"
+        width="{{ .Width }}"
+        height="{{ .Height }}"
+        class="{{ $class }}"
+      />
+    </picture>
+  </button>
 {{- else }}
-  <img src="{{ $dest | safeURL }}" onclick="openModal(this)" alt="{{ $alt }}"
-  class="{{ $class }}" />
+  <button
+    type="button"
+    class="md__image-trigger"
+    aria-label="Expand image{{ with $alt }}: {{ . }}{{ end }}"
+  >
+    <img
+      src="{{ $dest | safeURL }}"
+      alt="{{ $alt }}"
+      class="{{ $class }}"
+    />
+  </button>
 {{- end }}
-</div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/image-modal.html b/layouts/partials/image-modal.html
index 72650e62a27f..312aaf5da3e4 100644
--- a/layouts/partials/image-modal.html
+++ b/layouts/partials/image-modal.html
@@ -1,61 +1,141 @@
-<div id="myModal" class="modal">
-  <button class="modal-close" onclick="closeModal()">close</button>
+<div
+  id="myModal"
+  class="modal"
+  role="dialog"
+  aria-modal="true"
+  aria-label="Image preview"
+>
+  <button
+    type="button"
+    class="modal-close"
+    onclick="closeModal()"
+    aria-label="Close image"
+  >
+    close
+  </button>
+
   <div class="modal-cont">
-    <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;" alt="Modal-pic">
+    <img
+      class="modal-pic"
+      id="modalPic"
+      onclick="closeModal()"
+      style="max-width: 100%; max-height: 80vh; margin: auto;"
+      alt="Image preview"
+    >
   </div>
 </div>
 
 <script>
-// Open the Modal
-function openModal(imageIdOrElement) {
-  var src;
+var modalTrigger = null;
 
-  if (typeof imageIdOrElement === 'string') {
-    // If it's a string (image ID), get the source using the ID
-    src = document.getElementById(imageIdOrElement).src;
-  } else if (imageIdOrElement instanceof HTMLImageElement) {
-    // If <img>, get the source directly. currentSrc is what the browser actually
-    // chose, so inside a <picture> the modal reuses the already-fetched WebP
-    // rather than downloading the larger original.
-    src = imageIdOrElement.currentSrc || imageIdOrElement.src;
+function openModal(image) {
+  if (!(image instanceof HTMLImageElement)) {
+    return;
   }
 
+  var src = image.currentSrc || image.src;
+
   if (src && src.includes("#")) {
     src = src.substring(0, src.indexOf("#"));
   }
 
-  document.getElementById("modalPic").src = src;
-  document.getElementById("myModal").style.display = "block";
+  var modal = document.getElementById("myModal");
+  var modalPic = document.getElementById("modalPic");
+  var closeButton = modal.querySelector(".modal-close");
+
+  modalTrigger = image.closest(".md__image-trigger");
+
+  modalPic.src = src;
+  modalPic.alt = image.alt || "Image preview";
+  modal.style.display = "block";
+
+  closeButton.focus();
 }
 
-// Close the Modal
-function closeModal() { 
-  document.getElementById("modalPic").src = "";
-  document.getElementById("myModal").style.display = "none";
+function closeModal() {
+  var modal = document.getElementById("myModal");
+  var modalPic = document.getElementById("modalPic");
+  var trigger = modalTrigger;
+
+  modalPic.src = "";
+  modal.style.display = "none";
+  modalTrigger = null;
+
+  if (trigger && document.contains(trigger)) {
+    trigger.focus();
+  }
+}
+
+function isModalOpen() {
+  return document.getElementById("myModal").style.display === "block";
+}
+
+function trapModalFocus(event) {
+  if (event.key !== "Tab" || !isModalOpen()) {
+    return;
+  }
+
+  var modal = document.getElementById("myModal");
+
+  var focusableElements = modal.querySelectorAll(
+    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+  );
+
+  if (!focusableElements.length) {
+    event.preventDefault();
+    return;
+  }
+
+  var firstElement = focusableElements[0];
+  var lastElement = focusableElements[focusableElements.length - 1];
+
+  if (event.shiftKey && document.activeElement === firstElement) {
+    event.preventDefault();
+    lastElement.focus();
+  } else if (!event.shiftKey && document.activeElement === lastElement) {
+    event.preventDefault();
+    firstElement.focus();
+  }
 }
 
-// Listen for the Escape key to close the modal
 document.addEventListener("keydown", function (event) {
-  if (event.key === "Escape") {
+  if (event.key === "Escape" && isModalOpen()) {
+    event.preventDefault();
     closeModal();
+    return;
   }
+
+  trapModalFocus(event);
 });
 
-// Attach onclick attribute to all <img> after DOM is loaded
 document.addEventListener("DOMContentLoaded", function () {
-  var imgTags = document.querySelectorAll("img");
-  imgTags.forEach(function (img) {
-    img.onclick = function () {
-      if (img.dataset.modal !== "false") {
-        openModal(img);
+  var modal = document.getElementById("myModal");
+
+  var imageTriggers = document.querySelectorAll(".md__image-trigger");
+
+  imageTriggers.forEach(function (trigger) {
+    var link = trigger.closest("a");
+    var image = trigger.querySelector("img");
+
+    if (link && image) {
+      image.dataset.modal = "false";
+      trigger.replaceWith(image);
+      return;
+    }
+
+    trigger.addEventListener("click", function () {
+      if (image) {
+        openModal(image);
       }
-    };
+    });
   });
 
-  // Close modal when clicking anywhere inside #myModal
-  var modal = document.getElementById("myModal");
-  modal.addEventListener("click", function () {
-    closeModal();
-  });
+  if (modal) {
+    modal.addEventListener("click", function (event) {
+      if (event.target === modal) {
+        closeModal();
+      }
+    });
+  }
 });
 </script>
\ No newline at end of file

From 5140d2f4dfc5dde0db5189c3af700a409a30a9d5 Mon Sep 17 00:00:00 2001
From: chinmayee <chinmayeers910@gmail.com>
Date: Sun, 20 Sep 2026 18:05:41 +0530
Subject: [PATCH 2/4] fix: preserve image alt text in modal

Signed-off-by: chinmayee <chinmayeers910@gmail.com>
---
 layouts/_default/_markup/render-image.html | 32 ----------------------
 layouts/partials/image-modal.html          | 12 +++++++-
 2 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 668ab083209f..b13198079d64 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,33 +1,3 @@
-<!-- Images that use the standard image format for markdown will be displayed in a
-  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. -->
-<!-- PNG and JPEG sources are encoded to WebP at build time and offered through
-  <picture>. The original stays as the <img> fallback, so nothing in content has
-  to change and browsers without WebP support still get a working image.
-  Content is mounted at assets/contentimg (see hugo.toml) because Hugo can only
-  process files that are resources. -->
-<!-- Onclick opens the modal, and displays/overlays the clicked image. -->
-<!-- attribution appreciated. github: zjeaton web: https://froglegs.co -->
-
-{{- $dest := .Destination -}}
-{{- $alt := .Text -}}
-{{- $class := "md-image-responsive" -}}
-{{- with .Title }}{{ $class = printf "md-image-responsive %s" . }}{{ end -}}
-{{- $img := "" -}}
-{{- $ext := lower (path.Ext $dest) -}}
-
-{{- if and (in (slice ".png" ".jpg" ".jpeg") $ext) (not (urls.Parse $dest).Scheme) (not (hasPrefix $dest "//")) -}}
-  {{- $rel := $dest -}}
-  {{- if not (hasPrefix $dest "/") -}}
-    {{- with .Page.File -}}
-      {{- $rel = path.Join (replace .Dir "\\" "/") $dest -}}
-    {{- end -}}
-  {{- end -}}
-  {{- $img = resources.Get (path.Join "contentimg" $rel) -}}
-  {{- if not $img -}}{{- $img = resources.Get $rel -}}{{- end -}}
-{{- end -}}
-
 <div class="md__image">
 {{- with $img }}
   {{- $webp := .Process "webp q85" }}
@@ -40,8 +10,6 @@
       <source
         srcset="{{ $webp.RelPermalink }}"
         type="image/webp"
-        width="{{ .Width }}"
-        height="{{ .Height }}"
       >
       <img
         src="{{ $dest | safeURL }}"
diff --git a/layouts/partials/image-modal.html b/layouts/partials/image-modal.html
index 312aaf5da3e4..0b78253e1b8d 100644
--- a/layouts/partials/image-modal.html
+++ b/layouts/partials/image-modal.html
@@ -46,7 +46,7 @@
   modalTrigger = image.closest(".md__image-trigger");
 
   modalPic.src = src;
-  modalPic.alt = image.alt || "Image preview";
+  modalPic.alt = image.alt;
   modal.style.display = "block";
 
   closeButton.focus();
@@ -130,6 +130,16 @@
     });
   });
 
+  document.querySelectorAll("img:not(.md__image-trigger img)").forEach(function (img) {
+    if (img.dataset.modal === "false" || img.closest("#myModal")) {
+      return;
+    }
+
+    img.addEventListener("click", function () {
+      openModal(img);
+    });
+  });
+
   if (modal) {
     modal.addEventListener("click", function (event) {
       if (event.target === modal) {

From e8128a5834a609a7edf43e04950a14a8c77fb646 Mon Sep 17 00:00:00 2001
From: chinmayee <chinmayeers910@gmail.com>
Date: Mon, 21 Sep 2026 16:53:17 +0530
Subject: [PATCH 3/4] fix: preserve image modal behavior

Signed-off-by: chinmayee <chinmayeers910@gmail.com>
---
 layouts/_default/_markup/render-image.html | 7 +++++++
 layouts/partials/image-modal.html          | 8 +++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index b13198079d64..82be1cd02a92 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,6 +1,9 @@
 <div class="md__image">
+
 {{- with $img }}
+
   {{- $webp := .Process "webp q85" }}
+
   <button
     type="button"
     class="md__image-trigger"
@@ -20,7 +23,9 @@
       />
     </picture>
   </button>
+
 {{- else }}
+
   <button
     type="button"
     class="md__image-trigger"
@@ -32,5 +37,7 @@
       class="{{ $class }}"
     />
   </button>
+
 {{- end }}
+
 </div>
\ No newline at end of file
diff --git a/layouts/partials/image-modal.html b/layouts/partials/image-modal.html
index 0b78253e1b8d..4c41b3917b5e 100644
--- a/layouts/partials/image-modal.html
+++ b/layouts/partials/image-modal.html
@@ -46,10 +46,16 @@
   modalTrigger = image.closest(".md__image-trigger");
 
   modalPic.src = src;
+<<<<<<< HEAD
   modalPic.alt = image.alt;
+=======
+  modalPic.alt = image.alt || "Image preview";
+>>>>>>> 5d542cec899 (fix: preserve image modal behavior)
   modal.style.display = "block";
 
-  closeButton.focus();
+  if (closeButton) {
+    closeButton.focus();
+  }
 }
 
 function closeModal() {

From 92e68280b2f72c1ecdc6032bf83eb6793d1b9846 Mon Sep 17 00:00:00 2001
From: chinmayee <chinmayeers910@gmail.com>
Date: Wed, 23 Sep 2026 21:05:35 +0530
Subject: [PATCH 4/4] fix: resolve image modal review issues

---
 layouts/_default/_markup/render-image.html |   8 +-
 layouts/partials/image-modal.html          | 308 ++++++++++-----------
 2 files changed, 157 insertions(+), 159 deletions(-)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 82be1cd02a92..433276addb9f 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,7 +1,10 @@
-<div class="md__image">
+{{- $alt := .Text -}}
+{{- $dest := .Destination -}}
+{{- $class := .Title -}}
+{{- $img := resources.Get (strings.TrimPrefix "/" $dest) -}}
 
+<div class="md__image">
 {{- with $img }}
-
   {{- $webp := .Process "webp q85" }}
 
   <button
@@ -39,5 +42,4 @@
   </button>
 
 {{- end }}
-
 </div>
\ No newline at end of file
diff --git a/layouts/partials/image-modal.html b/layouts/partials/image-modal.html
index 4c41b3917b5e..468f9dee8e6b 100644
--- a/layouts/partials/image-modal.html
+++ b/layouts/partials/image-modal.html
@@ -1,157 +1,153 @@
-<div
-  id="myModal"
-  class="modal"
-  role="dialog"
-  aria-modal="true"
-  aria-label="Image preview"
->
-  <button
-    type="button"
-    class="modal-close"
-    onclick="closeModal()"
-    aria-label="Close image"
-  >
-    close
-  </button>
-
-  <div class="modal-cont">
-    <img
-      class="modal-pic"
-      id="modalPic"
-      onclick="closeModal()"
-      style="max-width: 100%; max-height: 80vh; margin: auto;"
-      alt="Image preview"
-    >
-  </div>
-</div>
-
-<script>
-var modalTrigger = null;
-
-function openModal(image) {
-  if (!(image instanceof HTMLImageElement)) {
-    return;
-  }
-
-  var src = image.currentSrc || image.src;
-
-  if (src && src.includes("#")) {
-    src = src.substring(0, src.indexOf("#"));
-  }
-
-  var modal = document.getElementById("myModal");
-  var modalPic = document.getElementById("modalPic");
-  var closeButton = modal.querySelector(".modal-close");
-
-  modalTrigger = image.closest(".md__image-trigger");
-
-  modalPic.src = src;
-<<<<<<< HEAD
-  modalPic.alt = image.alt;
-=======
-  modalPic.alt = image.alt || "Image preview";
->>>>>>> 5d542cec899 (fix: preserve image modal behavior)
-  modal.style.display = "block";
-
-  if (closeButton) {
-    closeButton.focus();
-  }
-}
-
-function closeModal() {
-  var modal = document.getElementById("myModal");
-  var modalPic = document.getElementById("modalPic");
-  var trigger = modalTrigger;
-
-  modalPic.src = "";
-  modal.style.display = "none";
-  modalTrigger = null;
-
-  if (trigger && document.contains(trigger)) {
-    trigger.focus();
-  }
-}
-
-function isModalOpen() {
-  return document.getElementById("myModal").style.display === "block";
-}
-
-function trapModalFocus(event) {
-  if (event.key !== "Tab" || !isModalOpen()) {
-    return;
-  }
-
-  var modal = document.getElementById("myModal");
-
-  var focusableElements = modal.querySelectorAll(
-    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
-  );
-
-  if (!focusableElements.length) {
-    event.preventDefault();
-    return;
-  }
-
-  var firstElement = focusableElements[0];
-  var lastElement = focusableElements[focusableElements.length - 1];
-
-  if (event.shiftKey && document.activeElement === firstElement) {
-    event.preventDefault();
-    lastElement.focus();
-  } else if (!event.shiftKey && document.activeElement === lastElement) {
-    event.preventDefault();
-    firstElement.focus();
-  }
-}
-
-document.addEventListener("keydown", function (event) {
-  if (event.key === "Escape" && isModalOpen()) {
-    event.preventDefault();
-    closeModal();
-    return;
-  }
-
-  trapModalFocus(event);
-});
-
-document.addEventListener("DOMContentLoaded", function () {
-  var modal = document.getElementById("myModal");
-
-  var imageTriggers = document.querySelectorAll(".md__image-trigger");
-
-  imageTriggers.forEach(function (trigger) {
-    var link = trigger.closest("a");
-    var image = trigger.querySelector("img");
-
-    if (link && image) {
-      image.dataset.modal = "false";
-      trigger.replaceWith(image);
-      return;
-    }
-
-    trigger.addEventListener("click", function () {
-      if (image) {
-        openModal(image);
-      }
-    });
-  });
-
-  document.querySelectorAll("img:not(.md__image-trigger img)").forEach(function (img) {
-    if (img.dataset.modal === "false" || img.closest("#myModal")) {
-      return;
-    }
-
-    img.addEventListener("click", function () {
-      openModal(img);
-    });
-  });
-
-  if (modal) {
-    modal.addEventListener("click", function (event) {
-      if (event.target === modal) {
-        closeModal();
-      }
-    });
-  }
-});
+<div 
+  id="myModal" 
+  class="modal" 
+  role="dialog" 
+  aria-modal="true" 
+  aria-label="Image preview" 
+> 
+  <button 
+    type="button" 
+    class="modal-close" 
+    onclick="closeModal()" 
+    aria-label="Close image" 
+  > 
+    close 
+  </button> 
+ 
+  <div class="modal-cont"> 
+    <img 
+      class="modal-pic" 
+      id="modalPic" 
+      onclick="closeModal()" 
+      style="max-width: 100%; max-height: 80vh; margin: auto;" 
+      alt="Image preview" 
+    > 
+  </div> 
+</div> 
+ 
+<script> 
+var modalTrigger = null; 
+ 
+function openModal(image) { 
+  if (!(image instanceof HTMLImageElement)) { 
+    return; 
+  } 
+ 
+  var src = image.currentSrc || image.src; 
+ 
+  if (src && src.includes("#")) { 
+    src = src.substring(0, src.indexOf("#")); 
+  } 
+ 
+  var modal = document.getElementById("myModal"); 
+  var modalPic = document.getElementById("modalPic"); 
+  var closeButton = modal.querySelector(".modal-close"); 
+ 
+  modalTrigger = image.closest(".md__image-trigger"); 
+ 
+  modalPic.src = src; 
+  modalPic.alt = image.alt || "Image preview"; 
+  modal.style.display = "block"; 
+ 
+  if (closeButton) { 
+    closeButton.focus(); 
+  } 
+} 
+ 
+function closeModal() { 
+  var modal = document.getElementById("myModal"); 
+  var modalPic = document.getElementById("modalPic"); 
+  var trigger = modalTrigger; 
+ 
+  modalPic.src = ""; 
+  modal.style.display = "none"; 
+  modalTrigger = null; 
+ 
+  if (trigger && document.contains(trigger)) { 
+    trigger.focus(); 
+  } 
+} 
+ 
+function isModalOpen() { 
+  return document.getElementById("myModal").style.display === "block"; 
+} 
+ 
+function trapModalFocus(event) { 
+  if (event.key !== "Tab" || !isModalOpen()) { 
+    return; 
+  } 
+ 
+  var modal = document.getElementById("myModal"); 
+ 
+  var focusableElements = modal.querySelectorAll( 
+    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' 
+  ); 
+ 
+  if (!focusableElements.length) { 
+    event.preventDefault(); 
+    return; 
+  } 
+ 
+  var firstElement = focusableElements[0]; 
+  var lastElement = focusableElements[focusableElements.length - 1]; 
+ 
+  if (event.shiftKey && document.activeElement === firstElement) { 
+    event.preventDefault(); 
+    lastElement.focus(); 
+  } else if (!event.shiftKey && document.activeElement === lastElement) { 
+    event.preventDefault(); 
+    firstElement.focus(); 
+  } 
+} 
+ 
+document.addEventListener("keydown", function (event) { 
+  if (event.key === "Escape" && isModalOpen()) { 
+    event.preventDefault(); 
+    closeModal(); 
+    return; 
+  } 
+ 
+  trapModalFocus(event); 
+}); 
+ 
+document.addEventListener("DOMContentLoaded", function () { 
+  var modal = document.getElementById("myModal"); 
+ 
+  var imageTriggers = document.querySelectorAll(".md__image-trigger"); 
+ 
+  imageTriggers.forEach(function (trigger) { 
+    var link = trigger.closest("a"); 
+    var image = trigger.querySelector("img"); 
+ 
+    if (link && image) { 
+      image.dataset.modal = "false"; 
+      trigger.replaceWith(image); 
+      return; 
+    } 
+ 
+    trigger.addEventListener("click", function () { 
+      if (image) { 
+        openModal(image); 
+      } 
+    }); 
+  }); 
+ 
+  document.querySelectorAll("img:not(.md__image-trigger img)").forEach(function (img) { 
+    if (img.dataset.modal === "false" || img.closest("#myModal")) { 
+      return; 
+    } 
+ 
+    img.addEventListener("click", function () { 
+      openModal(img); 
+    }); 
+  }); 
+ 
+  if (modal) { 
+    modal.addEventListener("click", function (event) { 
+      if (event.target === modal) { 
+        closeModal(); 
+      } 
+    }); 
+  } 
+}); 
 </script>
\ No newline at end of file