Bilder und Galerien

Dieser Beitrag hat ein Titelbild: Ein Bild namens feature.webp im Beitragsbündel wird automatisch als Hero-Hintergrund erkannt. (Alternativ greift featureimage: im Front Matter, ein Bild namens *background*/*cover*/*thumbnail* 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"}

Alle vier Größen im Vergleich - small (schmal, z.B. für Hochkant-Screenshots), medium, large und wide (bricht aus der Textspalte aus):

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.

Die Aufteilung erfolgt der Reihe nach, nicht abwechselnd: bei sechs Bildern und drei Spalten landen Bild 1-2 in der ersten, 3-4 in der zweiten und 5-6 in der dritten Spalte. Auf schmalen Viewports lösen sich die Spalten auf und die Bilder fließen wieder in Quellreihenfolge untereinander. Eine Bildunterschrift (Markdown-Titel, siehe oben) funktioniert auch in der Galerie - sichtbar unter dem Bild und als Beschriftung in der Lightbox:

{{< gallery cols="3" >}}
![Wohnzimmer](galerie/bild-1.webp "Das Dashboard im Wohnzimmer.")
![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. Der cols-Parameter wird in diesem Modus ignoriert - die Spaltenzahl ergibt sich aus der Zahl der gallery-column-Blöcke, und innerhalb einer Spalte stapeln sich die Bilder in der notierten Reihenfolge. So kannst du etwa Hoch- und Querformate gezielt verteilen oder ein bestimmtes Bild oben links festhalten. Lightbox-Gruppe und Mobil-Verhalten sind dieselben wie im Automatik-Modus.

{{< 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)

Unter der Haube #

Was die Galerie im Hintergrund erledigt - ganz ohne weitere Parameter:

• Jedes Bild durchläuft den normalen Bild-Render-Hook: WebP-Konvertierung, mehrere srcset-Größen, Lazy Loading.
• Der sizes-Hinweis wird pro Galerie auf die tatsächliche Spaltenbreite umgeschrieben (bei drei Spalten also rund ein Drittel des Viewports) - der Browser lädt dadurch die kleinstmögliche passende Variante statt der vollen Breite.
• Die Spalten sind Flex-Spalten, keine CSS-Multi-Columns: alle Spalten beginnen in jedem Browser an derselben Oberkante, ohne engine-abhängiges Umbrechen.
• Auf dem Handy löst display: contents die Spalten auf - die Bilder stehen dann wieder untereinander in Quellreihenfolge.