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,20 +18,12 @@
   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 {
-    color: inherit;
-  }
-
-  a:hover {
-    color: var(--text-800);
   }
 }

layouts/partials/components/image/index.html

@@ -1,58 +1,27 @@
 {{- $page := .page -}}
 {{- $image := .image -}}
 
-{{- $src := $image -}}
+{{- $data := partial "components/image/process.html" (dict "image" .image "page" .page) -}}
-{{- $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 -}}
-
 
+{{- with $data -}}
   <figure class="captioned-image lightbox">
     <a
-      href="{{- $full.RelPermalink -}}"
+      href="{{- $data.full.RelPermalink -}}"
-      data-pswp-src="{{- $full.RelPermalink -}}"
+      data-pswp-src="{{- $data.full.RelPermalink -}}"
-      data-pswp-width="{{- $full.Width -}}"
+      data-pswp-width="{{- $data.full.Width -}}"
-      data-pswp-height="{{- $full.Height -}}"
+      data-pswp-height="{{- $data.full.Height -}}"
       class="pswp-image"
     >
       <img
-        src="{{- $thumb.RelPermalink -}}"
+        src="{{- $data.thumb.RelPermalink -}}"
-        width="{{- $thumb.Width -}}"
+        width="{{- $data.thumb.Width -}}"
-        height="{{- $thumb.Height -}}"
+        height="{{- $data.thumb.Height -}}"
         loading="lazy"
-        {{ with $title }}title="{{- . -}}"{{ end }}
+        {{ with $data.title }}title="{{- . -}}"{{ end }}
-        {{ with $alt }}alt="{{- . -}}"{{ end }}
+        {{ with $data.alt }}alt="{{- . -}}"{{ end }}
       />
     </a>
-    {{ with $caption }}
+    {{ with $data.caption }}
       <figcaption>{{ . | safeHTML }}</figcaption>
     {{ end }}
   </figure>

layouts/partials/components/image/list.html

@@ -0,0 +1,31 @@
+{{- $page := .page -}}
+{{- $image := .image -}}
+
+{{- $data := partial "components/image/process.html" (dict "image" .image "page" .page) -}}
+
+{{- with $data -}}
+  <div class="image grid-item">
+    <a
+      href="{{- $page.RelPermalink -}}"
+      data-pswp-src="{{- $data.full.RelPermalink -}}"
+      data-pswp-width="{{- $data.full.Width -}}"
+      data-pswp-height="{{- $data.full.Height -}}"
+      class="pswp-image"
+    >
+      <img
+        src="{{- $data.thumb.RelPermalink -}}"
+        width="{{- $data.thumb.Width -}}"
+        height="{{- $data.thumb.Height -}}"
+        loading="lazy"
+        {{ with $data.title }}title="{{- . -}}"{{ end }}
+        {{ with $data.alt }}alt="{{- . -}}"{{ end }}
+      />
+    </a>
+    <div class="pswp-caption-content">
+      <div>
+        {{ $page.Title }}
+        {{ partial "components/meta/index.html" $page }}
+      </div>
+    </div>
+  </div>
+{{- end -}}

layouts/partials/components/image/process.html

@@ -0,0 +1,41 @@
+{{- $image := .image -}}
+{{- $page := .page -}}
+
+{{- $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 -}}
+
+{{- $result := "" -}}
+{{- 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 -}}
+
+  {{- $result = dict "full" $full "thumb" $thumb "caption" $caption "title" $title "alt" $alt -}}
+{{- end -}}
+
+{{- return $result -}}

layouts/partials/gallery/list.html

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