The Gallery Element provides you with unique options to display a large group of images within your website.


To get started, click and drag the Gallery Element from the Edit Menu in the desired content area.  

Once placed, the Gallery Window opens up.




Gallery Tab


When the Gallery Window opens, you will find yourself on the Gallery Tab.  Here you will be able to select the images and select the features for your gallery.

To create a gallery requires you to select a group of images.  By default, all of the images uploaded to your File Manager will be listed.  The dropdown menu allows you to select a specific folder within your File Manager, while the search box allows you to search for images based on keyword tags.  It is recommended to have the images you would like for your gallery organized within your File Manager before proceeding.  For more information on how to organize your images, visit the File Manager tutorial. 


 

Once you've selected the images for your gallery, the next step is to set the parameters for how it will function on the page.

Gallery Type 


There are currently 3 Gallery types available for you to choose from, with each having their own settings.
  • Basic:  When the user clicks on an image, the image will open in a new window.
    • Thumbnail Size: This is size of the images within gallery that will be displayed on the page. The options are:
      • Tiny Thumb: 32x32 pixels
      • Thumb: Maximum dimension of 120 pixels
      • Square Thumb: 120x120 pixels
      • Gallery: Maximum dimension is 600 pixels
      • Original: Size of the original image
    • Open in New Window: Choose whether the selected image opens in a new window.
    • Image Size: The size of the image displayed after it is selected from within the gallery.
  • Lightbox: When the user clicks an image, a pop-up window will open and display the image.  Includes the ability to browse the entire gallery from the pop-up.
    • Thumbnail Size: This is the size of the images within the gallery displayed on the page.
    • Include File Name: Choose to display the file name of the image.
    • Image Size: The size of the images displayed within the pop-up window.
  • Slider: An animated slider that transitions through all images within the gallery.
    • Width: Set width for the images in the slider. Can be set using number of pixels or percentage of content area.
    • Height: Set height for the images in the slider.
    • Use Image Size: Set the display size of the images.
    • Transition: Select the transition between images.
      • Horizontal: Images slide horizontally
      • Vertical: Images slide vertically
      • Fade:  Images will fade.
    • Delay: Set a time for the transition between images.
    • Animation Time: Set a time for duration of the transition.
    • Auto Play: Select whether the slider will play automatically.
    • Random Start Slide: Select whether the slider starts on a random image.
    • Resize Contents: Choose whether to have all images conform to the same size.
    • Pause on Hover: The slider will pause when hovering over an image with your cursor.
    • Display Arrows: Choose to display left and right navigation arrows.
    • Display Tabs: Choose to display navigation tabs.
    • Display Start/Stop: Choose to display the start/stop button, gives user animation control.
    • Play RTL: Choose to play the slider from Right to Left.

Advanced Tab


The advanced tab contains settings to customize how the gallery will be displayed within the content area.


  • Display: Determines how the gallery will be displayed on the page. 
    • All Devices: The gallery will display when viewed on all devices.
    • Full Version: The gallery will ONLY display when website is viewed using a computer.
    • Mobile Version: The gallery will ONLY display when website is viewed using a mobile device.

  • Class: Assign a CSS class to the gallery, allowing you advanced control over how it is displayed.


Files Tab


The files tab gives you the option to upload images to be used in gallery.  This can also be done using the File Manager.

Here you will see a list of all of the image folders found within your File Manager. 

  • To create a new folder, hover over a selected folder and click the black triangle to open the 'New Folder' option. Select the title and location of your new folder and click 'Add'.
  • Choose the folder where the uploaded images will be placed.  
To upload images, you can drag the files to the red 'Upload Files' section or you can click on the button to select the images from a specific location within your computer.  Once the image has been uploaded, the green status bar will appear indicating the image has been uploaded.

When you are finished creating your gallery, select 'Save Changes' to publish to your website.  The gallery will be immediately viewable on the page.

Gallery Element Tutorial