Add generic code to build album of all images

assets/js/gallery.js

@@ -0,0 +1,36 @@
+$(function(){
+    $.get('./index.json', function(data) {
+        var items = $.map(data.images, function(img) {
+            return {
+                src: img.url,
+                srct: img.thumbnail,
+                height: img.height,
+                width: img.width,
+            }
+        });
+
+        $('#gallery').nanogallery2({
+            thumbnailHeight: 200,
+            thumbnailWidth: 'auto',
+
+            thumbnailGutterWidth: 10,
+            thumbnailGutterHeight: 10,
+
+            thumbnailDisplayTransition: 'scaleUp',
+            thumbnailDisplayTransitionDuration: 700,
+
+            thumbnailHoverEffect2: 'toolsAppear|scale120|borderLighter',
+
+            // thumbnailToolbarImage: {
+            //     topLeft: 'share|download',
+            // },
+
+            viewerGallery: 'bottom',
+            viewerTools: {
+                topRight: 'zoomButton, fullscreenButton, downloadButton, closeButton',
+            },
+
+            items,
+        })
+    })
+})

layouts/albums/list.html

@@ -0,0 +1,32 @@
+{{ define "main" }}
+  <h2>{{ .Title }}</h2>
+  {{ partial "albums/breadcrumbs.html" . }}
+  {{ .Content }}
+  <div class="subalbums">
+    {{ range .Pages.GroupBy "Weight" }}
+      {{ range .Pages.ByTitle }}
+        <a href="{{ .RelPermalink }}" class="subalbum">
+          <div class="teaser">
+            {{ $sa := . }}
+            {{ with .Params.teaserImage }}
+              {{ $img := $sa.Resources.Get . }}
+              <img src="{{ ($img.Fit "300x200 webm").RelPermalink }}" alt="{{ $sa.Title }}">
+            {{ else }}
+              {{ warnf "Could not find teaser image for %s" .RelPermalink }}
+              <img src="{{ (resources.Get "img/no-image.png").RelPermalink }}">
+            {{ end }}
+          </div>
+          <div class="title">{{ .Title }}</div>
+        </a>
+      {{ end }}
+    {{ end }}
+  </div>
+  <div class="images">
+    {{ with .Resources.Get "album.zip" }}
+      <div class="download">
+        <a href="{{ .RelPermalink }}" class="button" download="{{ $.Title }}">Ganzes Album herunter laden</a>
+      </div>
+    {{ end }}
+    <div id="gallery"></div>
+  </div>
+{{ end }}

layouts/partials/albums/breadcrumbs.html

@@ -0,0 +1,8 @@
+{{ with .Ancestors }}
+<div class="breadcrumbs">
+    Sie sind hier: {{ range .Reverse }}
+        <a href="{{ .RelPermalink }}">{{ .Title }}</a> /
+    {{ end }}
+    {{ $.Title}}
+</div>
+{{ end }}

layouts/partials/albums/images.json

@@ -1,12 +1,24 @@
 {{- $first := true -}}
+{{- $filter := images.AutoOrient -}}
+{{- $teaser := "" -}}
+{{- with .Params.teaserImage -}}
+    {{- $teaser = $.Resources.GetMatch . -}}
+{{- end -}}
 {{- range .Resources.ByType "image" -}}
-{{- if not $first }}, {{ end }}
+    {{- if not (eq $teaser .) -}}
-{{ $first = false -}}
+        {{- if not $first }}, {{ end }}
-{
+        {{ $first = false -}}
-    "title": "{{ .Title }}",
+        {{- with . | images.Filter $filter -}}
-    "url": "{{ .RelPermalink }}",
+            {
-    "width": "{{ .Width }}",
+                "title": "{{ .Title }}",
-    "height": "{{ .Height }}",
+                "url": "{{ .RelPermalink }}",
-    "thumbnail": "{{ (.Fit "200x200").RelPermalink }}"
+                "width": "{{ .Width }}",
-}
+                "height": "{{ .Height }}",
+                "thumbnail": "{{ (.Fit "300x200").RelPermalink }}"
+            }
+        {{- end -}}
+    {{- else -}}
+        {{ warnf "Skipping teaser image" }}
+    {{- end -}}
+    
 {{ end -}}  

layouts/partials/footer.html

@@ -1 +1,2 @@
 <p>Copyright {{ now.Year }}. All rights reserved.</p>
+<p><a href="{{ relref .Page "page/imprint" }}">Impressum</a></p>

layouts/partials/head/css.html

@@ -1,9 +1,18 @@
-{{- with resources.Get "css/main.css" }}
+{{- with resources.Get "css/main.scss" }}
-  {{- if eq hugo.Environment "development" }}
+  {{- $sassOptions := dict "targetPath" "css/style.css" "outputStyle" (cond hugo.IsProduction "compressed" "nested") "enableSourceMap" (not hugo.IsProduction) "transpiler" "dartsass" -}}
-    <link rel="stylesheet" href="{{ .RelPermalink }}">
+  {{- with . | css.Sass $sassOptions -}}
-  {{- else }}
+    {{- if hugo.IsProduction }}
-    {{- with . | minify | fingerprint }}
+      {{- with . | minify | fingerprint }}
-      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+        <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+      {{- end }}
+    {{- else }}
+      <link rel="stylesheet" href="{{ .RelPermalink }}">
     {{- end }}
   {{- end }}
 {{- end }}
+{{ with (resources.Get "css/nanogallery2.min.css" | fingerprint ) }}
+  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{ end}}
+{{ with (resources.Get "css/nanogallery2.woff.min.css" | fingerprint ) }}
+  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{ end}}

layouts/partials/head/js.html

@@ -10,3 +10,7 @@
     {{- end }}
   {{- end }}
 {{- end }}
+<!-- <script src="{{ .Page.Site.BaseURL }}/js/main.js" defer></script> -->
+<script src="{{ (resources.Get "js/jquery.min.js").RelPermalink }}"></script>
+<script src="{{ (resources.Get "js/jquery.nanogallery2.min.js").RelPermalink }}" defer></script>
+<script src="{{ (resources.Get "/js/gallery.js").RelPermalink }}" defer></script>

layouts/partials/header.html

@@ -1,2 +1 @@
-<h1>{{ site.Title }}</h1>
+<h1><a href="/">{{site.Title }}</a></h1>
-{{ partial "menu.html" (dict "menuID" "main" "page" .) }}