Fix crash on missing hero

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

assets/sass/image.scss

@@ -10,7 +10,7 @@ img {
 
   figcaption {
     text-align: center;
-    padding-top: 0.5rem;
+    padding-top: 1rem;
     color: color-mix(in srgb, var(--text) 50%, var(--background));
   }
 }

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 "title" .Title)) }}
-  "caption" .Text
-  "alt" .Title
-  ))
-}}
 {{- /* chomp trailing newline */ -}}

layouts/_shortcodes/exif-image.html

@@ -0,0 +1,25 @@
+{{ $src := "" }}
+{{ if .IsNamedParams }}
+    {{ $src = .Get "src" }}
+{{ else }}
+    {{ $src = .Get 0 }}
+{{ end }}
+
+{{ $title := "" }}
+{{ if .IsNamedParams }}
+    {{ $title = .Get "title" }}
+{{ else }}
+    {{ $title = .Get 1 }}
+{{ end }}
+
+{{ $alt := "" }}
+{{ if .IsNamedParams }}
+    {{ $alt = .Get "alt" }}
+{{ else }}
+    {{ $alt = .Get 1 }}
+{{ end }}
+
+{{ $data := partial "components/image/process.html" (dict "page" .Page "src" $src) }}
+{{ $caption := partial "components/image/exif.html" $data.original }}
+{{ partial "components/image/index.html" (merge $data (dict "caption" $caption "title" $title "alt" $alt)) }}
+{{- /* chomp trailing newline */ -}}

layouts/partials/components/hero/index.html

@@ -1,5 +1,17 @@
 <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 }}
+  {{ if $hero.src }}
+    {{ $data := partial "components/image/process.html" (dict "page" .Page "src" $hero.src) }}
+
+    {{ $final := merge $data $hero }}
+    {{ if $hero.exif }}
+      {{ $caption := partial "components/image/exif.html" $data.original }}
+      {{ $final = merge $final (dict "caption" $caption) }}
+    {{ end }}
+
+    {{ partial "components/image/index.html" $final }}
+  {{ end }}
 </section>

layouts/partials/components/hero/process.html

@@ -0,0 +1,17 @@
+{{- $src := "" -}}
+{{- $caption := "" -}}
+{{- $title := "" -}}
+{{- $alt := "" -}}
+{{- $exif := false -}}
+
+{{- if reflect.IsMap . -}}
+  {{- $src = .src -}}
+  {{- $caption = .caption -}}
+  {{- $title = .title -}}
+  {{- $alt = .alt -}}
+  {{- $exif = .exif | default false -}}
+{{- else -}}
+  {{- $src = . -}}
+{{- end -}}
+
+{{- return dict "src" $src "caption" $caption "title" $title "alt" $alt "exif" $exif -}}

layouts/partials/components/image/exif.html

@@ -0,0 +1,22 @@
+{{ $exif := .Exif.Tags }}
+
+{{ $make := $exif.Make }}
+{{ $model := $exif.Model }}
+
+{{ $lensMake := $exif.LensMake }}
+{{ $lensModel := $exif.LensModel }}
+
+{{ $lens := "" }}
+{{ if ne $make $lensMake }}
+    {{ $lens = printf "%s %s" $lensMake $lensModel }}
+{{ else }}
+    {{ $lens = $lensModel }}
+{{ end }}
+
+{{ $focal := printf "%.1f" (float $exif.FocalLength) }}
+{{ $focal35 := printf "%.1f" (float $exif.FocalLengthIn35mmFormat) }}
+{{ $shutter := printf "%d" $exif.ExposureTime }}
+{{ $aperture := printf "%d" $exif.FNumber }}
+{{ $iso := printf "%d" $exif.ISO }}
+
+{{ return printf "%s %s, %s @ %s mm (%s mm), %s s, f/%s, ISO %s" $make $model $lens $focal $focal35 $shutter $aperture $iso }}

layouts/partials/components/image/index.html

@@ -1,59 +1,26 @@
-{{- $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
+  <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"
+    class="pswp-image"
-    >
+  >
-      <img
+    <img
-        src="{{- $thumb.RelPermalink -}}"
+      src="{{- .thumb.RelPermalink -}}"
-        width="{{- $thumb.Width -}}"
+      width="{{- .thumb.Width -}}"
-        height="{{- $thumb.Height -}}"
+      height="{{- .thumb.Height -}}"
-        loading="lazy"
+      loading="lazy"
-        {{ with $title }}title="{{- . -}}"{{ end }}
+      {{ with $title }}title="{{- . -}}"{{ end }}
-        {{ with $alt }}alt="{{- . -}}"{{ end }}
+      {{ with $alt }}alt="{{- . -}}"{{ end }}
-      />
+    />
-    </a>
+  </a>
-    {{ with $caption }}
+  {{ with $caption }}
-      <figcaption>{{ . | safeHTML }}</figcaption>
+    <figcaption>{{ . | safeHTML }}</figcaption>
-    {{ end }}
+  {{ 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/components/meta/index.html

@@ -1,14 +1,18 @@
 <div class="meta">
   <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
-  &middot;
+
   {{ if eq .Kind "page" }}
     {{ range .Params.tags }}
-      <a href="/tags/{{ . | urlize }}" class="tag">{{ . }}</a>
       &middot;
+      <a href="/tags/{{ . | urlize }}" class="tag">{{ . }}</a>
+    {{ end }}
+
+    {{ if ge .ReadingTime 1 }}
+      &middot;
+      <span class="duration">
+        {{ printf "%d min. read" .ReadingTime }}
+      </span>
     {{ end }}
-    <span class="duration">
-      {{ printf "%d min. read" .ReadingTime }}
-    </span>
   {{ else }}
     {{ $count := len .Pages }}
     <span class="duration">

layouts/partials/gallery/list.html

@@ -2,34 +2,36 @@
   <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 }}
+      {{ if $hero.src }}
-      {{ with $imageData.image }}
+        {{ $data := partial "components/image/process.html" (dict "page" . "src" $hero.src) }}
+
+        {{- $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>