hallowebsite Portfolio Grid

Overview

hallowebsite Portfolio Grid is a Gutenberg block for editorial, magazine-style image layouts. You pick all images with one gallery button. Each image then gets its own width in percent and its own aspect ratio, so you can compose rows such as 60/40, 33/33/33 or one wide hero image. Two images can be grouped into a stacked pair, and captions are optional. An optional lightbox with navigation is built in, and the grid stacks cleanly on mobile.

Features

• One Edit gallery button to pick and order all images.
• Per image: width (%), aspect ratio (preset 1/1, 4/3, 3/2, 16/9, 3/1, auto or custom), object fit (cover/contain) and vertical alignment.
• Row-based layout: images fill a row until 100 % width is reached.
• Grouping: stack an image with the next one into a vertical pair.
• Captions as an overlay, top or bottom, with an option to show them in the lightbox too.
• Optional lightbox with previous/next and close.
• Mobile stack with a configurable breakpoint (default 640 px).
• Global gap (default 16 px).

Usage

1. Add the block Portfolio Grid (Row).
2. Click Galerie bearbeiten (Edit gallery) and choose your images.
3. Select an image in the editor and set its width, aspect ratio, fit and alignment in the Element panel.
4. Use the toolbar to group an image with the next one.
5. In the Global panel, set the gap, captions, lightbox and mobile stack.

Block settings

Setting	Default	Description
Gap (px)	16	Space between images and rows.
Captions anzeigen	on	Show captions on the grid.
Lightbox aktivieren	off	Open images in a lightbox.
Captions in Lightbox anzeigen	off	Show captions in the lightbox too.
Mobile Stack / Breakpoint	on / 640 px	Below this width every image takes the full width.
Breite (%)	–	Width of the image within its row.
Aspect Ratio / Object-Fit	preset / cover	Proportion and fit of each image.
Caption Position	unten	Top or bottom.

CSS classes

.rpg, .rpg__rows, .rpg__row, .rpg__item, .rpg__group, .rpg__media, .rpg__caption, .rpg__lightbox (with -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.