GeneratePress: Zwei Bilder nebeneinander mit runden Ecken platzieren

Zwei Bilder nebeneinander in einem GeneratePress-/GenerateBlocks-Container klingt zunächst einfach. Schwieriger wird es, wenn beide Bilder trotz unterschiedlicher Originalformate gleich groß, quadratisch, oben abgerundet und nach unten weich in den Hintergrund auslaufend erscheinen sollen. Genau diese Kombination war Gegenstand des ursprünglichen Arbeitsverlaufs – inklusive des typischen Problems: Die CSS-Klasse war eingetragen, aber scheinbar passierte nichts.

Die zuverlässigste Lösung beginnt deshalb nicht mit immer mehr !important, sondern mit einer sauberen Blockstruktur und einem klaren Verständnis, an welchem Element die Klasse tatsächlich sitzt.

1. Die richtige Blockstruktur

Für zwei Bilder nebeneinander empfehle ich diese Struktur:

  1. äußerer Container
  2. inneres Grid mit zwei Spalten
  3. Grid-Item / Container für Bild 1
  4. Grid-Item / Container für Bild 2

Im GenerateBlocks-Panel stellst du am äußeren Grid auf Desktop zwei gleich breite Spalten ein. Auf dem Smartphone solltest du je nach Motiv meist auf eine Spalte wechseln.

2. Grundlayout mit CSS Grid

Wenn du es per eigener Klasse lösen möchtest:

.two-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 767px) {
    .two-image-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

Die Klasse two-image-grid gehört auf den äußeren Container, nicht auf die einzelnen Bilder.

3. Aus einem 3:2- oder 9:6-Bild ein sichtbares Quadrat machen

Die Originaldatei muss nicht quadratisch sein. Entscheidend ist nur der sichtbare Bildbereich.

.image-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

aspect-ratio: 1 / 1 erzeugt die quadratische Fläche. object-fit: cover füllt diese Fläche vollständig und beschneidet das Bild proportional.

4. Warum height: auto zusammen mit aspect-ratio irritieren kann

In einem frühen Versuch wurde gleichzeitig height: auto und aspect-ratio: 1 / 1 verwendet. Je nach vorhandenem Block-CSS kann der Browser dann weiterhin die natürliche Bildhöhe bevorzugen.

Robuster ist bei einem bewusst zugeschnittenen Bild:

.image-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

Alternativ kann der Wrapper das Seitenverhältnis tragen und das Bild diesen Wrapper vollständig ausfüllen.

5. Noch robuster: das Quadrat am Wrapper definieren

.image-card {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

Diese Variante ist besonders stabil, weil der äußere Container die Geometrie vorgibt und das Bild nur noch den vorhandenen Raum füllt.

6. Runde Ecken

Wenn nur die oberen Ecken rund sein sollen:

.image-card {
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

Der Radius sitzt besser am Wrapper als nur am img, weil damit auch eventuelle Overlays und Masken sauber innerhalb derselben Form bleiben.

7. Nach unten weich ausblenden

Im ursprünglichen Verlauf sollte das Bild nach unten in eine graue beziehungsweise dunkle Fläche auslaufen. Eine CSS-Maske eignet sich dafür gut:

.image-card img {
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 58%,
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 58%,
        rgba(0,0,0,0) 100%
    );
}

Die Maske verändert nicht die Bildfarbe. Sie macht das Bild nach unten zunehmend transparent. Deshalb scheint die Hintergrundfarbe des Containers durch.

8. Die Hintergrundfarbe bestimmt, wohin das Bild ausläuft

Wenn der Auslauf grau wirken soll:

.image-card {
    background: #eeeeee;
}

Bei einem dunklen Bereich entsprechend zum Beispiel:

background: #1a1a1a;

Die Maske selbst „erzeugt“ also kein Grau; sie lässt den Untergrund sichtbar werden.

9. Komplette Lösung für beide Bilder

.two-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.image-card {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: #eeeeee;
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}

@media (max-width: 767px) {
    .two-image-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

10. Wo die Klassen in GenerateBlocks eingetragen werden

Im Block-Editor wählst du das betreffende Element und öffnest in der rechten Seitenleiste Erweitert. Im Feld für zusätzliche CSS-Klassen wird nur der Klassenname eingetragen – also:

image-card

nicht:

.image-card

Der Punkt gehört nur in den CSS-Selektor.

11. Warum eine Klasse manchmal scheinbar nicht greift

Der ursprüngliche Chat lief genau in dieses Problem. Dafür gibt es mehrere mögliche Ursachen:

  • Die Klasse sitzt am img, das CSS erwartet aber einen Wrapper.
  • GenerateBlocks gibt die Klasse an ein anderes HTML-Element aus als erwartet.
  • Ein Link umschließt das Bild und beeinflusst Radius oder Overflow.
  • Ein stärkerer bestehender Selektor überschreibt die Regel.
  • Cache oder CSS-Minifizierung liefert noch eine alte Version.

12. Nicht blind !important hinzufügen

Eine frühe Reaktion auf nicht greifendes CSS ist häufig, überall !important zu ergänzen. Das kann kurzfristig helfen, macht die spätere Pflege aber schwieriger.

Besser ist zuerst im Browser-Inspektor zu prüfen:

  • Ist die Klasse im HTML überhaupt vorhanden?
  • Auf welchem Element sitzt sie?
  • Welche Regel gewinnt?
  • Welche Regel ist durchgestrichen?

13. Browser-Inspektor statt Raten

Rechtsklick auf das Bild → Untersuchen. Suche im HTML nach image-card. Liegt die Klasse beispielsweise auf einem figure-Element, funktioniert .image-card img. Liegt sie direkt auf dem img, müsste der Selektor dagegen img.image-card beziehungsweise einfach .image-card lauten.

So lässt sich in Sekunden feststellen, warum eine scheinbar richtige CSS-Regel ins Leere läuft.

14. Klasse bewusst auf den äußeren Container setzen

Für diese Gestaltung ist es am robustesten, die Klasse image-card auf den Container zu setzen, der genau ein Bild enthält. Dann bleibt das HTML-Verhalten des GenerateBlocks-Bildblocks weitgehend egal:

.image-card img { ... }

sucht einfach das Bild innerhalb dieses Containers.

15. Bildposition individuell anpassen

Bei zwei Personenbildern kann ein zentraler Beschnitt ungünstig sein. Mit object-position lässt sich jedes Motiv verschieben:

.image-card.person-left img {
    object-position: 40% center;
}

.image-card.person-right img {
    object-position: 65% center;
}

So bleibt das Layout identisch, während der sichtbare Ausschnitt individuell optimiert wird.

16. Wenn das Bild nicht beschnitten werden darf

Für Logos, Screenshots oder Dokumentabbildungen ist cover möglicherweise ungeeignet, weil Teile verschwinden. Dann kann object-fit: contain verwendet werden. Allerdings entstehen dabei freie Flächen im Quadrat.

17. Zwei Bilder auf Mobilgeräten: nebeneinander oder untereinander?

Technisch können zwei Bilder auch auf dem Smartphone zweispaltig bleiben. Bei normalen Inhaltsbreiten werden sie dann aber schnell sehr klein. Für Fotos ist eine einspaltige Darstellung häufig angenehmer.

Wenn du sie bewusst nebeneinander lassen möchtest, kannst du die Media Query weglassen oder erst bei sehr schmalen Geräten auf eine Spalte wechseln.

18. Einheitliche Höhe trotz verschiedener Quelldateien

Die Kombination aus aspect-ratio und object-fit: cover stellt sicher, dass ein 3:2-Foto und ein 4:5-Portrait im Layout exakt gleich groß erscheinen. Die Quelldateien bleiben unverändert.

19. Masken als progressive Verbesserung betrachten

CSS-Masken werden von modernen Browsern gut unterstützt; für WebKit-basierte Browser ist die zusätzliche -webkit-mask-image-Variante sinnvoll. Wenn maximale Abwärtskompatibilität erforderlich ist, kann alternativ ein Overlay-Verlauf über einem normalen Bild verwendet werden.

20. Fazit

Für zwei gleichmäßige Bilder in GeneratePress/GenerateBlocks ist ein zweispaltiges Grid mit je einem eigenen Bild-Wrapper die stabilste Lösung. Das Quadrat wird über aspect-ratio: 1 / 1 erzeugt, object-fit: cover beschneidet die unterschiedlichen Originalformate, der Wrapper sorgt für die runden Ecken und eine CSS-Maske lässt das Bild nach unten transparent auslaufen. Wenn eine Klasse nicht greift, sollte zuerst das tatsächliche HTML im Browser-Inspektor geprüft werden – nicht sofort immer mehr !important ergänzt werden.