Fix lightbox initialization to not wrap images out of content.

ivelum · Dec 25, 2024 · d2a23f4 · d2a23f4
1 parent 29029be
commit d2a23f4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -40,12 +40,14 @@ <h1 class="article--title">{{ .Title }}</h1>
 
         <div class="article--follow">
           <div>Follow us:</div>
-ку          <a href="https://www.linkedin.com/company/ivelum/" target="_blank">
+          <a href="https://www.linkedin.com/company/ivelum/" target="_blank">
             <img src="{{ (resources.Get "img/ico-linkedin.svg").RelPermalink }}" />
           </a>
         </div>
       </div>
-      {{ .Content }}
+      <div class="article--content">
+        {{ .Content }}
+      </div>
       {{/* partial "blog-subscribe-form.html" . */}}
     </article>
     {{ partial "blog-navigation.html" . }}

diff --git a/static/js/lightbox.js b/static/js/lightbox.js
@@ -8,16 +8,19 @@ window.addEventListener("load", function () {
   document.head.appendChild(link);
 
   link.href = '/vendor/photoswipe.css';
-  document.querySelectorAll('img').forEach(function (img) {
-    if (img.parentNode.tagName === "A") {
-      img.parentNode.setAttribute("data-pswp-width", img.naturalWidth);
-      img.parentNode.setAttribute("data-pswp-height", img.naturalHeight);
+  document
+    .getElementsByClassName("article--content")[0]
+    .querySelectorAll('img')
+    .forEach(function (img) {
+      if (img.parentNode.tagName === "A") {
+        img.parentNode.setAttribute("data-pswp-width", img.naturalWidth);
+        img.parentNode.setAttribute("data-pswp-height", img.naturalHeight);
 
-      const lightbox = new PhotoSwipeLightbox({
-        gallery: img.parentNode,
-        pswpModule: PhotoSwipe
-      });
-      lightbox.init();
-    }
-  });
+        const lightbox = new PhotoSwipeLightbox({
+          gallery: img.parentNode,
+          pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+      }
+    });
 });