Eryn Wells
f5fd358922
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.
81 lines
2.2 KiB
HTML
81 lines
2.2 KiB
HTML
{{ define "header" }}
|
|
{{ partial "header.html" . }}
|
|
{{ end }}
|
|
|
|
{{ define "main" }}
|
|
{{- if .Title -}}
|
|
{{ partial "content_header.html" . }}
|
|
{{- end -}}
|
|
|
|
{{- $photos := partial "photos/list.html" . -}}
|
|
{{ if eq (len $photos) 0 }}
|
|
{{ errorf "Missing photo from photos page %q" .Path }}
|
|
{{ end }}
|
|
|
|
{{- $firstImage := index $photos 0 -}}
|
|
{{ if eq (len $photos) 1 }}
|
|
<figure>
|
|
<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 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>
|
|
{{ end }}
|
|
|
|
{{ 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 }}
|