# Bilder und Galerien

> Der Bild-Render-Hook (WebP, responsiv, zoombar), Bildgrößen, Bildunterschriften und die Galerie-Shortcodes.

_Quelle: https://theme.docs.tbsch.de/de/post/2026-02-02-bilder-und-galerien/ · Stand: 2026-02-02_


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:

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

![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:

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

![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`:

```markdown
![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):

![Ein kleines Bild](workflow.webp "small")
{class="small"}

![Ein mittelgroßes Bild](workflow.webp "medium")
{class="medium"}

![Ein großes Bild](workflow.webp "large")
{class="large"}

![Ein breites Bild](workflow.webp "wide")
{class="wide"}

## 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:

```markdown
{{< 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 >}}
```

<div class="tb-gallery" style="--tb-gallery-cols:3"><div class="tb-gallery-col"><figure class="tb-figure"><a class="tb-zoom" href="/post/2026-02-02-images-and-galleries/galerie/bild-1.webp" data-pswp-width="900" data-pswp-height="900" data-alt="Wohnzimmer" data-caption="Das Dashboard im Wohnzimmer."><img alt="Wohnzimmer"
      src="/post/2026-02-02-images-and-galleries/galerie/bild-1_hu_f855ebd278fbb83.webp"
      srcset="/post/2026-02-02-images-and-galleries/galerie/bild-1_hu_f0badc7c3df75f7f.webp 480w, /post/2026-02-02-images-and-galleries/galerie/bild-1_hu_f855ebd278fbb83.webp 768w"
      sizes="(max-width:480px) 100vw, 33vw"
      width="768" height="768" loading="lazy" decoding="async"></a><figcaption>Das Dashboard im Wohnzimmer.</figcaption></figure><a class="tb-zoom" href="/post/2026-02-02-images-and-galleries/galerie/bild-2.webp" data-pswp-width="970" data-pswp-height="527" data-alt="Wechselrichter"><img alt="Wechselrichter"
      src="/post/2026-02-02-images-and-galleries/galerie/bild-2_hu_aedb4664733ad3f4.webp"
      srcset="/post/2026-02-02-images-and-galleries/galerie/bild-2_hu_11e5c2fb915aaaf8.webp 480w, /post/2026-02-02-images-and-galleries/galerie/bild-2_hu_aedb4664733ad3f4.webp 768w"
      sizes="(max-width:480px) 100vw, 33vw"
      width="768" height="417" loading="lazy" decoding="async"></a></div><div class="tb-gallery-col"><a class="tb-zoom" href="/post/2026-02-02-images-and-galleries/galerie/bild-3.webp" data-pswp-width="907" data-pswp-height="437" data-alt="Mini-PC"><img alt="Mini-PC"
      src="/post/2026-02-02-images-and-galleries/galerie/bild-3_hu_ff989385fdebfc9c.webp"
      srcset="/post/2026-02-02-images-and-galleries/galerie/bild-3_hu_f992853b3abce1fa.webp 480w, /post/2026-02-02-images-and-galleries/galerie/bild-3_hu_ff989385fdebfc9c.webp 768w"
      sizes="(max-width:480px) 100vw, 33vw"
      width="768" height="370" loading="lazy" decoding="async"></a><a class="tb-zoom" href="/post/2026-02-02-images-and-galleries/galerie/bild-4.webp" data-pswp-width="921" data-pswp-height="437" data-alt="Am Mac"><img alt="Am Mac"
      src="/post/2026-02-02-images-and-galleries/galerie/bild-4_hu_a11ce7d248ba3a2b.webp"
      srcset="/post/2026-02-02-images-and-galleries/galerie/bild-4_hu_d0c7f95cc89ca50a.webp 480w, /post/2026-02-02-images-and-galleries/galerie/bild-4_hu_a11ce7d248ba3a2b.webp 768w"
      sizes="(max-width:480px) 100vw, 33vw"
      width="768" height="364" loading="lazy" decoding="async"></a></div><div class="tb-gallery-col"><a class="tb-zoom" href="/post/2026-02-02-images-and-galleries/galerie/bild-5.webp" data-pswp-width="614" data-pswp-height="719" data-alt="Am iPhone"><img alt="Am iPhone"
      src="/post/2026-02-02-images-and-galleries/galerie/bild-5_hu_e7ece7412467fc55.webp"
      srcset="/post/2026-02-02-images-and-galleries/galerie/bild-5_hu_e7ece7412467fc55.webp 480w"
      sizes="(max-width:480px) 100vw, 33vw"
      width="480" height="562" loading="lazy" decoding="async"></a><a class="tb-zoom" href="/post/2026-02-02-images-and-galleries/galerie/bild-6.webp" data-pswp-width="1000" data-pswp-height="1000" data-alt="Fensterkontakt"><img alt="Fensterkontakt"
      src="/post/2026-02-02-images-and-galleries/galerie/bild-6_hu_63df553b87718575.webp"
      srcset="/post/2026-02-02-images-and-galleries/galerie/bild-6_hu_4fdb27c9b2be0fcf.webp 480w, /post/2026-02-02-images-and-galleries/galerie/bild-6_hu_63df553b87718575.webp 768w"
      sizes="(max-width:480px) 100vw, 33vw"
      width="768" height="768" loading="lazy" decoding="async"></a></div></div>

## 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.

```markdown
{{< 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 >}}
```

<div class="tb-gallery" style="--tb-gallery-cols:2">
  <div class="tb-gallery-col"><a class="tb-zoom" href="/post/2026-02-02-images-and-galleries/galerie/bild-1.webp" data-pswp-width="900" data-pswp-height="900" data-alt="Wohnzimmer"><img alt="Wohnzimmer"
      src="/post/2026-02-02-images-and-galleries/galerie/bild-1_hu_f855ebd278fbb83.webp"
      srcset="/post/2026-02-02-images-and-galleries/galerie/bild-1_hu_f0badc7c3df75f7f.webp 480w, /post/2026-02-02-images-and-galleries/galerie/bild-1_hu_f855ebd278fbb83.webp 768w"
      sizes="(max-width:480px) 100vw, 50vw"
      width="768" height="768" loading="lazy" decoding="async"></a>
<a class="tb-zoom" href="/post/2026-02-02-images-and-galleries/galerie/bild-3.webp" data-pswp-width="907" data-pswp-height="437" data-alt="Mini-PC"><img alt="Mini-PC"
      src="/post/2026-02-02-images-and-galleries/galerie/bild-3_hu_ff989385fdebfc9c.webp"
      srcset="/post/2026-02-02-images-and-galleries/galerie/bild-3_hu_f992853b3abce1fa.webp 480w, /post/2026-02-02-images-and-galleries/galerie/bild-3_hu_ff989385fdebfc9c.webp 768w"
      sizes="(max-width:480px) 100vw, 50vw"
      width="768" height="370" loading="lazy" decoding="async"></a></div>

  <div class="tb-gallery-col"><a class="tb-zoom" href="/post/2026-02-02-images-and-galleries/galerie/bild-2.webp" data-pswp-width="970" data-pswp-height="527" data-alt="Wechselrichter"><img alt="Wechselrichter"
      src="/post/2026-02-02-images-and-galleries/galerie/bild-2_hu_aedb4664733ad3f4.webp"
      srcset="/post/2026-02-02-images-and-galleries/galerie/bild-2_hu_11e5c2fb915aaaf8.webp 480w, /post/2026-02-02-images-and-galleries/galerie/bild-2_hu_aedb4664733ad3f4.webp 768w"
      sizes="(max-width:480px) 100vw, 50vw"
      width="768" height="417" loading="lazy" decoding="async"></a>
<a class="tb-zoom" href="/post/2026-02-02-images-and-galleries/galerie/bild-6.webp" data-pswp-width="1000" data-pswp-height="1000" data-alt="Fensterkontakt"><img alt="Fensterkontakt"
      src="/post/2026-02-02-images-and-galleries/galerie/bild-6_hu_63df553b87718575.webp"
      srcset="/post/2026-02-02-images-and-galleries/galerie/bild-6_hu_4fdb27c9b2be0fcf.webp 480w, /post/2026-02-02-images-and-galleries/galerie/bild-6_hu_63df553b87718575.webp 768w"
      sizes="(max-width:480px) 100vw, 50vw"
      width="768" height="768" loading="lazy" decoding="async"></a></div>

</div>

## Verlinkte Bilder

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

```markdown
[![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.