Finish up photostream grid and single layouts

assets/css/050_photos.css

@@ -0,0 +1,162 @@
+.main--single.photostream--single {
+  > .figure--image {
+    margin-block-end: var(--space-l);
+
+    img {
+      max-height: 100vh;
+    }
+  }
+}
+
+.photo-params {
+  --background-color: var(--gray7);
+  --container-background-color: var(--gray6);
+  --color: var(--gray2);
+  --border-color: var(--gray6);
+  --border-style: 2px solid;
+
+  display: flex;
+  grid-column: main-start / main-end;
+  justify-content: center;
+  margin-block-start: var(--space-xl);
+
+  > table {
+    background-color: var(--background-color);
+    color: var(--color);
+    border: var(--border-style) var(--border-color);
+    border-collapse: collapse;
+    table-layout: fixed;
+    text-align: center;
+    width: min(calc(0.66 * var(--content-width)), 100%);
+
+    thead td {
+      border-bottom: var(--border-style) var(--border-color);
+      font-size: 80%;
+      font-weight: bold;
+    }
+
+    tr > td {
+      border: none;
+      border-bottom: var(--border-style) var(--border-color);
+    }
+
+    tr.exposure-attributes > td {
+      border: none;
+      border-top: var(--border-style) var(--border-color);
+      border-left: var(--border-style) var(--border-color);
+    }
+
+    tr.exposure-attributes > td:first-child {
+      border-left: none;
+    }
+
+    td {
+      font-size: var(--text-s);
+      line-height: 1;
+      padding-inline: var(--space-s);
+      padding-block: var(--space-xs);
+
+      &:last-child {
+        text-align: end;
+      }
+
+      &:first-child {
+        text-align: start;
+      }
+    }
+
+    .make-model {
+      font-weight: bold;
+    }
+
+    .size {
+      border-left: 0;
+    }
+
+    .location {
+      border-right: 0;
+    }
+  }
+}
+
+.photostream-grid {
+  grid-column: full-start / full-end;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+
+  &:not(:last-child) {
+    margin-block-end: var(--space-l);
+  }
+
+  > .photostream-grid__date-heading {
+    align-items: center;
+    background-color: var(--gray6);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    line-height: 1;
+    width: 100%;
+
+    > h2 {
+      font-size: var(--text-xxl);
+      margin: 0;
+
+      &::after {
+        color: var(--text-color-secondary);
+        content: ">";
+      }
+    }
+  }
+}
+
+
+.photostream-item {
+  aspect-ratio: 1;
+  grid-column: unset;
+  margin-block: 0;
+  position: relative;
+
+  > a {
+    display: block;
+    line-height: 0;
+  }
+
+  .photostream-item__title,
+  .photostream-item__date {
+    background-color: var(--background-color);
+    font-family: var(--font-family-monospace);
+    font-size: var(--text-s);
+    margin: 0;
+    padding-inline: var(--space-xxs);
+    visibility: hidden;
+    z-index: 2;
+  }
+
+  .photostream-item__title {
+    left: 0;
+    position: absolute;
+    top: 0;
+  }
+
+  .photostream-item__date {
+    bottom: 0;
+    position: absolute;
+    right: 0;
+  }
+
+  &:hover {
+    .photostream-item__date,
+    .photostream-item__title {
+      visibility: visible;
+    }
+  }
+}
+
+@media screen and (hover: none) {
+  .photostream-item :is(
+    .photostream-item__date,
+    .photostream-item__title)
+  {
+    visibility: visible;
+  }
+}

layouts/partials/photostream/exif_table.html

@@ -0,0 +1,64 @@
+<div class="photo-params">
+  <table>
+    {{ if and .Tags.Make .Tags.Model }}
+    <thead>
+      <td class="make-model" colspan=4>
+        {{- $make := .Tags.Make -}}
+        {{- $model := .Tags.Model -}}
+        {{- if in $model $make -}}
+          {{ .Tags.Model }}
+        {{- else -}}
+          {{ .Tags.Make }} {{ .Tags.Model }}
+        {{- end -}}
+      </td>
+    </thead>
+    {{ end }}
+    {{ with .Tags.LensModel }}
+    <tr>
+      <td colspan=4 class="lens">{{ . }}</td>
+    </tr>
+    {{ end }}
+    <tr>
+      {{- $hasLocation := and .Lat .Long -}}
+      {{ if $hasLocation -}}
+      <td colspan=2 class="location">
+        {{ $lat := float .Lat }}{{ $latDir := cond (eq $lat 0) "" (cond (gt $lat 0) "N" "S") }}
+        <data class="latitude" value="{{ $lat }}">{{ .Lat | lang.FormatNumber (cond (ne $lat 0) 3 0) }}º{{ $latDir }}</data>,
+        {{ $long := float .Long }}{{ $longDir := cond (eq $long 0) "" (cond (gt $long 0) "E" "W") }}
+        <data class="longitude" value="{{ $long }}">{{ .Long | lang.FormatNumber (cond (ne $long 0) 3 0) }}º{{ $longDir }}</data>
+      </td>
+      {{- end -}}
+      {{ if and .Tags.PixelXDimension .Tags.PixelYDimension -}}
+        <td colspan={{ if $hasLocation }}2{{ else }}4{{ end }} class="size">
+        {{- $widthpx := .Tags.PixelXDimension -}}
+        {{- $heightpx := .Tags.PixelYDimension -}}
+        {{- if and (gt $widthpx 0) (gt $heightpx 0) -}}
+          {{- $megapixels := div (mul $widthpx $heightpx) 1e6 -}}
+          <data class="megapixels nobreak" value="{{ $megapixels }}">{{ $megapixels | lang.FormatNumber 0 }} MP</data>
+          •
+          <span class="nobreak"><data class="width">{{ $widthpx }}</data> × <data class="height">{{ $heightpx }}</data></span>
+        {{- end -}}
+      </td>
+      {{ end }}
+    </tr>
+    {{ if or .Tags.ISOSpeedRatings .Tags.FocalLengthIn35mmFilm .Tags.FNumber .Tags.ExposureTime }}
+    <tr class="exposure-attributes">
+      <td class="iso">{{ with .Tags.ISOSpeedRatings }}ISO {{ . }}{{ end }}</td>
+      <td class="focal-length">
+        {{- $focalLength := .Tags.FocalLengthIn35mmFilm | default .Tags.FocalLength -}}
+        {{- with $focalLength -}}{{ . }} mm{{- end -}}
+      </td>
+      <td class="f-number">{{ with .Tags.FNumber }}{{ printf "ƒ%0.1f" . }}{{ end }}</td>
+      <td class="exposure-time">
+        {{- with $exposureTime := .Tags.ExposureTime -}}
+          {{- if in $exposureTime "/" -}}
+            {{ . }} s
+          {{- else -}}
+            1/{{ printf "%.0f" (div 1.0 (float $exposureTime)) }} s
+          {{- end -}}
+        {{- end -}}
+      </td>
+    </tr>
+    {{ end }}
+  </table>
+</div>

layouts/partials/photostream/image-resources.html

@@ -0,0 +1,9 @@
+{{ $thumbnailResourcesNames := slice "thumbnail" "Thumbnail" "thumbnail.jpg" "Thumbnail.jpg" }}
+{{ with index .Params "thumbnail" }}
+    {{ $thumbnailResourcesNames = $thumbnailResourcesNames | append . }}
+{{ end }}
+
+{{ $imageResources := .Resources.ByType "image" }}
+{{ $photos := where $imageResources "Name" "not in" $thumbnailResourcesNames }}
+
+{{ return $photos }}

layouts/partials/photostream/thumbnail.html

@@ -0,0 +1,50 @@
+{{/*
+  Renders a photo thumbnail. If neither a target height or target width are
+  given, and the image is already in the correct orientation, no image
+  processing is performed.
+
+  Arguments
+  ---------
+  "Page" : A reference to the current Page
+  "Height" : The target height of the image
+  "Width" : The target width of the image
+
+  Returns
+  -------
+  The processed thumbnail image resource
+*/}}
+
+{{- $thumbnailResource := .Page.Resources.GetMatch
+                            (index .Page.Params "thumbnail" | default "[tT]humbnail*")
+                        | default (index (.Page.Resources.ByType "image") 0) -}}
+
+{{- if not $thumbnailResource -}}
+  {{- errorf "No thumbnail available for %s" .Page.Permalink }}
+{{- end -}}
+
+{{ $orientation := partial "image-utilities/orientation-angle.html" $thumbnailResource }}
+
+{{ $targetWidth := 0 }}
+{{ with .Width }}
+  {{ $targetWidth = . }}
+{{ else }}
+  {{ $targetWidth = $thumbnailResource.Width }}
+{{ end }}
+
+{{ $targetHeight := 0 }}
+{{ with .Height }}
+  {{ $targetHeight = . }}
+{{ else }}
+  {{ $targetHeight = $thumbnailResource.Height }}
+{{ end }}
+
+{{ $thumbnail := false }}
+{{ if not (and (eq $orientation 0)
+               (eq $targetWidth $thumbnailResource.Width)
+               (eq $targetHeight $thumbnailResource.Height)) }}
+  {{ $thumbnail = $thumbnailResource.Fit (printf "%dx%d r%d" $targetWidth $targetHeight (sub 360 $orientation)) }}
+{{ else }}
+  {{ $thumbnail = $thumbnailResource }}
+{{ end }}
+
+{{ return $thumbnail }}

layouts/photos/list.html

@@ -0,0 +1,20 @@
+{{ define "main" }}
+  <main class="main--list main--photostream">
+    <header class="page-header">
+      {{ partial "page_header.html" (dict "page" .) }}
+    </header>
+
+    {{- .Content -}}
+
+    {{ range .Pages.ByDate.Reverse.GroupByDate "2006" }}
+      <section class="photostream-grid">
+        <header class="photostream-grid__date-heading">
+          <h2>{{ .Key }}</h2>
+        </header>
+        {{ range .Pages }}
+          {{ .Render "page_summary" }}
+        {{ end }}
+      </section>
+    {{ end }}
+  </main>
+{{ end }}

layouts/photos/page_summary.html

@@ -0,0 +1,19 @@
+{{- $gridSize := $.Site.Params.photos.thumbnailSize -}}
+{{- $thumbnail := partial "photostream/thumbnail.html" (dict "Page" . "Width" $gridSize "Height" $gridSize) -}}
+{{- $thumbnail = $thumbnail.Crop (printf "%dx%d" $gridSize $gridSize) -}}
+{{- $altText := $thumbnail.Params.alt -}}
+{{- $linkTitle := .LinkTitle | markdownify -}}
+{{- $showsTitle := le (len $linkTitle) 18 -}}
+<article class="photostream-item">
+  {{ if $showsTitle }}
+    <h3 class="photostream-item__title">{{ $linkTitle }}</h3>
+  {{ end }}
+  <a href="{{ .RelPermalink }}"
+    {{- if not $showsTitle }} title="{{ .Title | markdownify }}"{{ end }}>
+    <img
+      class="photostream-item__thumbnail"
+      src="{{ $thumbnail.RelPermalink }}"
+      {{- with $altText }} alt="{{ . }}"{{ end }}>
+  </a>
+  <time class="photostream-item__date">{{ .Date | time.Format "2006-01-02" }}</time>
+</article>

layouts/photos/single.html

@@ -0,0 +1,31 @@
+{{ define "main" }}
+  <main class="main--single  photostream--single">
+    <header class="page-header">
+      {{ partial "page_header.html" (dict "page" .) }}
+    </header>
+
+    {{- $images := partial "photostream/image-resources.html" . -}}
+    {{- if eq (len $images) 0 -}}
+      {{ errorf "Missing photo from photos page %q" .Path }}
+    {{- end -}}
+
+    {{ if eq (len $images) 1 }}
+      {{- $img := index $images 0 -}}
+      <figure class="figure  figure--image  photostream__figure">
+        <img
+          src="{{ $img.RelPermalink }}"
+          {{- with $img.Params.alt }} alt="{{ . }}" {{ end -}}>
+      </figure>
+
+      {{ .Content -}}
+
+      {{- if .Params.photo_details | default .Params.photoDetails | default true -}}
+        {{- partial "photostream/exif_table.html" $img.Exif -}}
+      {{- end -}}
+    {{ end }}{{/* if eq (len $images) 1 */}}
+
+    <footer class="page-footer">
+      {{ partial "page/footer.html" . }}
+    </footer>
+  </main>
+{{ end }}