In This Article:


  1. Navigate to the page you wish to add the Gallery Element to.
  2. Click on Edit to jump into Edit Mode
  3. Click and Drag the Gallery Element into a Content Area
  4. Select a Folder to display images from.
  5. Click Save Changes


Selecting Images

The Gallery Element displays images from the selected Folder within your File Manager. Please use the dropdown to select which folder you wish to use. Note, if you need to create a new Folder please see our guide here:  How to create a folder


Options

There are currently 3 Gallery types available for you to choose from, with each having its own settings.

  1. Basic:  When the user clicks on an image, the image will open in a new window.
    • Thumbnail Size: This is the size of the images within the 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.

  2. 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.

  3. Slider: An animated slider that transitions through all images within the gallery.
    • Width: Set the width for the images in the slider. Can be set using a number of pixels or a percentage of the content area.
    • Height: Set the 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 the 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, giving user animation control.
    • Play RTL: Choose to play the slider from Right to Left.

Files Tab

The Files Tab allows you to upload new images into your File Manager