Update gallery page

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/list.scss

@@ -2,11 +2,11 @@
   .post {
     display: block;
 
-    >a {
+    > a {
       color: inherit;
     }
 
-    >a:hover {
+    > a:hover {
       color: var(--text-800);
     }
 

assets/sass/photoswipe.scss

@@ -18,13 +18,13 @@
   position: fixed;
   bottom: 0;
   width: 100%;
-  height: 5rem;
+  height: auto;
   padding: 1rem 2rem;
   text-align: center;
   line-height: 1.5rem;
 
   .meta {
-    font-size: 0.7rem;
+    margin: 0;
   }
 
   a {

layouts/_default/_markup/render-image.html

@@ -1,7 +1,3 @@
-{{ partial "components/image/index.html" (dict "page" .Page "image" (dict
+{{ $data := partial "components/image/process.html" (dict "page" .Page "src" .Destination) }}
-  "src" .Destination
+{{ partial "components/image/index.html" (merge $data (dict "caption" .Text "alt" .Title)) }}
-  "caption" .Text
-  "alt" .Title
-  ))
-}}
 {{- /* chomp trailing newline */ -}}

layouts/partials/components/hero/index.html

@@ -1,5 +1,8 @@
 <section class="hero">
   <h1 class="title">{{ .Title }}</h1>
   {{ partial "components/meta/index.html" . }}
-  {{ partial "components/image/index.html" (dict "page" .Page "image" .Params.hero) }}
+
+  {{ $hero := partial "components/hero/process.html" .Params.hero }}
+  {{ $data := partial "components/image/process.html" (dict "page" .Page "src" $hero.src) }}
+  {{ partial "components/image/index.html" (merge $data $hero) }}
 </section>

layouts/partials/components/hero/process.html

@@ -0,0 +1,15 @@
+{{- $src := "" -}}
+{{- $caption := "" -}}
+{{- $title := "" -}}
+{{- $alt := "" -}}
+
+{{- if reflect.IsMap . -}}
+  {{- $src = .src -}}
+  {{- $caption = .caption | default "" -}}
+  {{- $title = .title | default $caption | plainify -}}
+  {{- $alt = .alt | default $title | plainify -}}
+{{- else -}}
+  {{- $src = . -}}
+{{- end -}}
+
+{{- return (dict "src" $src "caption" $caption "title" $title "alt" $alt) -}}

layouts/partials/components/image/index.html

@@ -1,52 +1,20 @@
-{{- $page := .page -}}
+{{- $caption := .caption | default "" -}}
-{{- $image := .image -}}
+{{- $title := .title | default $caption | plainify -}}
-
+{{- $alt := .alt | default $title | plainify -}}
-{{- $src := $image -}}
-{{- $caption := "" -}}
-{{- $title := "" -}}
-{{- $alt := "" -}}
-
-{{- if reflect.IsMap $image -}}
-  {{- $src = $image.src | default "" -}}
-  {{- $caption = $image.caption | default "" -}}
-  {{- $title = $image.title | default $caption | default "" | plainify -}}
-  {{- $alt = $image.alt | default $title | default "" | plainify -}}
-{{- end -}}
-
-{{- if $src -}}
-  {{- $isRemote := strings.HasPrefix $src "http" -}}
-
-  {{- if $isRemote -}}
-    {{- $remote := resources.GetRemote $src -}}
-    {{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
-  {{- else -}}
-    {{- $image = ($page.Resources.Get $src) | default (resources.Get $src) -}}
-  {{- end -}}
-{{- end -}}
-
-{{- with $image -}}
-  {{ $full := . | images.Filter (images.Process "webp q90") }}
-
-  {{ $thumb := . }}
-  {{- if gt .Width 2000 -}}
-    {{- $thumb = . | images.Filter (images.Process "resize 2000x webp q75") -}}
-  {{- else -}}
-    {{- $thumb = . | images.Filter (images.Process "webp q75") -}}
-  {{- end -}}
 
 
-  <figure class="captioned-image lightbox">
+<figure class="captioned-image lightbox">
   <a
-      href="{{- $full.RelPermalink -}}"
+    href="{{- .full.RelPermalink -}}"
-      data-pswp-src="{{- $full.RelPermalink -}}"
+    data-pswp-src="{{- .full.RelPermalink -}}"
-      data-pswp-width="{{- $full.Width -}}"
+    data-pswp-width="{{- .full.Width -}}"
-      data-pswp-height="{{- $full.Height -}}"
+    data-pswp-height="{{- .full.Height -}}"
     class="pswp-image"
   >
     <img
-        src="{{- $thumb.RelPermalink -}}"
+      src="{{- .thumb.RelPermalink -}}"
-        width="{{- $thumb.Width -}}"
+      width="{{- .thumb.Width -}}"
-        height="{{- $thumb.Height -}}"
+      height="{{- .thumb.Height -}}"
       loading="lazy"
       {{ with $title }}title="{{- . -}}"{{ end }}
       {{ with $alt }}alt="{{- . -}}"{{ end }}
@@ -55,5 +23,4 @@
   {{ with $caption }}
     <figcaption>{{ . | safeHTML }}</figcaption>
   {{ end }}
-  </figure>
+</figure>
-{{- end -}}

layouts/partials/components/image/process.html

@@ -0,0 +1,23 @@
+{{- $page := .page -}}
+{{- $src := .src -}}
+
+{{- $original := "" -}}
+
+{{- $isRemote := strings.HasPrefix $src "http" -}}
+{{- if $isRemote -}}
+  {{- $remote := resources.GetRemote $src -}}
+  {{- $original = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
+{{- else -}}
+  {{- $original = ($page.Resources.Get $src) | default (resources.Get $src) -}}
+{{- end -}}
+
+{{- $full := $original | images.Filter (images.Process "webp q90") -}}
+
+{{- $thumb := "" -}}
+{{- if gt $original.Width 2000 -}}
+  {{- $thumb = $original | images.Filter (images.Process "resize 2000x webp q75") -}}
+{{- else -}}
+  {{- $thumb = $original | images.Filter (images.Process "webp q75") -}}
+{{- end -}}
+
+{{- return (dict "original" $original "full" $full "thumb" $thumb) -}}

layouts/partials/gallery/list.html

@@ -2,38 +2,38 @@
   <div class="grid-sizer"></div>
   {{ range sort .Pages "Date" "desc" }}
     {{ if not .Params.private }}
-      {{ $page := . }}
+      {{ $hero := partial "components/hero/process.html" .Params.hero }}
-      {{ $imageData := partial "components/image/reflect.html" .Params.hero }}
+      {{ $data := partial "components/image/process.html" (dict "page" . "src" $hero.src) }}
-      {{ with $imageData.image }}
+
+      {{- $caption := .Title -}}
+      {{- $title := $hero.title | default $caption | plainify -}}
+      {{- $alt := $hero.alt | default $title | plainify -}}
+
+
       <div class="image grid-item">
         <a
-            href="{{- $page.RelPermalink -}}"
+          href="{{- .RelPermalink -}}"
-            data-pswp-src="{{- .RelPermalink -}}"
+          data-pswp-src="{{- $data.full.RelPermalink -}}"
-            data-pswp-width="{{- .Width -}}"
+          data-pswp-width="{{- $data.full.Width -}}"
-            data-pswp-height="{{- .Height -}}"
+          data-pswp-height="{{- $data.full.Height -}}"
           class="pswp-image"
         >
           <img
-              src="{{- .RelPermalink -}}"
+            src="{{- $data.thumb.RelPermalink -}}"
-              width="{{- .Width -}}"
+            width="{{- $data.thumb.Width -}}"
-              height="{{- .Height -}}"
+            height="{{- $data.thumb.Height -}}"
             loading="lazy"
-              {{ with $imageData.title }}title="{{- . -}}"{{ end }}
+            {{ with $title }}title="{{- . -}}"{{ end }}
-              {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
+            {{ with $alt }}alt="{{- . -}}"{{ end }}
           />
         </a>
         <div class="pswp-caption-content">
           <div>
-              {{ upper $page.Title }}
+            <a href="{{- .RelPermalink -}}">{{ $caption }}</a>
-              <div class="meta">
+            {{ partial "components/meta/index.html" . }}
-                {{ $page.Date | time.Format ":date_medium" }}
-                &middot;
-                <a href="{{- $page.RelPermalink -}}">View Post</a>
           </div>
         </div>
       </div>
-        </div>
-      {{ end }}
     {{ end }}
   {{ end }}
 </div>