Add archive gallery.

2026-08-08 14:43:36 +02:00
parent 487cc8e2dd
commit a53578ec70
55 changed files with 419 additions and 22 deletions
@@ -0,0 +1,63 @@
+{{ define "main" }}
+<article class="container py-5">
+  <div class="row justify-content-center">
+    <div class="col">
+      <h1 class="display-5 fw-bold mb-4">{{ .Title }}</h1>
+      <div class="content-body mb-4">
+        {{ .Content }}
+      </div>
+
+      <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-4">
+        {{ range $index, $image := .Resources.ByType "image" }}
+          {{ $thumb := $image.Fill "400x300 Center" }}
+          {{ $caption := $image.Params.caption }}
+          {{ $modalID := printf "gallery-image-%d" $index }}
+          <div class="col">
+            <a href="#" class="text-decoration-none" role="button"
+               data-bs-toggle="modal" data-bs-target="#{{ $modalID }}">
+              <div class="card h-100">
+                <img src="{{ $thumb.RelPermalink }}"
+                     width="{{ $thumb.Width }}" height="{{ $thumb.Height }}"
+                     class="card-img-top" loading="lazy"
+                     alt="{{ if $caption }}{{ $caption }}{{ else }}{{ $image.Name }}{{ end }}">
+                {{ if $caption }}
+                  <div class="card-body py-2">
+                    <p class="card-text small text-center mb-0">{{ $caption }}</p>
+                  </div>
+                {{ end }}
+              </div>
+            </a>
+          </div>
+
+          <div class="modal fade" id="{{ $modalID }}" tabindex="-1"
+               aria-labelledby="{{ $modalID }}-label" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-lg">
+              <div class="modal-content">
+                {{ if $caption }}
+                  <div class="modal-header">
+                    <h5 class="modal-title" id="{{ $modalID }}-label">{{ $caption }}</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                  </div>
+                {{ else }}
+                  <div class="modal-header border-0 pb-0">
+                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
+                  </div>
+                {{ end }}
+                <div class="modal-body text-center pt-0">
+                  <img src="{{ $image.RelPermalink }}" class="img-fluid"
+                       alt="{{ if $caption }}{{ $caption }}{{ else }}{{ $image.Name }}{{ end }}">
+                </div>
+                <div class="modal-footer justify-content-center">
+                  <a href="{{ $image.RelPermalink }}" target="_blank" rel="noopener" class="small">
+                    View full size &#8599;
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</article>
+{{ end }}