Simplify image tag (and add animation)

_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>

_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>

_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 %}">

_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>

_layouts/doc.html

@@ -33,6 +33,7 @@
     </main>
 </div>
     {% include footer.html %}
+    {% include image-popup-modal.html %}
 </body>
 
 </html>

_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>

_layouts/homepage.html

@@ -13,5 +13,6 @@
       </main>
     </div>
     {% include footer.html %}
+    {% include image-popup-modal.html %}
   </body>
 </html>

_layouts/internal.html

@@ -12,5 +12,6 @@
     </main>
     </div>
     {% include footer.html %}
+    {% include image-popup-modal.html %}
   </body>
 </html>

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);
+}

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();
+    });
+  });
+});