CCCHH/hackertours
Watch
2
1
Fork
You've already forked hackertours
 3
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add an image gallery shortcode

Browse source
This commit is contained in:
Stefan Bethke 2026-10-17 10:16:37 +02:00
commit 124bfaed67
11 changed files with 389 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

37
layouts/_shortcodes/gallery-image.html Normal file
View file

@ -0,0 +1,37 @@
{{- /*
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. */ -}}
{{- $side := math.Min 800 $image.Width $image.Height | int -}}
{{- $small := $image.Fill (printf "%dx%d Smart" (div $side 2) (div $side 2)) -}}
{{- $large := $image.Fill (printf "%dx%d Smart" $side $side) -}}
<li class="gallery__item">
<figure class="gallery__figure">
<a class="gallery__link" href="{{ $image.RelPermalink }}" data-width="{{ $image.Width }}" data-height="{{ $image.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 -}}