94310f0f9d
Completely remove the other image gallery themes. I now have: image galleries, with lightboxes, and captions, with links in them (and to Hugo pages), with full images lazy-loaded, with all thumbnails auto-generated, and the ability to do this on both individual images *and* with globbing, from page resources, from this page or any specified one. See cavelab_notes.txt. It also has the ability to use Exif data of the photo - if I preprocess it into a JSON file. Known issues: - The theme header/footer are now being overridden. I am working to fix this first. - I am missing some kind of fonts/images needed for the lightbox to show up properly.
108 lines
4.2 KiB
HTML
108 lines
4.2 KiB
HTML
<!-- See cavelab_notes.txt at root of repo. -->
|
|
|
|
<!-- Started from: https://blog.cavelab.dev/2021/04/photo-gallery-posts/ -->
|
|
|
|
<!-- if 'page' is given, find page resources there. -->
|
|
<!-- if not, find page resources in the current page. -->
|
|
{{- $page := $.Page -}}
|
|
{{- with .Get "page" -}}
|
|
{{- $page = $.Site.GetPage . -}}
|
|
{{- end -}}
|
|
{{- if not $page -}}
|
|
{{- errorf "Error: Can't find page %s" (.Get "page") -}}
|
|
{{- end -}}
|
|
|
|
{{- $linkto := .Get "linkto" -}}
|
|
{{- $linktitle := "" -}}
|
|
{{- if $linkto -}}
|
|
{{- $linktitle = ($.Site.GetPage $linkto).Title -}}
|
|
{{- end -}}
|
|
{{- $title := .Get "title" -}}
|
|
|
|
{{- $resources := .Get "resources" -}}
|
|
{{- if not $resources -}}
|
|
{{- errorf "Error: 'resources' must be given" -}}
|
|
{{- end -}}
|
|
|
|
{{- range $src := $page.Resources.Match $resources -}}
|
|
{{- $exifJson := $page.Resources.GetMatch (printf "%s.json" .Name) -}}
|
|
|
|
{{- $exif := slice -}}
|
|
{{- with $exifJson -}}
|
|
{{- with (index (.Content | unmarshal) 0) -}}
|
|
{{- with .Title -}}
|
|
<!-- If user gave no title, but Exif has one, use that: -->
|
|
{{- if not $title -}}
|
|
{{- $title = . -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- with .Make2 -}}{{- $exif = $exif | append (printf "Make: %s" .) -}}{{- end -}}
|
|
{{- with .Model -}}{{- $exif = $exif | append (printf "Camera: %s" .) -}}{{- end -}}
|
|
{{- with .LensSpec -}}{{- $exif = $exif | append (printf "Lens: %s" .) -}}{{- end -}}
|
|
{{- with .FocalLength -}}{{- $exif = $exif | append (printf "Focal length: %s" .) -}}{{- end -}}
|
|
{{- with .FNumber -}}{{- $exif = $exif | append (printf "Aperture: ƒ/%.1f" .) -}}{{- end -}}
|
|
{{- with .ExposureTime -}}
|
|
{{- if eq (printf "%T" .) "float64" -}}
|
|
{{- $exif = $exif | append (printf "Exposure time: %.1f s" .) -}}
|
|
{{- else -}}
|
|
{{- $exif = $exif | append (printf "Exposure time: %s s" .) -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- with .ISO -}}{{- $exif = $exif | append (printf "ISO: %.0f" .) -}}{{- end -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
<!-- If still no title, just use the filename: -->
|
|
{{- if not $title -}}
|
|
{{- $title = .Title -}}
|
|
{{- end -}}
|
|
|
|
<!-- If *still* no title, but a link was given, use page title from link: -->
|
|
{{- $text := $title -}}
|
|
{{- if $linkto -}}
|
|
{{- if not $title -}}
|
|
{{- $title = $linktitle -}}
|
|
{{- end -}}
|
|
{{- $text = (printf "<a href=\"%s\">%s</a>" (relref $.Page $linkto) $title) -}}
|
|
{{- end -}}
|
|
|
|
<div class="photo-item" data-src="{{ .Permalink }}" data-sub-html="<h4>{{ $text }}</h4><p>{{ delimit $exif " | " }}</p>">
|
|
{{- $crop := default "smart" -}}
|
|
{{- $tinyw := printf "500x375 %s Lanczos q85" $crop -}}
|
|
{{- $smallw := printf "800x600 %s Lanczos q80" $crop -}}
|
|
{{- $mediumw := printf "1200x900 %s Lanczos q40" $crop -}}
|
|
{{- $largew := printf "1600x1200 %s Lanczos q30" $crop -}}
|
|
|
|
{{- $srcset := slice -}}
|
|
|
|
{{- $tiny := ($src.Fill $tinyw) -}}
|
|
{{- $srcset = $srcset | append (printf "%s 500w" $tiny.Permalink) -}}
|
|
{{- $img := dict "src" $tiny.RelPermalink "w" $tiny.Width "h" $src.Height -}}
|
|
|
|
{{- if and (ge $src.Width "800") (ne $src.MediaType.SubType "png") -}}
|
|
{{- $small := ($src.Fill $smallw) -}}
|
|
{{- $srcset = $srcset | append (printf "%s 800w" $small.Permalink) -}}
|
|
{{- $img = dict "src" $small.RelPermalink "w" $small.Width "h" $small.Height -}}
|
|
{{- end -}}
|
|
{{- if and (ge $src.Width "1200") (ne $src.MediaType.SubType "png") -}}
|
|
{{- $medium := ($src.Fill $mediumw) -}}
|
|
{{- $srcset = $srcset | append (printf "%s 1200w" $medium.Permalink) -}}
|
|
{{- end -}}
|
|
{{- if and (ge $src.Width "1600") (ne $src.MediaType.SubType "png") -}}
|
|
{{- $large := ($src.Fill $largew) -}}
|
|
{{- $srcset = $srcset | append (printf "%s 1600w" $large.Permalink) -}}
|
|
{{- end -}}
|
|
|
|
{{- $sizes := "(min-width: 900px) 420px, (min-width: 684px) 310px, calc(100vw - 40px)" -}}
|
|
|
|
<a href="{{ .Permalink }}">
|
|
<picture>
|
|
<source type="{{ $src.MediaType }}" sizes="{{ $sizes }}" srcset='{{ delimit $srcset ", " }}'>
|
|
<img loading="lazy" class="center"
|
|
src="{{ $img.src }}" width="{{ $img.w }}" height="{{ $img.h }}" alt="{{ $title }}">
|
|
<!-- CMH: img was missing closing tag on his website -->
|
|
</picture>
|
|
</a>
|
|
</div>
|
|
{{ end }}
|