Image Gallery

An Image Gallery shows a set of photos as square thumbnails. Clicking a thumbnail opens the photo full size in a lightbox, where visitors can step through the whole set. The gallery can be a grid of thumbnails or a single thumbnail that stands for the entire set.

What it is for

Use it for event photos, facilities, portfolios — any set of pictures that visitors may want to browse at full size without leaving the page. The Single Image layout is useful when space is tight, for example next to a paragraph inside a Simple Content column.

See it live on the example page APB Image Gallery.

Structure

• The Image Gallery component holds the layout (Grid or Single Image), the columns and gap, a hover color and an optional description.
• Image Gallery Items — each item holds a set of images (upload as many as you like in one item). Most galleries need a single item; use several items when you want to keep sets apart for editing.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro	—	— / No / empty	See Section Title and Intro Text.
Description	rich text	empty	A second text block, shown under the intro and above the thumbnails.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Display Layout	Grid, Single Image	Grid	Grid shows every image as a thumbnail. Single Image shows only the first image; clicking it opens the lightbox with all of them. Columns and Column Gap are ignored in Single Image.
Columns	1 … 10	6	Thumbnails per row (Grid only). See Columns and Column Gap.
Column Gap	0 … 60px	10px	Space between thumbnails (Grid only).
Color Style	Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue	Blue	Color of the hover effect on thumbnails and of the caption. See Color Style.
Component Width	25% … 100%	100%	See Component Width.
Custom Class / Access Control	—	—	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Image Gallery Item fields

Field	Required	What it does
Title	no	Name of the set; shown as a caption in the lightbox when the image has no title of its own.
Images	yes	One or more PNG, GIF, JPG or WebP files. For each image you can set a Title (lightbox caption), Alternative text (for screen readers and search engines) and adjust the square Crop used for the thumbnail.
Admin description	no	Editor note; never shown.

How to use it

1. Click Add Image Gallery, set the Section Title and, if useful, an Intro or Description.
2. Leave Display Layout on Grid and pick the number of Columns (4–6 works well for photos).
3. Click Add new Image Gallery Item, give it a Title, and upload the images. Fill in the alternative text for each; adjust the square crop when a face or subject is cut off.
4. Click Create, save the page, and click a thumbnail to check the lightbox order — it follows the upload order.

Tips

• Upload reasonably sized files (about 2000px on the long side is plenty). The site resizes thumbnails automatically, but very large originals slow down the lightbox.
• Use Single Image plus Component Width 100% inside a Simple Content column to get a “click to see more photos” tile.
• If you want captions and links on each picture rather than a lightbox, use Carousel or Feature Box instead.

For site builders

Item	Value
Module	apb_pb_image_gallery
Paragraph types	apb_pb_image_gallery, apb_pi_image_gallery
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Crop, Image Widget Crop, core Image / Options / Taxonomy / Text
Own config	crop type apb_gallery_thumb; image styles apb_image_gallery_thumb (grid) and apb_image_gallery (lightbox)
Shared vocabularies	apb_tax_display_layout (Grid / Single Image), apb_tax_columns, apb_tax_column_gap, apb_tax_cs_01, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_image_gallery/frontend: GLightbox (from aero-page-builder-core) with one gallery per component.
Container settings	Full profile.
Example page	/apbuilder_examples/apb-image-gallery