Image Gallery



What is it?


The Image component lets you add an image from local or network drives. It supports common file types such as GIF, JPEG, JPG, PNG, and BMP.  


The first step in adding images to the gallery; first the user must upload all images to the correct 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.  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.




Once the images have been uploaded to the folder, the user will access the "Edit Mode" of the site to add the "Image Gallery".  

This 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 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 (3) sections that you can update.

  1. Change the "Heading" to whatever you desire
  2. Select the category 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.



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


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.