themes/default/layouts/partials/gallery-walk: Relate pages

Pass context. Break is now available. Don't use image cacher
for now.

3 files changed, 38 insertions, 19 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index bc52409..80a8b60 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -1409,7 +1409,7 @@ gallery-images aside {
   position: relative;
 }
 
-gallery-images picture {
+gallery-images a {
   display: flex;
   flex-basis: 33.33%;
   flex-grow: 1;
@@ -1417,9 +1417,11 @@ gallery-images picture {
   width: 33.333%;
 }
 
+gallery-images picture,
 gallery-images picture img {
   border-radius: 0;
   width: 100%;
+  height: 100%;
 }
 
 gallery-overlay {
@@ -1431,6 +1433,10 @@ gallery-overlay {
   position: absolute;
   width: 100%;
   z-index: 1;
+  pointer-events: none;
+  border: 1px solid;
+  border-color: #ccc;
+  border-color: var(--border-darker);
 }
 
 main web-ring {
diff --git a/themes/default/layouts/partials/gallery-images.html b/themes/default/layouts/partials/gallery-images.html
index f9be257..a66531a 100644
--- a/themes/default/layouts/partials/gallery-images.html
+++ b/themes/default/layouts/partials/gallery-images.html
@@ -3,7 +3,11 @@
 <gallery-images>
   <h1>Picture Gallery</h1>
   <aside>
-    <gallery-overlay></gallery-overlay>
-    {{ partial "gallery-walk.html" $folder }}
+    {{ partial "gallery-walk.html"
+        (dict
+          "Folder"  $folder
+          "Context" .
+        )
+    }}
   </aside>
 </gallery-images>
diff --git a/themes/default/layouts/partials/gallery-walk.html b/themes/default/layouts/partials/gallery-walk.html
index 6a43eaf..764fa6d 100644
--- a/themes/default/layouts/partials/gallery-walk.html
+++ b/themes/default/layouts/partials/gallery-walk.html
@@ -1,7 +1,8 @@
-{{- $folder := . -}}
+{{- $folder := .Folder -}}
 {{- $files := slice -}}
 {{- $dimensions := "320x320" -}}
 {{- $author := strings.TrimPrefix "public/" (strings.TrimSuffix "/media/" $folder) -}}
+{{- $prefix := print (partial "function-paths.html" "media") "/" $author "/gallery-walker_" -}}
 
 {{- if fileExists $folder -}}
   {{- range readDir $folder -}}
@@ -29,35 +30,43 @@
         )
       -}}
     {{- end -}}
+
+    {{- if eq (len $files) 6 -}}
+      {{- break -}}
+    {{- end -}}
   {{- end -}}
 
-  {{- if $files }}
+  {{- if $files -}}
 
-    {{- range first 6 $files }}
+    {{- range $files -}}
       {{- with $image := resources.Get .Path -}}
-      {{- $image = (
-        .Content |
-        resources.FromString
-        (print (partial "function-paths.html" "media") "/" $author "/gallery-walker_" (path.Base .))).Fit
-        (print $dimensions " webp")
-      }}
+
+      {{- $srcset := (.Content | resources.FromString (print $prefix (path.Base .))).Fit (print $dimensions " webp") -}}
+      {{- $image = (.Content | resources.FromString (print $prefix (path.Base .))).Fit (print $dimensions " png") -}}
+      {{- $decodedURL := print "/" (replaceRE "-" "/" (path.Base .Name) 2 | replaceRE "-.........webp" "") "/" -}}
+      {{- $relatedPage := or (in $decodedURL "/messages/") (in $decodedURL "/feeds/") -}}
+
+      {{- if not $relatedPage -}}
+        {{- $decodedURL = print "/" $author "/" -}}
+      {{- end -}}
+
+      <a href="{{ $decodedURL }}">
         <picture>
-          <source srcset="{{- $image.RelPermalink -}}" type="image/webp" />
-          {{- $image = (.Content |
-            resources.FromString (print (partial "function-paths.html" "media") "/" $author "/gallery-walker_" (path.Base .))).Fit
-            (print $dimensions " png")
-           }}
+          <source srcset="{{ $srcset.RelPermalink }}" type="image/webp" />
           <img loading="lazy"
-            alt="{{- .Name }}"
-            title="{{- .Name }}"
+            alt="{{ .Name }}"
+            title="{{ .Name }}"
             width="{{ $image.Width }}"
             height="{{ $image.Height }}"
             src="{{ $image.RelPermalink }}"
           />
         </picture>
+      </a>
      {{- end -}}
     {{- end -}}
 
+    <gallery-overlay></gallery-overlay>
+
   {{- else -}}
     <footer>
       <code>No media found!</code>