From a74703beb53a33ba8495ea8bd98f8632b75080bb Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Thu, 17 Oct 2024 08:34:18 -0700 Subject: [PATCH] Finish up photostream grid and single layouts --- assets/css/050_photos.css | 162 ++++++++++++++++++ layouts/partials/photostream/exif_table.html | 64 +++++++ .../partials/photostream/image-resources.html | 9 + layouts/partials/photostream/thumbnail.html | 50 ++++++ layouts/photos/list.html | 20 +++ layouts/photos/page_summary.html | 19 ++ layouts/photos/single.html | 31 ++++ 7 files changed, 355 insertions(+) create mode 100644 assets/css/050_photos.css create mode 100644 layouts/partials/photostream/exif_table.html create mode 100644 layouts/partials/photostream/image-resources.html create mode 100644 layouts/partials/photostream/thumbnail.html create mode 100644 layouts/photos/list.html create mode 100644 layouts/photos/page_summary.html create mode 100644 layouts/photos/single.html diff --git a/assets/css/050_photos.css b/assets/css/050_photos.css new file mode 100644 index 0000000..41500b9 --- /dev/null +++ b/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; + } +} diff --git a/layouts/partials/photostream/exif_table.html b/layouts/partials/photostream/exif_table.html new file mode 100644 index 0000000..fa8cbb3 --- /dev/null +++ b/layouts/partials/photostream/exif_table.html @@ -0,0 +1,64 @@ +
+ + {{ if and .Tags.Make .Tags.Model }} + + + + {{ end }} + {{ with .Tags.LensModel }} + + + + {{ end }} + + {{- $hasLocation := and .Lat .Long -}} + {{ if $hasLocation -}} + + {{- end -}} + {{ if and .Tags.PixelXDimension .Tags.PixelYDimension -}} + + {{ end }} + + {{ if or .Tags.ISOSpeedRatings .Tags.FocalLengthIn35mmFilm .Tags.FNumber .Tags.ExposureTime }} + + + + + + + {{ end }} +
+ {{- $make := .Tags.Make -}} + {{- $model := .Tags.Model -}} + {{- if in $model $make -}} + {{ .Tags.Model }} + {{- else -}} + {{ .Tags.Make }} {{ .Tags.Model }} + {{- end -}} +
{{ . }}
+ {{ $lat := float .Lat }}{{ $latDir := cond (eq $lat 0) "" (cond (gt $lat 0) "N" "S") }} + {{ .Lat | lang.FormatNumber (cond (ne $lat 0) 3 0) }}º{{ $latDir }}, + {{ $long := float .Long }}{{ $longDir := cond (eq $long 0) "" (cond (gt $long 0) "E" "W") }} + {{ .Long | lang.FormatNumber (cond (ne $long 0) 3 0) }}º{{ $longDir }} + + {{- $widthpx := .Tags.PixelXDimension -}} + {{- $heightpx := .Tags.PixelYDimension -}} + {{- if and (gt $widthpx 0) (gt $heightpx 0) -}} + {{- $megapixels := div (mul $widthpx $heightpx) 1e6 -}} + {{ $megapixels | lang.FormatNumber 0 }} MP + • + {{ $widthpx }} × {{ $heightpx }} + {{- end -}} +
{{ with .Tags.ISOSpeedRatings }}ISO {{ . }}{{ end }} + {{- $focalLength := .Tags.FocalLengthIn35mmFilm | default .Tags.FocalLength -}} + {{- with $focalLength -}}{{ . }} mm{{- end -}} + {{ with .Tags.FNumber }}{{ printf "ƒ%0.1f" . }}{{ end }} + {{- with $exposureTime := .Tags.ExposureTime -}} + {{- if in $exposureTime "/" -}} + {{ . }} s + {{- else -}} + 1/{{ printf "%.0f" (div 1.0 (float $exposureTime)) }} s + {{- end -}} + {{- end -}} +
+
diff --git a/layouts/partials/photostream/image-resources.html b/layouts/partials/photostream/image-resources.html new file mode 100644 index 0000000..5d9a675 --- /dev/null +++ b/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 }} diff --git a/layouts/partials/photostream/thumbnail.html b/layouts/partials/photostream/thumbnail.html new file mode 100644 index 0000000..00deb43 --- /dev/null +++ b/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 }} diff --git a/layouts/photos/list.html b/layouts/photos/list.html new file mode 100644 index 0000000..5b3e6b9 --- /dev/null +++ b/layouts/photos/list.html @@ -0,0 +1,20 @@ +{{ define "main" }} +
+
+ {{ partial "page_header.html" (dict "page" .) }} +
+ + {{- .Content -}} + + {{ range .Pages.ByDate.Reverse.GroupByDate "2006" }} +
+
+

{{ .Key }}

+
+ {{ range .Pages }} + {{ .Render "page_summary" }} + {{ end }} +
+ {{ end }} +
+{{ end }} diff --git a/layouts/photos/page_summary.html b/layouts/photos/page_summary.html new file mode 100644 index 0000000..1ddbc96 --- /dev/null +++ b/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 -}} +
+ {{ if $showsTitle }} +

{{ $linkTitle }}

+ {{ end }} + + {{ . }} + + +
diff --git a/layouts/photos/single.html b/layouts/photos/single.html new file mode 100644 index 0000000..5fbe5c3 --- /dev/null +++ b/layouts/photos/single.html @@ -0,0 +1,31 @@ +{{ define "main" }} +
+
+ {{ partial "page_header.html" (dict "page" .) }} +
+ + {{- $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 -}} +
+ {{ . }} +
+ + {{ .Content -}} + + {{- if .Params.photo_details | default .Params.photoDetails | default true -}} + {{- partial "photostream/exif_table.html" $img.Exif -}} + {{- end -}} + {{ end }}{{/* if eq (len $images) 1 */}} + + +
+{{ end }}