ssube · May 24, 2022 13:55 · May 24, 2022 · May 19, 2022 · May 19, 2022 · May 19, 2022
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 A basic image gallery shortcode for Hugo, using https://www.lightgalleryjs.com/.
 
-Image metadata, such as alt text, can be added to the frontmatter using the `gallery` key and filename. If the page contains any `{{< gallery >}}` tags, the param is required, but can be an empty list: `gallery: []`.
+Image metadata, such as alt text, can be added to the frontmatter using the `resources` key and filename: https://gohugo.io/content-management/page-resources/#resources-metadata-example
 
 The gallery features and transition can be set through the lightgallery plugins and options, please see:
 

diff --git a/layouts-shortcodes-gallery.html b/layouts-shortcodes-gallery.html
@@ -4,11 +4,10 @@
 
 <div id="gallery-{{ $.Get 1 }}" class="gallery-frame">
 {{ range $gallery }}
-    {{ $meta := index (where $.Page.Params.gallery "name" .Name) 0 }}
     {{ $resized := .Fit $size }}
     <div class="gallery-item" data-src="{{ .Permalink }}">
         <a class="thumbnail" href="{{ .Permalink }}" data-lightbox="{{ $.Get 1 }}">
-            <img src="{{ $resized.Permalink }}" alt="{{ default "no alt text provided" $meta.alt }}" />
+            <img src="{{ $resized.Permalink }}" alt="{{ default "no alt text provided" .Title }}" />
         </a>
     </div>
 {{ end }}

diff --git a/post-example-index.md b/post-example-index.md
@@ -1,9 +1,9 @@
 ---
 title: Example Gallery
 
-gallery:
-  - name: 'img/test.png'
-    alt: 'an image full of testing'
+resources:
+  - src: 'img/test.png'
+    title: 'an image full of testing'
 ---
 
 Some words.

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 A basic image gallery shortcode for Hugo, using https://www.lightgalleryjs.com/.
 
-Image metadata, such as alt text, can be added to the frontmatter using the `gallery` key and filename.
+Image metadata, such as alt text, can be added to the frontmatter using the `gallery` key and filename. If the page contains any `{{< gallery >}}` tags, the param is required, but can be an empty list: `gallery: []`.
 
 The gallery features and transition can be set through the lightgallery plugins and options, please see:
 

diff --git a/post-example-index.md b/post-example-index.md
@@ -8,6 +8,6 @@ gallery:
 
 Some words.
 
-{{< gallery "img/*.png" "test" >}}
+{{< gallery "img/*.png" "test" "300x200 q75" >}}
 
 An image gallery, and some more words.
diff --git a/layouts-shortcodes-gallery.html b/layouts-shortcodes-gallery.html
@@ -1,10 +1,11 @@
 {{ $filter := default "images/*" (.Get 0) }}
 {{ $gallery := (.Page.Resources.Match $filter) }}
+{{ $size := default "200x120 q50" (.Get 2) }}
 
 <div id="gallery-{{ $.Get 1 }}" class="gallery-frame">
 {{ range $gallery }}
     {{ $meta := index (where $.Page.Params.gallery "name" .Name) 0 }}
-    {{ $resized := .Fill "200x120 q50" }}
+    {{ $resized := .Fit $size }}
     <div class="gallery-item" data-src="{{ .Permalink }}">
         <a class="thumbnail" href="{{ .Permalink }}" data-lightbox="{{ $.Get 1 }}">
             <img src="{{ $resized.Permalink }}" alt="{{ default "no alt text provided" $meta.alt }}" />
@@ -15,6 +16,7 @@
 
 <script type="text/javascript">
     lightGallery(document.getElementById('gallery-{{ $.Get 1 }}'), {
+        mode: 'lg-fade',
         plugins: [lgPager, lgZoom],
         selector: '.gallery-item',
         speed: 250,

diff --git a/README.md b/README.md
@@ -1,3 +1,8 @@
 A basic image gallery shortcode for Hugo, using https://www.lightgalleryjs.com/.
 
 Image metadata, such as alt text, can be added to the frontmatter using the `gallery` key and filename.
+
+The gallery features and transition can be set through the lightgallery plugins and options, please see:
+
+- https://www.lightgalleryjs.com/docs/settings/
+- https://www.lightgalleryjs.com/demos/transitions/
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+A basic image gallery shortcode for Hugo, using https://www.lightgalleryjs.com/.
+
+Image metadata, such as alt text, can be added to the frontmatter using the `gallery` key and filename.
diff --git a/layouts-partials-css.html b/layouts-partials-css.html
@@ -0,0 +1,18 @@
+<!-- light gallery -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.4.0/css/lightgallery-bundle.min.css" integrity="sha384-dBF8MEM2phKRyLDWAAiv46eog697GrUsdB8kIwEzCgyaIQkCNu08OjhnC8cSZOqh" crossorigin="anonymous" />
+
+<style>
+
+.gallery-frame {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  padding: 1rem;
+}
+
+.gallery-item {
+  margin: 1rem;
+}
+
+</style>
diff --git a/layouts-partials-js.html b/layouts-partials-js.html
@@ -0,0 +1,4 @@
+<!-- light gallery -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.4.0/lightgallery.min.js" integrity="sha384-SMXsJkdv0pWRFF7S1lZPUvnBOw2WnTKw88DRxOqLysifuSomt1/jdArjX6c+d8yu" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.4.0/plugins/pager/lg-pager.min.js" integrity="sha384-KWUYFmH9+fIKCHDl+8GwbHvmGw3Q4qk0mVB1BBRznlQIZma3czxxpeVQtD71bM64" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.4.0/plugins/zoom/lg-zoom.min.js" integrity="sha384-B2e5p5SHlYQtPrvEdMpFrKtwNN5cJgFgKWpZBLdEmgjDjaPKl7bVh0masHqDdHoc" crossorigin="anonymous"></script>
diff --git a/layouts-shortcodes-gallery.html b/layouts-shortcodes-gallery.html
@@ -0,0 +1,22 @@
+{{ $filter := default "images/*" (.Get 0) }}
+{{ $gallery := (.Page.Resources.Match $filter) }}
+
+<div id="gallery-{{ $.Get 1 }}" class="gallery-frame">
+{{ range $gallery }}
+    {{ $meta := index (where $.Page.Params.gallery "name" .Name) 0 }}
+    {{ $resized := .Fill "200x120 q50" }}
+    <div class="gallery-item" data-src="{{ .Permalink }}">
+        <a class="thumbnail" href="{{ .Permalink }}" data-lightbox="{{ $.Get 1 }}">
+            <img src="{{ $resized.Permalink }}" alt="{{ default "no alt text provided" $meta.alt }}" />
+        </a>
+    </div>
+{{ end }}
+</div>
+
+<script type="text/javascript">
+    lightGallery(document.getElementById('gallery-{{ $.Get 1 }}'), {
+        plugins: [lgPager, lgZoom],
+        selector: '.gallery-item',
+        speed: 250,
+    });
+</script>
diff --git a/post-example-index.md b/post-example-index.md
@@ -0,0 +1,13 @@
+---
+title: Example Gallery
+
+gallery:
+  - name: 'img/test.png'
+    alt: 'an image full of testing'
+---
+
+Some words.
+
+{{< gallery "img/*.png" "test" >}}
+
+An image gallery, and some more words.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		A basic image gallery shortcode for Hugo, using https://www.lightgalleryjs.com/.

		Image metadata, such as alt text, can be added to the frontmatter using the `gallery` key and filename.