Gallery Widget

Gallery Widget

Last updated 03.29.24

This Gallery Widget is a plug and play component designed to display a collection of photographs or images in a slideshow. The images can feature a caption and a URL load on click. This document goes over recommended configuration settings.

  • Built to display a collection of photographs or images
  • Individual images can include captions
  • Sources images created in the Gallery Image Page type
  • Can select a static series of photos in a single row slider
  • Can use portrait, landscape or mix of orientations 
  • Recommended individual images should not be more than 100kb

Add Gallery to the page

1. Select where on the page you would like the gallery to appear. 
2. Click on the blue plus add widget icon   
3. Select the Gallery widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Gallery Widget Properties

5. In the Gallery Widget properties pop up, adjust various settings including gallery type, margins and background color. 

6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Gallery Widget

Hover over the Gallery widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Gallery Widget

Hover over the Gallery widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Gallery Widget Properties

PROPERTYDESCRIPTION
VisibleChecking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut.
Page PathFolder in content tree recommended for Gallery Image Page Types - select path from content library
TransformationSelect the layout transformation (visual presentation) for the gallery:
• Slider Gallery
Max Columns (Large screens)
Max Columns (Medium screens)
Max Columns (Small screens)

Enter number for items visible on page for large, medium and small screens. This choice is dependent on many variables such as the size of the repeated item and the size of the space provided for the Gallery Widget on the page. 1-5 images recommended for large screens while 1 image is recommended for small screens. Testing is recommended on all devices.
Image Margin & PaddingAdjusts spacing between images in gallery. Select from:
• Standard (30 px)
• None
Standard setting recommend for a gallery using captions
Display CaptionsCheckbox toggles visibility of captions on all images if captions were added in the Gallery Image Page Type.
Invert TextTypically the widget can guess if the text should be dark or white depending on what color background is behind it. But if the visual can be improved by a change from one to the other, click the Invert Text Color checkbox.
Captions AlignmentIf captions appear below each image, select from:
• Left
• Center
• Right
Slider ArrowsClickable slider arrows to navigate the slideshow can be placed  below the gallery or to the left and right. Select from:
• Bottom
• Left & Right
Custom CSSCode provided by the Atlas development team to achieve custom effects

Gallery Widget Examples