Bilder und Galerien

Dieser Beitrag hat ein Titelbild: preview: feature.webp im Front Matter zeigt auf das Bild im Beitragsbündel, das dann als Hero-Hintergrund dient. (Alternativ greift featureimage, ein Bild namens *feature*/*cover* im Bündel oder das defaultBackgroundImage der Seite.)

Der Bild-Render-Hook #

Jedes ganz normale Markdown-Bild wird automatisch nach WebP umgerechnet, in mehreren Größen (srcset) responsiv ausgeliefert, lazy geladen - und ist per Lightbox (PhotoSwipe) zoombar. Du schreibst einfach:

![Ein Arbeitsablauf als Diagramm](workflow.webp)

Klick aufs Bild öffnet die volle Auflösung. Kein manuelles Konvertieren, kein Verlinken auf das Originalbild.

Bildunterschriften #

Ein Markdown-Titel (in Anführungszeichen nach der URL) wird zur sichtbaren Bildunterschrift - und gleichzeitig zur Bildunterschrift in der Lightbox:

![Alt-Text](workflow.webp "Eine **Bildunterschrift** mit Markdown.")

Bildgrößen #

Über ein Block-Attribut auf der Zeile unter dem Bild kannst du die Breite begrenzen - small, medium, large oder wide:

![Alt](workflow.webp)
{class="medium"}

Galerie - automatisch #

Der gallery-Shortcode legt mehrere Bilder als Spalten an (Masonry). Im Automatik-Modus schreibst du einfach ein Bild pro Zeile; cols bestimmt die Spaltenzahl (Standard 3, auf dem Handy 1). Alle Bilder einer Galerie sind eine zusammenhängende, durchwischbare Lightbox-Gruppe.

{{< gallery cols="3" >}}
![Wohnzimmer](galerie/bild-1.webp)
![Wechselrichter](galerie/bild-2.webp)
![Mini-PC](galerie/bild-3.webp)
![Am Mac](galerie/bild-4.webp)
![Am iPhone](galerie/bild-5.webp)
![Fensterkontakt](galerie/bild-6.webp)
{{< /gallery >}}

Galerie - explizite Spalten #

Für volle Kontrolle, welches Bild in welcher Spalte sitzt, verschachtelst du gallery-column. Die Spaltenzahl ergibt sich dann aus der Zahl der Spalten.

{{< gallery >}}
  {{< gallery-column >}}
![Wohnzimmer](galerie/bild-1.webp)
![Mini-PC](galerie/bild-3.webp)
  {{< /gallery-column >}}
  {{< gallery-column >}}
![Wechselrichter](galerie/bild-2.webp)
![Fensterkontakt](galerie/bild-6.webp)
  {{< /gallery-column >}}
{{< /gallery >}}

Verlinkte Bilder #

Ein Bild, das selbst ein Link ist, wird nicht in die Lightbox-Gruppe aufgenommen - praktisch für anklickbare Logos:

[![Hugo-Logo](galerie/bild-3.webp)](https://gohugo.io)