After this video you can publish a wall of thumbnails where a visitor clicks any picture and it opens full size in an overlay above the page — no gallery library, no custom JavaScript, and nothing to configure beyond the paragraph itself.
Where the full-size picture comes from
Every cell of the wall is an Image Grid Section paragraph pointing at a pb_media_image media item. The thumbnail is rendered through the module's own pb_image_grid media view mode, while a preprocess hook passes the original file URL to the gallery script. That separation is why the overlay shows a sharp original instead of an enlarged thumbnail.
One behaviour catches people out, and the field help text states it outright: a thumbnail is clickable on its own, but once you add an Image Link to that cell, the click follows your link and only the expand icon opens the overlay. A linked picture should go where its link points.
What the overlay does for keyboard and screen-reader users
- Escape shuts the overlay and focus returns to the thumbnail that opened it.
- Tab and Shift+Tab cycle inside the overlay; the page behind stays out of reach.
- Previous and next controls step through the gallery without closing it.
- The container carries
role="dialog"andaria-modal="true"while open, and open and close are both announced throughDrupal.announce().
Before you follow along
Enable paragraph_bundle_image_grid; it pulls in paragraph_bundle_image, which owns the media type. The .info.yml declares core_version_requirement: ^11.3 || ^12, so this suite does not install on Drupal 10 — for a Drupal 10 site reach for W3CSS Paragraphs instead, which still covers ^10 || ^11 || ^12.
Your next step: open the Paragraphs Bundles module page for the install commands, add one Image Grid paragraph to a test node, and click a thumbnail to watch the overlay behave exactly as described above.
Need this built into your own site? See Drupal development services, or request a quote.
