The Grid – Gallery component allows administrators to create a grid of images that can either stretch to the full width of the browser or remain confined to the width of the page container. Users can click on any image in the gallery to open a fancybox popup, enabling them to zoom in for a closer view.
This component offers several configuration options, divided into the following categories:
| Settings |
This section includes general settings that apply across all components in the system:
- Hide on Mobile/Tablet/Desktop: Pick whether to hide, or show this component independently on mobile, tablet, and desktop resolutions via a set of three checkboxes.
- Desktop/Mobile Padding: Adjust the top and bottom padding for both desktop and mobile views.
- Section Background Colour: Select a background colour from a pre-configured list of brand colours.
- Section Width: Control the width of the component’s container, allowing it to occupy either the full browser width or remain within a fixed page width.
|
| Animation |
Administrators can choose from seven entrance animation options for the gallery:
- None
- Slide in from the top
- Slide in from the bottom
- Slide in from the left
- Slide in from the right
- Fade in
- Grow in
|
| Pod Styling |
This section allows administrators to customise the styling of each image pod through various options:
- Images Per Row: Select the number of images per row from four layout options: ‘6 images’, ‘4 images’, ‘3 images’, and ‘2 images’. If the number of images added into the component exceeds the allocation for number of images per row, any extra images will overflow onto the next row.
- Caption Overlay Colour: Set the background colour for the caption overlay, which appears when the user hovers over an image with a caption. Option values are based on a pre-configured list of brand colours.
- Caption Text Alignment: Choose the alignment (left, right, or centre) of the caption within the overlay.
- Caption Text Colour: Set the text colour for the image caption, visible when the user hovers over the image. Option values are based on a pre-configured list of brand colours.
- Full Width: Enable this option to allow the gallery to stretch across the full width of the browser. Note that when ‘Full Width’ is enabled, the Section Width setting must be set to ‘Widest’ to allow the gallery to occupy the full width. If a different Section Width is selected, the gallery will only occupy a percentage of the browser’s width.
|
| Content |
This section contains a Gallery field where administrators can upload and select multiple images. Additional features include:
- Image Captions: After uploading an image, administrators can click on the image to set a caption.
- Reordering Images: Reorder images by dragging and dropping them into the desired sequence.
|
You can view examples of the Grid – Gallery component in various styles and with different entry animations here.
