40 lines
2.2 KiB
HTML
40 lines
2.2 KiB
HTML
{{- /*
|
|
One image in a gallery, see gallery.html. Params:
|
|
src the image, a file in the page's folder (page resource) or in assets/
|
|
alt what the image shows (required); also shown in the lightbox
|
|
credit photographer, licence; shown under the thumbnail and in the lightbox
|
|
*/ -}}
|
|
{{- if ne .Parent.Name "gallery" -}}
|
|
{{- errorf "gallery-image: use it inside {{< gallery >}}: %s" .Position -}}
|
|
{{- end -}}
|
|
{{- $src := .Get "src" -}}
|
|
{{- $alt := .Get "alt" -}}
|
|
{{- $credit := .Get "credit" -}}
|
|
{{- if not $alt -}}
|
|
{{- errorf "gallery-image: %q needs an alt text: %s" $src .Position -}}
|
|
{{- end -}}
|
|
{{- $image := or (.Page.Resources.Get (strings.TrimPrefix "./" $src)) (resources.Get $src) -}}
|
|
{{- if not $image -}}
|
|
{{- errorf "gallery-image: no image %q in the page's folder or in assets/: %s" $src .Position -}}
|
|
{{- else if or (ne $image.ResourceType "image") (eq $image.MediaType.SubType "svg") -}}
|
|
{{- errorf "gallery-image: %q is not a photo Hugo can resize: %s" $src .Position -}}
|
|
{{- else -}}
|
|
{{- /* Square thumbnails at two sizes, never larger than the image itself. */ -}}
|
|
{{- /* Turned as its EXIF orientation says (phone photos are often stored sideways); browsers do
|
|
that for the original, but Hugo doesn't when it resizes. */ -}}
|
|
{{- $oriented := $image.Filter images.AutoOrient -}}
|
|
{{- $side := math.Min 800 $oriented.Width $oriented.Height | int -}}
|
|
{{- $small := $oriented.Fill (printf "%dx%d Smart" (div $side 2) (div $side 2)) -}}
|
|
{{- $large := $oriented.Fill (printf "%dx%d Smart" $side $side) -}}
|
|
<li class="gallery__item">
|
|
<figure class="gallery__figure">
|
|
<a class="gallery__link" href="{{ $image.RelPermalink }}" data-width="{{ $oriented.Width }}" data-height="{{ $oriented.Height }}" data-alt="{{ $alt }}"{{ with $credit }} data-credit="{{ . }}"{{ end }}>
|
|
<img src="{{ $large.RelPermalink }}" srcset="{{ $small.RelPermalink }} {{ $small.Width }}w, {{ $large.RelPermalink }} {{ $large.Width }}w" sizes="(min-width: 48rem) 34rem, 100vw" width="{{ $large.Width }}" height="{{ $large.Height }}" alt="{{ $alt }}" loading="lazy" decoding="async">
|
|
<span class="visually-hidden"> ({{ i18n "gallery_enlarge" }})</span>
|
|
</a>
|
|
{{- with $credit }}
|
|
<figcaption class="gallery__credit">{{ . }}</figcaption>
|
|
{{- end }}
|
|
</figure>
|
|
</li>
|
|
{{- end -}}
|