Ajout lightbox JS

themes/anna/assets/sass/main.scss

@@ -132,13 +132,12 @@ body {
     margin-top: 1rem;
     margin-bottom: 3rem;
   }
-  ul {
+  #portfolio-gallery {
     margin-left: 1rem;
     margin-right: 1rem;
     display: flex;
     flex-wrap: wrap;
-    list-style-type: none !important;
-    li {
+    a {
       img {
         max-width: 100%;
       }

themes/anna/layouts/partials/head.html

@@ -7,5 +7,5 @@
     {{ $styles := resources.Get "sass/main.scss" | toCSS }}
     <link rel="stylesheet" href="{{ $styles.Permalink }}">
     <link rel="canonical" href="{{ .Permalink }}">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/css/lightgallery.min.css">
 </head>
-

themes/anna/layouts/portfolio/single.html

@@ -3,18 +3,20 @@
   <article>
     <div class="content portfolio">
       <h1>{{ .Title }}</h1>
-      <ul>
+      <div id="portfolio-gallery">
         {{ range .Params.images }}
         {{ $img := $.Page.Resources.GetMatch . }}
-        <li>
-          <figure>
-            <img src="{{ $img.RelPermalink }}" alt="">
-          </figure>
-        </li>
+        <a href="{{ $img.RelPermalink }}">
+          <img src="{{ $img.RelPermalink }}" alt="">
+        </a>
         {{ end }}
-      </ul>
+      </div>
       {{ .Content }}
     </div>
   </article>
 </section>
+<script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/js/lightgallery.min.js"></script>
+<script>
+  lightGallery(document.getElementById('portfolio-gallery'));
+</script>
 {{ end }}