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

4
layouts/_partials/gallery-script.html Normal file
View file

@ -0,0 +1,4 @@
{{- /* Script for the gallery shortcode, included by the base templates on pages that use it. */ -}}
{{- with resources.Get "js/gallery.js" | minify | fingerprint -}}
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" defer></script>
{{- end -}}

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 -}}

20
layouts/_shortcodes/gallery.html Normal file
View file

@ -0,0 +1,20 @@
{{- /*
Image gallery: square thumbnails, two per row on wide screens, that open the full image in a
lightbox (assets/js/gallery.js) with the alt text and credit. Without JavaScript the
thumbnails link to the full image.
{{< gallery >}}
{{< gallery-image src="photo1.jpg" alt="What the photo shows" credit="© Photographer" >}}
{{< gallery-image src="photo2.jpg" alt="…" credit="…" >}}
{{< /gallery >}}
*/ -}}
<div class="gallery" data-gallery
data-label-dialog="{{ i18n "gallery_dialog" }}"
data-label-close="{{ i18n "gallery_close" }}"
data-label-previous="{{ i18n "gallery_previous" }}"
data-label-next="{{ i18n "gallery_next" }}">
<ul class="gallery__list">
{{- .Inner }}
</ul>
</div>
{{- /* chomp */ -}}

1
layouts/baseof.html
View file

@ -14,6 +14,7 @@
{{ partial "head/extra.html" . }}
{{ block "head" . }}{{ end }}
{{ if .HasShortcode "schedule" }}{{ partial "schedule-script.html" . }}{{ end }}
{{ if .HasShortcode "gallery" }}{{ partial "gallery-script.html" . }}{{ end }}
</head>
<body class="{{ if .IsPage }}single-page{{ else }}list-page{{ end }}{{ if .IsHome }} front{{ end }}{{ with .Section }} section-page--{{ . | urlize }}{{ end }}{{ with $.Param "bodyclass" }} {{ . }}{{ end }}">

1
layouts/home-baseof.html
View file

@ -14,6 +14,7 @@
{{ partial "head/extra.html" . }}
{{ block "head" . }}{{ end }}
{{ if .HasShortcode "schedule" }}{{ partial "schedule-script.html" . }}{{ end }}
{{ if .HasShortcode "gallery" }}{{ partial "gallery-script.html" . }}{{ end }}
</head>
<body class="{{ if .IsPage }}single-page{{ else }}list-page{{ end }}{{ if .IsHome }} front{{ end }}{{ with .Section }} section-page--{{ . | urlize }}{{ end }}{{ with $.Param "bodyclass" }} {{ . }}{{ end }}">