Live example

Image Gallery shows a set of images as a grid or as a single featured image, with GLightbox. One item paragraph holds many images; grid versus single-image is a parent setting.

Use it for a still gallery. Prefer Carousel if the images should autoplay as a strip. Prefer Video for motion.

Overview

APB-DOCS-COMP-IMAGEGALLERY

Image Gallery shows a set of images as a grid or as a single featured image, with GLightbox. One item paragraph holds many images; grid versus single-image is a parent setting.

Use it for a still gallery. Prefer Carousel if the images should autoplay as a strip. Prefer Video for motion.

Adding the component

Click Add Image Gallery. Set display layout to grid or single image, plus columns if grid. Add one gallery item and upload multiple images on that item. Save.

Component configuration

Parent bundle apb_pb_image_gallery (Image Gallery). Shared fields (section title, placement, width, custom class, intro, container settings, access control) are documented once. Component-specific fields are listed in full from the live Field API dump dated 2026-09-03T03:15:35+00:00.

Container settings sections: padding, margin, border, background. Shared defaults and the validator regex are on Shared settings.

FieldLabelTypeRequiredAccepted valuesDefaultNotes
field_apb_pb_container_settingsContainer settingstext_longnoemptyShared. See Shared settings.
field_apb_pb_container_bg_mediaBackground mediaentity_referencenoentity: media (image, video, remote_video)emptyShared. See Shared settings.
field_apb_section_titleSection TitlestringnoemptyShared. See Shared settings.
field_apb_pb_introIntrotext_longnoemptyShared. See Shared settings.
field_apb_show_section_titleShow Section Titlelist_stringyesno=No</code>, <code>yes=Yes[{"value":"No"}]Shared. See Shared settings.
field_apb_target_placementTarget Placemententity_referenceyescurrent_position</code>, <code>main_content_no_container</code>, <code>main_content_top</code>, <code>main_content_bottom</code>, <code>presentation_region</code>, <code>sidebar_top</code>, <code>sidebar_bottom</code>, <code>internal_placement_1</code>, <code>internal_placement_2</code>, <code>internal_placement_3[{"target_id":52}]Shared. See Shared settings and Target placement.
field_apb_display_layout_txDisplay Layoutentity_referencenogrid</code>, <code>single_image[{"target_id":50}]
field_apb_image_gallery_itemsImage Galleryentity_reference_revisionsnoentity: paragraph (apb_pi_image_gallery)empty
field_apb_bodyDescriptiontext_longnoempty
field_apb_columns_txColumnsentity_referenceyes1_column</code>, <code>2_columns</code>, <code>3_columns</code>, <code>4_columns</code>, <code>5_columns</code>, <code>6_columns</code>, <code>7_columns</code>, <code>8_columns</code>, <code>9_columns</code>, <code>10_columns[{"target_id":22}]
field_access_controlAccess Controlentity_access_by_role_fieldnoemptyShared. See Shared settings.
field_apb_column_gap_txColumn Gapentity_referenceyes0px</code>, <code>4px</code>, <code>5px</code>, <code>8px</code>, <code>10px</code>, <code>15px</code>, <code>16px</code>, <code>20px</code>, <code>24px</code>, <code>25px</code>, <code>30px</code>, <code>32px</code>, <code>40px</code>, <code>48px</code>, <code>56px</code>, <code>64px[{"target_id":31}]
field_apb_color_style_01Color Styleentity_referenceyesblack</code>, <code>white</code>, <code>teal_blue</code>, <code>blue</code>, <code>orange</code>, <code>green</code>, <code>red</code>, <code>silver_and_blue[{"target_id":4}]
field_apb_width_txComponent Widthentity_referenceyes25_</code>, <code>33_</code>, <code>40_</code>, <code>50_</code>, <code>60_</code>, <code>66_</code>, <code>70_</code>, <code>75_</code>, <code>80_</code>, <code>90_</code>, <code>100_[{"target_id":72}]Shared. See Shared settings.
field_apb_custom_classCustom ClassstringnoemptyShared. See Shared settings.

Component items

APB Image Gallery Items apb_pi_image_gallery

field_apb_pi_desc is the Inline Entity Form autocomplete label. It is not rendered on the front end.

FieldLabelTypeRequiredAccepted valuesDefaultNotes
field_apb_pi_titleTitlestringnoempty
field_apb_pi_descAdmin descriptionstringnoemptyOptional note for editors; not shown on the site.
field_apb_pi_ig_imagesImagesimageyesentity: fileempty
statusPublishedbooleanno[{"value":true}]

Examples

Live working examples are on the demo site. Open https://demo.apb.aero.net/components/image-gallery for configurations of this component. That page links back here as View documentation.

Related documentation