diff options
-rw-r--r-- | assets/css/default.css | 8 | ||||
-rw-r--r-- | themes/default/layouts/partials/gallery-images.html | 8 | ||||
-rw-r--r-- | themes/default/layouts/partials/gallery-walk.html | 41 |
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> |