23. Februar 2023

Quadratische Thumbs in der WordPress-Bildergalerie

Die Gallery-Funktion in WordPress ist wirklich großartig. Alle Fotos auf einmal per Drag&Drop in den Editor und der WordPress-Magic dabei zuschauen, wie sie daraus eine Galerie zaubert ist super.

An den Standard-Einstellungen stören mich allerdings 2 Sachen:

1. Die Bilder werden unterschiedlich groß dargestellt.
2. Das oder die letzten Bilder werden riesengroß dargestellt.

Außerdem nutze ich in Bildergalerien gerne quadratische, gecroppte Thumbnails. Eine Möglichkeit das in den Gallery-Settings einzustellen gibt es auf den ersten Blick nicht. Gibt es aber!

Tatsächlich reicht es aus die Bildgröße auf „Vorschaubild“ umzustellen. Wichtig: Die Standard-Bildgröße für „Vorschaubilder“ ist 150px. Das ist zu klein! Ich würde mindestens 300px empfehlen. Die Bildgröße kann unter Einstellungen > Medien geändert werden.

Bleibt noch das Problem mit dem letzten großen Bild: Hierzu reicht es die Eigenschaft „flex-grow“ bei folgender Klasse auf 0 zu setzen.

.wp-block-gallery.has-nested-images figure.wp-block-image{ 
flex-grow: 0; 
}

.wp-block-gallery.has-nested-images figure.wp-block-image img{ 
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 50%;
}Code-Sprache: CSS (css)

Das Ergebnis: Eine Bildergalerie mit gleichgroßen quadratischen Thumbnails.

Noch ein Tipp: Standardmäßig werden die Bilder in WordPress in Original-Größe beibehalten. Wenn nicht explizit erforderlich, würde ich unbedingt empfehlen, die Bildgröße zu reduzieren. Hierfür eignet sich ganz hervorragend das Plug-in „Resize Image After Upload„.