hallowebsite Portfolio Grid

Überblick

hallowebsite Portfolio Grid ist ein Gutenberg-Block für redaktionelle Bild-Layouts im Magazin-Stil. Mit einem Galerie-Button wählst du alle Bilder auf einmal. Danach bekommt jedes Bild eine eigene Breite in Prozent und ein eigenes Seitenverhältnis – so komponierst du Reihen wie 60/40, 33/33/33 oder ein breites Aufmacherbild. Zwei Bilder lassen sich zu einem gestapelten Paar gruppieren, Bildunterschriften sind optional. Eine optionale Lightbox mit Navigation ist eingebaut, auf Mobilgeräten stapelt sich das Raster sauber untereinander.

Funktionen

• Ein Button Galerie bearbeiten, um alle Bilder zu wählen und zu sortieren.
• Pro Bild: Breite (%), Seitenverhältnis (Vorgabe 1/1, 4/3, 3/2, 16/9, 3/1, auto oder eigenes), Bildanpassung (cover/contain) und vertikale Ausrichtung.
• Zeilenbasiertes Layout: Bilder füllen eine Reihe, bis 100 % Breite erreicht sind.
• Gruppieren: ein Bild mit dem nächsten zu einem senkrechten Paar stapeln.
• Bildunterschriften als Overlay oben oder unten, auf Wunsch auch in der Lightbox.
• Optionale Lightbox mit Vor/Zurück und Schließen.
• Mobiles Stapeln mit einstellbarem Breakpoint (Standard 640 px).
• Globaler Abstand (Standard 16 px).

Verwendung

1. Den Block Portfolio Grid (Row) einfügen.
2. Galerie bearbeiten klicken und die Bilder wählen.
3. Ein Bild im Editor auswählen und im Panel Element Breite, Seitenverhältnis, Bildanpassung und Ausrichtung festlegen.
4. Über die Werkzeugleiste ein Bild mit dem nächsten gruppieren.
5. Im Panel Global Abstand, Bildunterschriften, Lightbox und mobiles Stapeln einstellen.

Block-Einstellungen

Einstellung	Standard	Beschreibung
Gap (px)	16	Abstand zwischen Bildern und Reihen.
Captions anzeigen	an	Bildunterschriften im Raster zeigen.
Lightbox aktivieren	aus	Bilder in einer Lightbox öffnen.
Captions in Lightbox anzeigen	aus	Bildunterschriften auch in der Lightbox zeigen.
Mobile Stack / Breakpoint	an / 640 px	Unterhalb dieser Breite nimmt jedes Bild die volle Breite ein.
Breite (%)	–	Breite des Bildes innerhalb seiner Reihe.
Aspect Ratio / Object-Fit	preset / cover	Proportion und Anpassung jedes Bildes.
Caption Position	unten	Oben oder unten.

CSS-Klassen

.rpg, .rpg__rows, .rpg__row, .rpg__item, .rpg__group, .rpg__media, .rpg__caption, .rpg__lightbox (mit -prev, -next, -close, -caption).

.rpg__caption { background: rgba(0,0,0,.45); color: var(--global-palette9); }
.rpg__lightbox { background: var(--global-palette3); }

Changed:
- Rebranding: neuer Name „hallowebsite Portfolio Grid“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/portfolio-grid/
- Keine funktionalen Änderungen.