From 9718b626db3920a6914f7cc9f9e33db42bbfa324 Mon Sep 17 00:00:00 2001
From: ByteHamster <info@bytehamster.com>
Date: Wed, 6 May 2026 21:54:45 +0200
Subject: [PATCH] Simplify image tag (and add animation)

---
 _includes/head.html              |  1 +
 _includes/image-popup-modal.html |  8 ++++++++
 _includes/image.html             | 31 +++++++------------------------
 _layouts/blog.html               |  1 +
 _layouts/doc.html                |  1 +
 _layouts/download.html           |  1 +
 _layouts/homepage.html           |  1 +
 _layouts/internal.html           |  1 +
 assets/css/main.scss             | 14 ++++++++++++++
 assets/js/image-popup.js         | 18 ++++++++++++++++++
 10 files changed, 53 insertions(+), 24 deletions(-)
 create mode 100644 _includes/image-popup-modal.html
 create mode 100644 assets/js/image-popup.js

diff --git a/_includes/head.html b/_includes/head.html
index 319e744ba..f789b400c 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -78,3 +78,4 @@
   <script defer src="/assets/js/github-mentions.js"></script>
   <script defer src="/assets/js/contributors.js"></script>
   <script defer src="/assets/js/localize-links.js"></script>
+  <script defer src="/assets/js/image-popup.js"></script>
diff --git a/_includes/image-popup-modal.html b/_includes/image-popup-modal.html
new file mode 100644
index 000000000..b18b3a882
--- /dev/null
+++ b/_includes/image-popup-modal.html
@@ -0,0 +1,8 @@
+<div class="modal fade" id="imgPopupModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal-content rounded">
+      <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
+      <img id="imgPopupModalImg" src="" alt="" width="100%" class="rounded" loading="lazy">
+    </div>
+  </div>
+</div>
diff --git a/_includes/image.html b/_includes/image.html
index 731909313..a59029ee8 100644
--- a/_includes/image.html
+++ b/_includes/image.html
@@ -19,30 +19,13 @@
    {%- elsif english-exists == true %}
       {{- english-url }}
    {%- else %}
-      {{- single-url }}	
+      {{- single-url }}
    {%- endif %}
 {%- endcapture -%}
 
-{% unless include.islink == true %}<a role="button" data-bs-toggle="modal" data-bs-target="#imgModal{{ include.file | remove:'.' }}">{% endunless %}
-  <img src="{{ url }}" alt="{{ img-alt }}" loading="lazy"
-    {%- if include.width %} width="{{ include.width }}"{% endif %}
-    style="
-      {%- if include.max-width %}max-width:{{ include.max-width }}; {% endif %}
-      {%- if include.max-height %}max-height:{{ include.max-height }}; {% endif %}"
-    class="rounded mt-2 {{ include.class }}">
-{% unless include.islink == true %}</a>
-
-<div class="modal fade" id="imgModal{{ include.file | remove:'.' }}" tabindex="-1" aria-labelledby="imgModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered modal-lg">
-    <div class="modal-content rounded">
-        <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
-        <img src="{{ url }}" alt="{{ img-alt }}" width="100%" class="rounded" loading="lazy">
-      {%- if include.footnote %}
-      <div class="modal-footer border-0 pt-0">
-        {{ include.footnote }}
-      </div>
-      {%- endif %}
-    </div>
-  </div>
-</div>
-{%- endunless %}
+<img src="{{ url }}" alt="{{ img-alt }}" loading="lazy"
+  {%- if include.width %} width="{{ include.width }}"{% endif %}
+  style="
+    {%- if include.max-width %}max-width:{{ include.max-width }}; {% endif %}
+    {%- if include.max-height %}max-height:{{ include.max-height }}; {% endif %}"
+  class="rounded mt-2 {{ include.class }}{% unless include.islink == true %} img-popup{% endunless %}">
diff --git a/_layouts/blog.html b/_layouts/blog.html
index aa3b9afaa..8d56d2090 100644
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@@ -163,6 +163,7 @@ <h6 class="fw-semibold text-body mb-2" style="display: -webkit-box; -webkit-line
   </main>
 </div>
   {% include footer.html %}
+  {% include image-popup-modal.html %}
 </body>
 
 </html>
diff --git a/_layouts/doc.html b/_layouts/doc.html
index 720bfd528..d4ca30586 100644
--- a/_layouts/doc.html
+++ b/_layouts/doc.html
@@ -33,6 +33,7 @@
     </main>
 </div>
     {% include footer.html %}
+    {% include image-popup-modal.html %}
 </body>
 
 </html>
diff --git a/_layouts/download.html b/_layouts/download.html
index 972ef8ea5..b43907b61 100644
--- a/_layouts/download.html
+++ b/_layouts/download.html
@@ -35,5 +35,6 @@ <h1 class="text-body fw-bold">{% t generic.download %}</h1>
       </main>
     </div>
     {% include footer.html %}
+    {% include image-popup-modal.html %}
   </body>
 </html>
diff --git a/_layouts/homepage.html b/_layouts/homepage.html
index 7892dce70..675f431ed 100644
--- a/_layouts/homepage.html
+++ b/_layouts/homepage.html
@@ -13,5 +13,6 @@
       </main>
     </div>
     {% include footer.html %}
+    {% include image-popup-modal.html %}
   </body>
 </html>
diff --git a/_layouts/internal.html b/_layouts/internal.html
index 381b4a0ff..241dec1ec 100644
--- a/_layouts/internal.html
+++ b/_layouts/internal.html
@@ -12,5 +12,6 @@
     </main>
     </div>
     {% include footer.html %}
+    {% include image-popup-modal.html %}
   </body>
 </html>
diff --git a/assets/css/main.scss b/assets/css/main.scss
index c6250bc8b..f79d0a18e 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -54,3 +54,17 @@ code.language-plaintext {
 #mainlogo {
     max-height: 40px;
 }
+
+#imgPopupModal.fade,
+.modal-backdrop.fade {
+    transition: opacity 0.2s linear;
+}
+
+#imgPopupModal .modal-dialog {
+    transform: scale(0.9);
+    transition: transform 0.2s ease;
+}
+
+#imgPopupModal.show .modal-dialog {
+    transform: scale(1);
+}
diff --git a/assets/js/image-popup.js b/assets/js/image-popup.js
new file mode 100644
index 000000000..d51720a32
--- /dev/null
+++ b/assets/js/image-popup.js
@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const images = document.querySelectorAll('img.img-popup');
+  if (!images.length) return;
+
+  const modal = document.getElementById('imgPopupModal');
+  const popupImg = document.getElementById('imgPopupModalImg');
+  const bsModal = new bootstrap.Modal(modal);
+
+  images.forEach(function(img) {
+    img.style.cursor = 'pointer';
+    img.setAttribute('role', 'button');
+    img.addEventListener('click', function() {
+      popupImg.src = img.src;
+      popupImg.alt = img.alt;
+      bsModal.show();
+    });
+  });
+});