This is the build video: from an empty page to a responsive picture wall that reflows by itself, with every cell captioned and linkable. The lightbox comes free; the layout is what you configure.
Two paragraph types, one wall
Image Grid is the container. Image Grid Section is a single cell, and the container accepts nothing else — the reference field is locked to that one type, so the structure cannot drift.
The two numbers that control the layout
There is no column count to choose here, and that is the point. Grid Image Width sets a minimum cell width in pixels — it ships at 200 and will not go below 50 — and the CSS fills the container with as many columns of at least that width as will fit. Widen the browser and a column appears; narrow it and one leaves. Each picture fills its cell and keeps its aspect ratio.
Grid Gap, also required, is the space between cells. Both are stored as plain integers in pixels, so the numbers you type are the numbers that render.
What goes on a single cell
- Image — required, chosen from the media library.
- Image Link — optional, and it changes the click behaviour: with a link set, only the expand icon opens the overlay.
- Image Link Title — the title attribute, described in the field help as extra information for the user.
- Title, with its own Title tag and Title alignment, so a caption can be a real heading at the right level.
Colours, borders, radius, shadow, margin and padding are available on the wrapper and again on each cell, which is how you highlight one picture in a wall of thirty.
Installing it
drush en paragraph_bundle_image_grid -y
drush cr
Enabling it also brings in paragraph_bundle_image, which owns the media type. The requirement is ^11.3 || ^12.
Next: add six pictures, set the minimum width to 300, and resize the window — the reflow explains the setting better than any description. Field reference on the Paragraphs Bundles module page.
Working out how this fits a site you already run? Drupal architecture services, and the full service list.
