Integration von Lightbox2 in Hugo

calendar 9. Sep 2026 · Lesezeit 2 Min. · OSS Hugo Lightbox  ·
Teilen: mastodon linkedin copy

Mit Lightbox2 steht eine ansprechende Form zur Präsentation von Bildern auf Webseiten zur Verfügung. Diese mochte ich jetzt auch in meiner Hugo-Webseite nutzen.

Ein kleiner Stolperstein: Lightbox2 behandelt nur Bilder, die in einen Link eingebettet sind. Rein in Markdown könnte man das zwar lösen, Lightbox2 braucht jedoch weitere Attribute, die in Markdown nicht gesetzt werden können. Aus diesem Grund gibt es in Hugo wohl für Bilder auch einen Figure-Shortcut, mit dem sich z.B. Captions und andere Attribute setzen lassen.

Diesen Shortcode habe ich einfach aus dem Hugo-Sourcecode kopiert, nach layouts/partials/ in mein Theme übernommen und am Anfang wie folgt angepasst:

1<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
2	{{- if .Get "link" -}}
3		<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}
4        {{- with .Get "data-lightbox" }} data-lightbox="{{ . }}"{{ end -}}{{- with .Get "data-title" }} data-title="{{ . }}"{{ end -}}{{- with .Get "data-alt" }} data-alt="{{ . }}"{{ end -}}>
5    {{- end -}}
6    ...

Zeile 3 habe ich vor dem schließenden > aus Zeile 2 eingefügt und die neuen Figure-Attribute data-lightbox, data-title und data-alt abgefragt und entsprechend eingebunden.

Minimal muss ein entsprechende Figure-Shortcode dann folgende Attribute gesetzt haben, um von Lightbox2 bearbeitet zu werden:

1{{< figure
2  src="..."
3  link="..."
4  data-lightbox="..."
5>}}

Evlt. könnte man das noch anpassen, so dass nicht immer link=... und data-lightbox=... beim jeweiligen Bild angegeben werden müssen und z.B. der Link automatisch aus src=... generiert wird wenn data-lightbox=... vorhanden ist. Ich selbst bin leider noch nicht so fit in der Go-Template-Sprache.

Nun müssen die bereits vorhandenen Figure-Elemente um data-lightbox="..." erweitert werden, für die eine Darstellung mit Lightbox2 gewünscht ist.

Anschließend müssen das Lightbox2-JS, -CSS und die von Lightbox2 verwendeten Bilder übernommen werden:

  1. Lightbox2 von der Release-Seite des Projekts herunterladen und entpacken.
  2. Übernahme der dist/css/lightbox.min.css nach static/css/ oder alternativ Inhalt an eine bestehende static/css/custom.css dran kopieren und im Theme einbinden.
  3. Übernahme der dist/js/lightbox.min.js nach static/js/ oder alternativ wie in Schritt 2 den Inhalt an eine bestehende static/js/custom.js dran kopieren und im Theme einbinden. Falls das Theme kein jQuery verwendet, muss dist/js/lightbox-plus-jquery.min.js verwendet werden.
  4. Kopieren der Bilder von dist/images nach static/images/.

Für meinen Geschmack waren die Transition-Effekte etwas zu langsam. Glücklicherweise lassen sich diese in Lightbox2 leicht per Javascript anpassen:

1lightbox.option({
2    'fadeDuration': 200,
3    'resizeDuration': 200,
4})

Das Ergebnis sieht man hier bei einem Klick auf das Bild: