Der Block „Galerie“ von WordPress bietet eine einfache Möglichkeit eine Fotogalerie zu erstellen.

Zuschneiden

Zum Beispiel Galerie-1:

Wir sehen hier 4 Bilder in der gleichen Grösse und vor allem in gleichem Seitenverhältnis, obwohl sie es überhaupt nicht sind? Dem kann Abhilfe geholfen werden, in dem beim Galerie-Block „zuschneiden“ deaktiviert wird.

Dann sieht es so aus.

Galerie-2:

nicht grad ansprechend, oder? Dann doch lieber zugeschnitten. Aber WordPress schneidet grad mal so zu, wie es das selber will. Ich stelle fest, dass es immer auf das Hochformat im „Beispiel“Galerie-1“ zuschneidet. Das macht aber nicht immer Sinn.

Ich möchte das gerne „quadratisch“ haben, aber WordPress stellt mir dazu keine MIttel zur Verfügung. Also: Selbst ist der Woodesigner:

1. Der Galerie eine erweiterte Klasse zuweisen, zb. „q-galerie„
2. Custom-CSS:
   .is-cropped.q-galerie .wp-block-image img {aspect-ratio: 1 / 1}
   (es sind natürlich andere Seitenverhältnisse möglich)
3. Zuschneiden muss für die Galerie eingeschaltet sein

Galerie-3:

Leider sieht man des Ergebnis im Backend noch nicht, aber im Frontend kommt’s dann richtig.

Obiges Beispiel mach vor allem dann Sinn, wenn es sich um anklickbare Bilder (mit Link zur Mediendatei) handelt, welche dann in voller Grösse gezeigt werden. Also so:

Galerie-4:

Letzte Reihe nicht voll

Eine leidige Geschichte. Eine 3-Spaltige Galerie mit 4 oder 5 Bildern… Sieht so aus:

Galerie-5:

Ich möchte aber nicht, dass in der letzten Reihe die vorhandenen Bilder einfach gestreckt werden, wenn die Reihe nicht voll ist. Aber wie krieg ich das hin?

so:
Dem Galerie-Block die erweiterte CSS-Klasse „q-galerie-ungerade“ geben und:
Custom-CSS:

.wp-block-gallery.has-nested-images.q-galerie-ungerade  figure.wp-block-image {
  flex-grow: 0; /* width fix */ 
}

Soll auf allen auf der Webseite verwendeten WordPress Galerien (also nicht von Plugins) dieses System wirken:

.wp-block-gallery.has-nested-images figure.wp-block-image img {
  aspect-ratio: 1; /* squared size thumbnails */ 
}
.wp-block-gallery.has-nested-images figure.wp-block-image {
  flex-grow: 0; /* width fix */ 
}