Widget Type - Image Gallery

The Image Gallery widget will display the images from a specified folder. The widget is configured by selecting a pre-built folder of images from the Content Tree.  The images will display as thumbnails on the page in a grid view; a pop-up modal will appear when an image is clicked upon.
Available in the following Content Blocks: Extra Large, Large

Requirements: A folder of images

Step 1: Create a Folder

1. On the Content Tree select the Site Data folder 
2. Click on the New(+) button located above the Content Tree
3. Select Folder

4.  Name: enter a name for the folder
5.  Click on Save or Save and Create Another if you wish to create additional folders

Step 2: Add Images to the Folder

1. On the Content Tree select the Folder
2. Click on the New(+) button located above the Content Tree
3. Select File

4. Upload file: add an image by clicking Upload file, selecting the image from your computer files and clicking Open
5. File Description: is optional, and will display when a user hovers their mouse over a thumbnail image and it will display under the image when it opens in the pop up modal
6. Click on Save or Save and Create Another if you wish to upload additional images

TIP: Instead of uploading many images in the album one by one the following steps can be used to upload multiple images at once.

1. On the Content Tree select any Page 
2. Click on the hamburger menu in any content block
3. Click Add new widget 
4. Click Text Area
5. Click Select
6. Click filmstrip icon to insert/edit image or media

​

7. Click Content Tab
8. Click plus sign beside Site Data folder
9. Select Folder where images should be stored for this image gallery
10. Click Upload button
11. Select image(s) - use shift or ctrl key on keyboard to select multiple images from your computer files and clicking Open
12. Images are now uploaded into the Folder created for the image gallery
13. Click X in top right to close the Insert image or media window 
14. Click X in top right to close the Widget properties window for the Text Area (the Text Area widget does not need to be saved)
15. Reload the content tree and all new images will be found in the image folder under Site data - to add a caption to the images that have been uploaded in bulk follow Add or Edit Caption for an image steps below.

Add or Edit Caption for an image

1. Click plus sign beside Site Data folder
2. Select Folder where images are stored for gallery
3. Click on image to add caption
4. Click Form tab
5. Description: type text to be displayed when a user hovers their mouse over a thumbnail image and it will display under the image when it opens in the pop up modal
6. Click Save

Step 3: Select or Add Page to insert Image Gallery Widget

 

1. On the Content Tree select the Page to add the Image Gallery Widget or Click on the New(+) button located above the Content Tree to create new page
2. Click on the hamburger menu on the content block that you'd like to add a widget to
3. Click Add new widget  Note: Image Gallery Widget would only be available in Full Width Page Banner, 100%Content and 70% Content
4. Click on Image Gallery - Extra Large or Image Gallery - Large, this would depend on the content block
5. Click Select

Step 4: Configure the Image Gallery Widget Properties

Any field marked with a red asterisk (*) is required in order to save the widget. Once all the applicable fields have been configured, click Save & Close to save the widget.

Content

• Main Title: title will display above images (50 character limit)
• Path: click Select to choose the Folder from the Content Tree that was created in step 1 to be utilized within the widget. The folder must already be created in order to add it to the widget

Paging

• Enable Paging: if enabled, the user will be able to click through pagination links to navigate through the pages
• Page Size: determines how many images will appear per page - Note: max number of images per row would be 6
• Show first and last buttons: if enabled, will allow a user to navigate to the first or last page using the applicable first and last arrows

System Settings

• Check permissions: if enabled, only the roles associated to the page via the page security settings will be able to view the images

Advanced Settings 
These settings usually do not have to be modified. To access these settings, click on Advanced

• Title Alignment: use the drop down to either left, center or right align the title
• Title Size: Choose between Small, Normal (default), Large font size
• Margins: add space between the Image Gallery Widget and other widgets before or after it on the same page
• Override Padding: add space within the Image Gallery Widget

Step 5: Test the Image Gallery

1. After saving and closing the widget properties
2. Remember to Save and Publish the page
3. Click on the Live Site button in the top right corner and go to the page the Image Gallery widget was added to
   • if the page is hidden from the navigation
     1. Click Properties > General
     2. Scroll down and click on the Live URL link to open up the page

In order for the image gallery to work make sure that the browser is not in preview mode. If the browser is in preview mode clicking on the thumbnail image will not make it bigger with the lightbox effect. Note: Only administrators will experience preview mode.

How to close preview mode

1. Look in the top left corner of the browser - text says  "This is a preview mode of page name. Close the preview mode."
2. Click word Close
3. The page will reload
4. Click on thumbnail image and the Image Gallery will work correctly

Note: Only Administrators will ever experience the preview mode

Delete an Image

1. Click plus sign beside Site Data folder
2. Select Folder where images are stored for gallery
3. Click on image that is no longer needed
4. Click red Trash can at the top of the content tree

Change order of an Image in the gallery

1. Click plus sign beside Site Data folder
2. Select Folder where images are stored for gallery
3. Click on image that needs to change position
4. Use up or down arrows at the top of the content tree to change order that it appears