Fix EXIF rotation

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

assets/js/main.js

@@ -4,6 +4,7 @@ import Masonry from "masonry-layout";
 const lightbox = new PhotoSwipeLightbox({
   gallery: ".lightbox",
   children: ".pswp-image",
+  bgOpacity: 1,
   showAnimationDuration: 300,
   hideAnimationDuration: 300,
   initialZoomLevel: "fit",

assets/sass/blockquote.scss

@@ -12,7 +12,7 @@ blockquote {
   }
 
   p {
-    margin: 0 0 0.5rem 0;
+    margin: 0.5rem 0 0.5rem 0;
   }
 
   p:last-child {

assets/sass/code.scss

@@ -14,7 +14,7 @@ pre {
 
   /* Error */
   .err {
-    color: var(--accent-500);
+    color: var(--accent-600);
   }
 
   /* LineLink */
@@ -42,7 +42,7 @@ pre {
 
   /* LineHighlight */
   .hl {
-    background-color: var(--background-200);
+    background-color: var(--background-100);
   }
 
   /* LineNumbersTable */
@@ -71,250 +71,250 @@ pre {
 
   /* Keyword */
   .k {
-    color: var(--secondary-600);
+    color: var(--secondary-700);
   }
 
   /* KeywordConstant */
   .kc {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* KeywordDeclaration */
   .kd {
-    color: var(--secondary-600);
+    color: var(--secondary-700);
   }
 
   /* KeywordNamespace */
   .kn {
-    color: var(--secondary-600);
+    color: var(--secondary-700);
   }
 
   /* KeywordPseudo */
   .kp {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* KeywordReserved */
   .kr {
-    color: var(--secondary-600);
+    color: var(--secondary-700);
   }
 
   /* KeywordType */
   .kt {
-    color: var(--secondary-600);
+    color: var(--secondary-700);
   }
 
   /* Name */
   .nc {
-    color: var(--accent-600);
+    color: var(--accent-700);
     font-weight: bold;
   }
 
   /* NameConstant */
   .no {
-    color: var(--primary-500);
+    color: var(--primary-600);
     font-weight: bold;
   }
 
   /* NameDecorator */
   .nd {
-    color: var(--secondary-700);
+    color: var(--secondary-800);
     font-weight: bold;
   }
 
   /* NameEntity */
   .ni {
-    color: var(--accent-600);
+    color: var(--accent-700);
   }
 
   /* NameException */
   .ne {
-    color: var(--accent-600);
+    color: var(--accent-700);
     font-weight: bold;
   }
 
   /* NameLabel */
   .nl {
-    color: var(--primary-500);
+    color: var(--primary-600);
     font-weight: bold;
   }
 
   /* NameNamespace */
   .nn {
-    color: var(--secondary-600);
+    color: var(--secondary-700);
   }
 
   /* NameProperty */
   .py {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* NameTag */
   .nt {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* NameVariable */
   .nv {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* NameVariableClass */
   .vc {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* NameVariableGlobal */
   .vg {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* NameVariableInstance */
   .vi {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* NameVariableMagic */
   .vm {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* NameFunction */
   .nf {
-    color: var(--secondary-700);
+    color: var(--secondary-800);
     font-weight: bold;
   }
 
   /* NameFunctionMagic */
   .fm {
-    color: var(--secondary-700);
+    color: var(--secondary-800);
     font-weight: bold;
   }
 
   /* Literal */
   .l {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralDate */
   .ld {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* LiteralString */
   .s {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralStringAffix */
   .sa {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* LiteralStringBacktick */
   .sb {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralStringChar */
   .sc {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralStringDelimiter */
   .dl {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* LiteralStringDoc */
   .sd {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralStringDouble */
   .s2 {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralStringEscape */
   .se {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* LiteralStringHeredoc */
   .sh {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* LiteralStringInterpol */
   .si {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralStringOther */
   .sx {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralStringRegex */
   .sr {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* LiteralStringSingle */
   .s1 {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralStringSymbol */
   .ss {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralNumber */
   .m {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralNumberBin */
   .mb {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralNumberFloat */
   .mf {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralNumberHex */
   .mh {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralNumberInteger */
   .mi {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralNumberIntegerLong */
   .il {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* LiteralNumberOct */
   .mo {
-    color: var(--primary-600);
+    color: var(--primary-700);
   }
 
   /* Operator */
   .o {
-    color: var(--secondary-600);
+    color: var(--secondary-700);
     font-weight: bold;
   }
 
   /* OperatorWord */
   .ow {
-    color: var(--secondary-600);
+    color: var(--secondary-700);
     font-weight: bold;
   }
 
@@ -376,12 +376,12 @@ pre {
 
   /* GenericError */
   .gr {
-    color: var(--accent-500);
+    color: var(--accent-600);
   }
 
   /* GenericHeading */
   .gh {
-    color: var(--primary-500);
+    color: var(--primary-600);
     font-weight: bold;
   }
 
@@ -408,12 +408,12 @@ pre {
 
   /* GenericSubheading */
   .gu {
-    color: var(--primary-500);
+    color: var(--primary-600);
   }
 
   /* GenericTraceback */
   .gt {
-    color: var(--secondary-600);
+    color: var(--secondary-700);
   }
 
   /* GenericUnderline */

assets/sass/colors.scss

@@ -1,143 +1,71 @@
-:root {
-  --text: #050c0e;
-  --background: #f1f8fa;
-  --primary: #51a9c3;
-  --secondary: #d88fb9;
-  --accent: #ce7f71;
-}
+// https://www.realtimecolors.com/
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #f0f8fa;
-    --background: #050d0f;
-    --primary: #3c94af;
-    --secondary: #712853;
-    --accent: #8d3e30;
-  }
+:root {
+  --text: #0d1416;
+  --background: #fdfdfd;
+  --primary: #669ca3;
+  --secondary: #a5abc9;
+  --accent: #8d8cba;
 }
 
 :root {
-  --text-50: #ecf6f8;
-  --text-100: #daecf1;
-  --text-200: #b4dae4;
-  --text-300: #8fc7d6;
-  --text-400: #69b4c9;
-  --text-500: #44a1bb;
-  --text-600: #368196;
-  --text-700: #296170;
-  --text-800: #1b414b;
-  --text-900: #0e2025;
-  --text-950: #071013;
+  --text-50: #eff4f6;
+  --text-100: #dfe9ec;
+  --text-200: #bfd4d9;
+  --text-300: #9fbec6;
+  --text-400: #7ea8b4;
+  --text-500: #5e92a1;
+  --text-600: #4b7581;
+  --text-700: #395860;
+  --text-800: #263b40;
+  --text-900: #131d20;
+  --text-950: #090f10;
 
-  --background-50: #ecf6f8;
-  --background-100: #daecf1;
-  --background-200: #b4dae4;
-  --background-300: #8fc7d6;
-  --background-400: #69b4c9;
-  --background-500: #44a1bb;
-  --background-600: #368196;
-  --background-700: #296170;
-  --background-800: #1b414b;
-  --background-900: #0e2025;
-  --background-950: #071013;
+  --background-50: #f0f5f5;
+  --background-100: #e0ebeb;
+  --background-200: #c2d6d6;
+  --background-300: #a3c2c2;
+  --background-400: #85adad;
+  --background-500: #669999;
+  --background-600: #527a7a;
+  --background-700: #3d5c5c;
+  --background-800: #293d3d;
+  --background-900: #141f1f;
+  --background-950: #0a0f0f;
 
-  --primary-50: #ecf6f8;
-  --primary-100: #d9ecf2;
-  --primary-200: #b3d9e5;
-  --primary-300: #8dc6d8;
-  --primary-400: #67b4cb;
-  --primary-500: #41a1be;
-  --primary-600: #348198;
-  --primary-700: #276072;
-  --primary-800: #1a404c;
-  --primary-900: #0d2026;
-  --primary-950: #071013;
+  --primary-50: #eff5f5;
+  --primary-100: #dfeaec;
+  --primary-200: #bfd6d9;
+  --primary-300: #9fc1c6;
+  --primary-400: #80adb3;
+  --primary-500: #60989f;
+  --primary-600: #4d7a80;
+  --primary-700: #395b60;
+  --primary-800: #263d40;
+  --primary-900: #131e20;
+  --primary-950: #0a0f10;
 
-  --secondary-50: #f8ecf3;
-  --secondary-100: #f2d9e8;
-  --secondary-200: #e4b4d0;
-  --secondary-300: #d78eb9;
-  --secondary-400: #ca68a1;
-  --secondary-500: #bd428a;
-  --secondary-600: #97356e;
-  --secondary-700: #712853;
-  --secondary-800: #4b1b37;
-  --secondary-900: #260d1c;
-  --secondary-950: #13070e;
+  --secondary-50: #eff0f5;
+  --secondary-100: #dfe1ec;
+  --secondary-200: #bfc4d9;
+  --secondary-300: #9fa6c6;
+  --secondary-400: #8088b3;
+  --secondary-500: #606a9f;
+  --secondary-600: #4d5580;
+  --secondary-700: #394060;
+  --secondary-800: #262b40;
+  --secondary-900: #131520;
+  --secondary-950: #0a0b10;
 
-  --accent-50: #f8eeec;
-  --accent-100: #f2ddd9;
-  --accent-200: #e5bbb3;
-  --accent-300: #d8988d;
-  --accent-400: #cb7667;
-  --accent-500: #be5441;
-  --accent-600: #984334;
-  --accent-700: #723227;
-  --accent-800: #4c221a;
-  --accent-900: #26110d;
-  --accent-950: #130807;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text-50: #061113;
-    --text-100: #0d2126;
-    --text-200: #19424d;
-    --text-300: #266373;
-    --text-400: #338599;
-    --text-500: #40a6bf;
-    --text-600: #66b8cc;
-    --text-700: #8cc9d9;
-    --text-800: #b3dbe6;
-    --text-900: #d9edf2;
-    --text-950: #ecf6f9;
-
-    --background-50: #061113;
-    --background-100: #0d2126;
-    --background-200: #19424d;
-    --background-300: #266373;
-    --background-400: #338599;
-    --background-500: #40a6bf;
-    --background-600: #66b8cc;
-    --background-700: #8cc9d9;
-    --background-800: #b3dbe6;
-    --background-900: #d9edf2;
-    --background-950: #ecf6f9;
-
-    --primary-50: #071013;
-    --primary-100: #0d2026;
-    --primary-200: #1a404c;
-    --primary-300: #276072;
-    --primary-400: #348198;
-    --primary-500: #41a1be;
-    --primary-600: #67b4cb;
-    --primary-700: #8dc6d8;
-    --primary-800: #b3d9e5;
-    --primary-900: #d9ecf2;
-    --primary-950: #ecf6f8;
-
-    --secondary-50: #13070e;
-    --secondary-100: #260d1c;
-    --secondary-200: #4b1b37;
-    --secondary-300: #712853;
-    --secondary-400: #97356e;
-    --secondary-500: #bd428a;
-    --secondary-600: #ca68a1;
-    --secondary-700: #d78eb9;
-    --secondary-800: #e4b4d0;
-    --secondary-900: #f2d9e8;
-    --secondary-950: #f8ecf3;
-
-    --accent-50: #130807;
-    --accent-100: #26110d;
-    --accent-200: #4c221a;
-    --accent-300: #723227;
-    --accent-400: #984334;
-    --accent-500: #be5441;
-    --accent-600: #cb7667;
-    --accent-700: #d8988d;
-    --accent-800: #e5bbb3;
-    --accent-900: #f2ddd9;
-    --accent-950: #f8eeec;
-  }
+  --accent-50: #efeff5;
+  --accent-100: #dfdfec;
+  --accent-200: #c0bfd9;
+  --accent-300: #a09fc6;
+  --accent-400: #8080b3;
+  --accent-500: #61609f;
+  --accent-600: #4d4d80;
+  --accent-700: #3a3960;
+  --accent-800: #272640;
+  --accent-900: #131320;
+  --accent-950: #0a0a10;
 }

assets/sass/common.scss

@@ -62,3 +62,35 @@ p {
 li {
   margin: 0.5rem 0 0.5rem 0;
 }
+
+details {
+  background-color: var(--background-50);
+  padding: 1rem 1.5rem 1rem 1.5rem;
+  border-radius: 0.5rem;
+
+  p {
+    margin: 0.5rem 0 0.5rem 0;
+  }
+
+  summary {
+    margin: 0.5rem;
+    font-weight: bold;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+  }
+
+  summary::before {
+    content: "";
+    border-width: 0.4rem;
+    border-style: solid;
+    border-color: transparent transparent transparent var(--text);
+    transition: transform 0.3s ease;
+    transform-origin: 25% 50%;
+  }
+
+  &[open] summary::before {
+    transform: rotate(90deg);
+  }
+}

assets/sass/details.scss

@@ -19,7 +19,7 @@ main.with-details {
   }
 
   .length {
-    color: color-mix(in srgb, var(--text) 50%, var(--background));
+    color: color-mix(in srgb, var(--text) 70%, var(--background));
     margin: 0.5rem 0 0.5rem 0;
     font-size: 0.8rem;
   }

assets/sass/footer.scss

@@ -13,7 +13,7 @@
 
     font-size: 0.85rem;
 
-    color: color-mix(in srgb, var(--text) 30%, var(--background));
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
 
     a {
       color: inherit;

assets/sass/hero.scss

@@ -15,6 +15,6 @@
 
 @media (max-width: $width-mobile) {
   .hero {
-    padding: 1rem;
+    padding: 1rem 1rem 0 1rem;
   }
 }

assets/sass/image.scss

@@ -10,7 +10,7 @@ img {
 
   figcaption {
     text-align: center;
-    padding-top: 0.5rem;
-    color: color-mix(in srgb, var(--text) 50%, var(--background));
+    padding-top: 1rem;
+    color: color-mix(in srgb, var(--text) 70%, 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/meta.scss

@@ -2,19 +2,19 @@
   margin: 1rem 0 1rem 0;
   font-size: 0.8rem;
 
+  .date {
+    color: var(--text);
+  }
+
   .tag {
-    color: var(--secondary-600);
+    color: var(--primary-600);
   }
 
   .tag:hover {
-    color: var(--secondary-800);
-  }
-
-  .date {
-    color: var(--text-600);
+    color: var(--primary-800);
   }
 
   .duration {
-    color: color-mix(in srgb, var(--text) 50%, var(--background));
+    color: color-mix(in srgb, var(--text) 70%, var(--background));
   }
 }

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
-  "src" .Destination
-  "caption" .Text
-  "alt" .Title
-  ))
-}}
+{{ $data := partial "components/image/process.html" (dict "page" .Page "src" .Destination) }}
+{{ partial "components/image/index.html" (merge $data (dict "caption" .Text "title" .Title)) }}
 {{- /* chomp trailing newline */ -}}

layouts/_default/single.html

@@ -3,6 +3,10 @@
     {{ partial "components/hero/index.html" . }}
     <div class="content">
       {{ .Content }}
+
+      {{ if (default true .Params.comments) }}
+        {{ partial "comments.html" . }}
+      {{ end }}
     </div>
     {{ partial "components/postnav/index.html" . }}
   </main>

layouts/_shortcodes/contents.html

@@ -0,0 +1,5 @@
+<details class="toc">
+  <summary>Post Contents</summary>
+  {{ .Page.TableOfContents }}
+</details>
+{{- /* 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 -}}
-{{- $image := .image -}}
-
-{{- $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 -}}
+{{- $caption := .caption | default "" -}}
+{{- $title := .title | default $caption | plainify -}}
+{{- $alt := .alt | default $title | plainify -}}
 
 
-  <figure class="captioned-image lightbox">
-    <a
-      href="{{- $full.RelPermalink -}}"
-      data-pswp-src="{{- $full.RelPermalink -}}"
-      data-pswp-width="{{- $full.Width -}}"
-      data-pswp-height="{{- $full.Height -}}"
-      class="pswp-image"
-    >
-      <img
-        src="{{- $thumb.RelPermalink -}}"
-        width="{{- $thumb.Width -}}"
-        height="{{- $thumb.Height -}}"
-        loading="lazy"
-        {{ with $title }}title="{{- . -}}"{{ end }}
-        {{ with $alt }}alt="{{- . -}}"{{ end }}
-      />
-    </a>
-    {{ with $caption }}
-      <figcaption>{{ . | safeHTML }}</figcaption>
-    {{ end }}
-  </figure>
-{{- end -}}
+<figure class="captioned-image lightbox">
+  <a
+    href="{{- .full.RelPermalink -}}"
+    data-pswp-src="{{- .full.RelPermalink -}}"
+    data-pswp-width="{{- .full.Width -}}"
+    data-pswp-height="{{- .full.Height -}}"
+    class="pswp-image"
+  >
+    <img
+      src="{{- .thumb.RelPermalink -}}"
+      width="{{- .thumb.Width -}}"
+      height="{{- .thumb.Height -}}"
+      loading="lazy"
+      {{ with $title }}title="{{- . -}}"{{ end }}
+      {{ with $alt }}alt="{{- . -}}"{{ end }}
+    />
+  </a>
+  {{ with $caption }}
+    <figcaption>{{ . | safeHTML }}</figcaption>
+  {{ end }}
+</figure>

layouts/partials/components/image/process.html

@@ -0,0 +1,27 @@
+{{- $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 -}}
+
+{{- $rotate := images.AutoOrient -}}
+
+{{- $processFull := images.Process "webp q90" -}}
+{{- $full := $original | images.Filter (slice $rotate $processFull) -}}
+
+{{- $processThumb := "" -}}
+{{- if gt $original.Width 2000 -}}
+  {{- $processThumb = images.Process "resize 2000x webp q75" -}}
+{{- else -}}
+  {{- $processThumb = images.Process "webp q75" -}}
+{{- end -}}
+{{- $thumb := $original | images.Filter (slice $rotate $processThumb) -}}
+
+{{- 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 := . }}
-      {{ $imageData := partial "components/image/reflect.html" .Params.hero }}
-      {{ with $imageData.image }}
+      {{ $hero := partial "components/hero/process.html" .Params.hero }}
+      {{ if $hero.src }}
+        {{ $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 -}}"
-            data-pswp-src="{{- .RelPermalink -}}"
-            data-pswp-width="{{- .Width -}}"
-            data-pswp-height="{{- .Height -}}"
+            href="{{- .RelPermalink -}}"
+            data-pswp-src="{{- $data.full.RelPermalink -}}"
+            data-pswp-width="{{- $data.full.Width -}}"
+            data-pswp-height="{{- $data.full.Height -}}"
             class="pswp-image"
           >
             <img
-              src="{{- .RelPermalink -}}"
-              width="{{- .Width -}}"
-              height="{{- .Height -}}"
+              src="{{- $data.thumb.RelPermalink -}}"
+              width="{{- $data.thumb.Width -}}"
+              height="{{- $data.thumb.Height -}}"
               loading="lazy"
-              {{ with $imageData.title }}title="{{- . -}}"{{ end }}
-              {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
+              {{ with $title }}title="{{- . -}}"{{ end }}
+              {{ with $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>
+              <a href="{{- .RelPermalink -}}">{{ $caption }}</a>
+              {{ partial "components/meta/index.html" . }}
             </div>
           </div>
         </div>