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

19
README.md
View file

@ -50,6 +50,25 @@ Wide screens get one column per day on an hour grid, with tours that start at th
For a different event than the page's section, pass its name: `{{< schedule 39c3 >}}`.
Without a data file, or without any tours in it, the shortcode renders nothing and the build logs a warning. To silence it, for example for an upcoming event, add `warning-schedule-empty` to `ignoreLogs` in `hugo.yaml`.
## Shortcode: Image gallery
`{{< gallery >}}` shows a page's photos as square thumbnails, two per row on wide screens and one per row on narrow ones. Clicking a thumbnail opens the full image in a lightbox with its alt text and credit; with more than one image, arrows (on screen, the arrow keys, or swiping) move between them, and Escape, the close button or a click beside the image closes it.
```markdown
{{< gallery >}}
{{< gallery-image src="hafenrundfahrt1.jpg" alt="Containerschiffe „HMM Dublin“ und „Ever Greet“ im Hafen" credit="© Wikipedia-User CC BY-SA 4.0 Shotbyp4ul" >}}
{{< gallery-image src="hafenrundfahrt2.jpg" alt="Das Speicherstadtrathaus" credit="© Wikipedia-User CC BY-SA 3.0 Magnus Manske" >}}
{{< /gallery >}}
```
| Param | Required | Content |
|---|---|---|
| `src` | yes | The image: a file in the page's folder, or a path in `assets/`. It must be a photo Hugo can resize (JPEG, PNG, WebP…), not SVG. |
| `alt` | yes | What the image shows. It is the thumbnail's alt text and the caption in the lightbox. |
| `credit` | no | Photographer and licence, shown under the thumbnail and in the lightbox. |
Hugo crops the thumbnails to squares (keeping the most interesting part of the picture) at build time; the lightbox shows the original file. Without JavaScript, a thumbnail links to the original file. A missing image, a missing `alt` or a `gallery-image` outside a `gallery` stops the build with an error that names the page.
## Accessibility check
CI runs [pa11y-ci](https://github.com/pa11y/pa11y-ci) with the axe and HTML_CodeSniffer rules for WCAG 2 AA on every push and pull request, in its own job (`accessibility`), so findings show up without blocking the deploy. To run the same check locally (needs Node.js, Python 3 and Chrome or Chromium):