eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Implement a photo carousel

Browse source 
The layout of this is all CSS with scroll-snap. (Neat!) Also implement a
JavaScript scroll event listener that detects when photos scroll and
updates the caption and photo data.

Refactor a few parts of the photo_exif_table into partials so they can
be reused for the carousel items.
This commit is contained in:
Eryn Wells 2023-04-02 09:56:27 -07:00
parent c256179803
commit 81a5507e8f
7 changed files with 393 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

66
layouts/photos/single.html
View file

@ -12,29 +12,56 @@
{{ errorf "Missing photo from photos page %q" .Path }}
{{ end }}
{{- $firstImage := index $photos 0 -}}
{{ if eq (len $photos) 1 }}
{{- $img := index $photos 0 -}}
<figure><img src="{{ $img.RelPermalink }}"{{ with $img.Params.alt }} alt="{{ . }}"{{ end }}></figure>
{{ .Content }}
{{- if .Params.photo_details | default true -}}
{{- partial "photo_exif_table.html" $img.Exif -}}
{{- if in ($.Site.BaseURL | string) "localhost" -}}
{{- partial "development/photo_exif_table.html" $img.Exif -}}
{{- end -}}
{{- end -}}
{{ else }}
<figure>
<ul class="carousel">
<img src="{{ $firstImage.RelPermalink }}"{{ with $firstImage.Params.alt }} alt="{{ . }}"{{ end }}>
</figure>
{{ else }}
<figure class="carousel">
<div class="shadow left"></div>
<div class="shadow right"></div>
<ul>
{{- range $photos -}}
<li>{{ . }}</li>
<li data-title="{{ .Title }}"
{{- with .Exif -}}
data-latitude="{{ partial "photos/latitude.html" . }}"
data-longitude="{{ partial "photos/longitude.html" . }}"
{{- with .Tags -}}
data-make="{{ .Make }}"
data-model="{{ .Model }}"
data-iso="{{ .ISOSpeedRatings }}"
data-focal-length="{{ .FocalLengthIn35mmFilm }}"
data-f-number="{{ .FNumber }}"
data-exposure-time="{{ .ExposureTime }}"
data-megapixels="{{ partial "photos/megapixels.html" . }}"
data-width="{{ .PixelXDimension }}"
data-height="{{ .PixelYDimension }}"
{{- end -}}
{{- end -}}
>
<img src="{{ .RelPermalink }}"{{ with .Params.alt }} alt="{{ . }}"{{ end }}>
</li>
{{- end -}}
</ul>
<figcaption>
{{ $firstImage.Title }}
</figcaption>
</figure>
{{ end }}
<section id="content">
{{ .Content }}
</section>
{{- if .Params.photo_details | default true -}}
{{- partial "photo_exif_table.html" $firstImage.Exif -}}
{{- if in ($.Site.BaseURL | string) "localhost" -}}
{{- partial "development/photo_exif_table.html" $firstImage.Exif -}}
{{- end -}}
{{- end -}}
<footer>
{{ partial "footer_tags.html" . }}
</footer>
@ -43,3 +70,12 @@
{{ define "footer" }}
{{ partial "footer.html" . }}
{{ end }}
{{ define "scripts" }}
{{- $photos := partial "photos/list.html" . -}}
{{ if gt (len $photos) 1 }}
{{ with resources.Get "scripts/photo_carousel.js" | fingerprint "md5" }}
<script src="{{ .RelPermalink }}"></script>
{{ end }}
{{ end }}
{{ end }}