What is it?


The Image gallery component allows you to display an entire album of images from a CMS folder as thumbnails on a page or layout. First the user must upload images to the folder that is to be displayed.


Click on the "Library" link in the top toolbar.  This opens up the library folder to client's site.  Select the folder.  




Once the user has selected the folder, the folder opens up.  In the example below, images are shown in the folder. 


Note: the ordering of the images shown in the Image Gallery Component will be alphabetical, by image title. You can change the title of an image by selecting the file in the CMS folder and clicking 'Properties'.


The user can do any of the following while in this folder:

  1. Add more images by uploading more files
  2. Update images 
  3. Delete images.


When editing the layout or page, the Image Gallery component can be added from the Components List under "Media".  Please see the image below:



Edit Mode:


Select the "Image Gallery" from the "Components List" and drag it onto the page editor.  Click on the component to activate it and then select "Edit".



Image Gallery Components Properties:


This opens the "Components Properties". Here the user selects the category the images will be pulled from.


There are (4) sections that you can update.

  1. Change the "Heading" to whatever you desire
  2. Select the source of the loaded pictures
  3. Change the size of the thumbnails to be displayed in the gallery as well as how many items are displayed.
  4. Limit the number of images shown by applying a cap



Once the user has made all the necessary changes in the "Components Properties" section click save.  


Note: the ordering of the images shown in the Image Gallery Component will be alphabetical, by image title. You can change the title of an image by selecting the file in the CMS folder and clicking 'Properties'.

Based on where the user has placed the "Image Gallery" on the "Editor", will determine the actual size of the component within a cell.  Below are a few examples of how the component adjusts to the cell it's placed in.


Example 1:  


In the below example  the "Image Gallery" is placed below the "News Carousel".  It displays with the gallery being the length of the "News Carousel".  

 


Example 2: 


In the below example  the "Image Gallery" is placed in the vertical column.  It displays with the gallery being the height of the "Calendar".  Please keep in mind that the number of images you select in this view will determine how tall it will present in the cell if there is not another cell with content in it beneath the gallery.  



Example 3:


In the below example  the "Image Gallery" is placed in the horizontal cell above the calendar.  It displays the gallery having the same length as the "Calendar".  Please keep in mind that the number of images you select in this view as well.  The component will determine how the number of images will present on the page.