fix image lightbox dimensions

ivelum · Jan 3, 2025 · 7e208db · 7e208db
1 parent 49583dc
commit 7e208db
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -1,11 +1,18 @@
-<a href="{{ .Destination }}">
+{{- $img := .Page.Resources.Get .Destination }}
+{{- $width := "" }}
+{{- $height := "" }}
+{{- if ne $img.MediaType.SubType "svg" }}
+  {{- $width = $img.Width }}
+  {{- $height = $img.Height }}
+{{- end }}
+<a href="{{ .Destination }}" data-pswp-width="{{ $width }}" data-pswp-height="{{ $height }}">
 {{/*
   The maximum article container width is set to 738px with 1.25rem padding
   (see the ".narrow-container" class), which results in the effective maximum
   image width of 698px.
 */}}
 {{- partial "image.html" (dict
-  "Img" (.Page.Resources.Get .Destination)
+  "Img" $img
   "Alt" .Text
   "Width" 698
   ) }}

diff --git a/static/js/lightbox.js b/static/js/lightbox.js
@@ -17,9 +17,6 @@ window.addEventListener("load", function () {
         parentNode = parentNode.parentNode;
       }
       if (parentNode.tagName === "A") {
-        parentNode.setAttribute("data-pswp-width", img.naturalWidth);
-        parentNode.setAttribute("data-pswp-height", img.naturalHeight);
-
         const lightbox = new PhotoSwipeLightbox({
           gallery: parentNode,
           pswpModule: PhotoSwipe