From 07744a962fe5576d9267e80d9c5965a9b6cb6018 Mon Sep 17 00:00:00 2001
From: Seokhyun Lee <gbvrcx@gmail.com>
Date: Sat, 9 Sep 2023 17:36:52 +0900
Subject: [PATCH] Photos with thumnails and large modal carousel

---
 content/photos/_index.md        | 17 ---------
 content/photos/index.md         |  9 +++++
 layouts/shortcodes/gallery.html | 61 ++++++++++++++++++++++++---------
 3 files changed, 54 insertions(+), 33 deletions(-)
 delete mode 100644 content/photos/_index.md
 create mode 100644 content/photos/index.md

diff --git a/content/photos/_index.md b/content/photos/_index.md
deleted file mode 100644
index 94caf72..0000000
--- a/content/photos/_index.md
+++ /dev/null
@@ -1,17 +0,0 @@
-+++
-draft = false
-title = 'Photos'
-menu = 'main'
-weight = 80
-+++
-
-# SIGPL 2023 Summer - Kangwon University
-{{< gallery >}}
-./sigpl23s/20230824_172410.jpg
-./sigpl23s/20230824_172411.jpg
-./sigpl23s/20230824_172412.jpg
-./sigpl23s/20230824_172422.jpg
-./sigpl23s/20230824_172452.jpg
-./sigpl23s/20230824_172454.jpg
-./sigpl23s/20230824_172459.jpg
-{{< /gallery >}}
diff --git a/content/photos/index.md b/content/photos/index.md
new file mode 100644
index 0000000..2316236
--- /dev/null
+++ b/content/photos/index.md
@@ -0,0 +1,9 @@
++++
+draft = false
+title = 'Photos'
+menu = 'main'
+weight = 80
++++
+
+# SIGPL 2023 Summer - Kangwon University
+{{< gallery folder="./sigpl23s" >}}
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index 1c64fbd..1f51a53 100644
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -1,19 +1,48 @@
-{{ $images := trim .Inner "\n" }}
-{{ $images := split $images "\n" }}
-<div id="carouselExample" class="carousel slide">
-    <div class="carousel-inner">
-        {{ range $idx, $image := $images }}
-        <div class="carousel-item{{ if eq $idx 0 }} active{{ end }}">
-            <img src="{{ $image }}" class="d-block w-100" alt="{{ $image }}">
-        </div>
+{{ $folder := .Get "folder" }}
+{{ $folder := strings.TrimPrefix "./" $folder }}
+{{ $images := .Page.Resources.ByType "image" }}
+{{ $images := print $folder "/*" | $images.Match }}
+{{ $name := split $folder "/" }}
+{{ $name := last 1 $name }}
+{{ $name := index $name 0 }}
+
+<div class="d-flex overflow-x-scroll mb-4">
+    {{ range $idx, $image := $images }}
+        {{ $image := strings.TrimPrefix "./" $image }}
+        {{ $image := $.Page.Resources.GetMatch $image }}
+        {{ with $image }}
+            {{ $image := .Resize "x200" }}
+            {{ $image := $image.Crop "200x200 center" }}
+            <div data-bs-toggle="modal" data-bs-target="#{{ $name }}Modal" role="button">
+                <div data-bs-target="#{{ $name }}Carousel" data-bs-slide-to="{{ $idx }}">
+                    <img src="{{ $image.RelPermalink }}" class="img-thumbnail mt-2 me-2" alt="{{ $image.Name }}">
+                </div>
+            </div>
         {{ end }}
+    {{ end }}
+</div>
+
+<div class="modal fade" id="{{ $name }}Modal" tabindex="-1" aria-labelledby="{{ $name }}ModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-xl">
+        <div class="modal-content bg-transparent border-0">
+            <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
+            <div id="{{ $name }}Carousel" class="carousel slide">
+                <div class="carousel-inner">
+                    {{ range $idx, $image := $images }}
+                    <div class="carousel-item{{ if eq $idx 0 }} active{{ end }}">
+                        <img src="{{ $image }}" class="d-block w-100" alt="{{ $image }}">
+                    </div>
+                    {{ end }}
+                </div>
+                <button class="carousel-control-prev" type="button" data-bs-target="#{{ $name }}Carousel" data-bs-slide="prev">
+                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                    <span class="visually-hidden">Previous</span>
+                </button>
+                <button class="carousel-control-next" type="button" data-bs-target="#{{ $name }}Carousel" data-bs-slide="next">
+                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                    <span class="visually-hidden">Next</span>
+                </button>
+            </div>
+        </div>
     </div>
-    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Previous</span>
-    </button>
-    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Next</span>
-    </button>
 </div>
\ No newline at end of file