Virginia Tech™home

Gallery component

NOTE: The gallery component that's embedded in the Search and Homepage templates has a bug where you have to configure it, add an item, don't drop anything in, click the checkmark to say done and then reopen it and add the first image, and any others. There's something that doesn't initialize properly when the component is embedded in a page template.

The Gallery component allows users to feature images for a photo gallery or in a carousel on their pages. It can feature images, titles, captions and linked text. 

On the page, click and drag the Gallery component to the location where you want it to appear. 

Properties window

After placing the component on the page, open its properties by clicking on the configure (wrench) icon. 

Two tabs appear in the properties window: Gallery Type and Items. 

Under Gallery Type, choose the Featured Light Box, Light Box, or Carousel option. 

Gallery type choices
Gallery type choices
Add field
Add field for gallery image.

Once the style is chosen, select the Items tab to add the images. Those images can be placed using the Asset library.

Drag and drop an image to the gallery
Drag and drop an image from a site's asset library to build the gallery. You can also add a heading, link, and caption.

The Gallery component allows users to feature images for a photo gallery or in a carousel on their pages. It can feature images, titles, captions and linked text.

Features

  • Multiple images in gallery
  • Image is sourced from the asset library
  • Various positioning options
  • Various style options

Dialog Properties

Title and Options

  1. Component Title - Title of Component
  2. CSS Class - CSS class to be applied to the component
  3. Do not resize large image - when using the large image display option, will use the full-size image instead of a scaled version
  4. Gallery Type - There are major presentational differences between types
    • Carousel - A series of slides that can be scrolled through, with controls to scroll to the desired slide
      1. Play speed - The number of milliseconds to wait before auto-advancing the slide
      2. Controls Style
        • (default)
        • Below Image - controls are placed below the image slide
        • Hidden
    • Featured Image Gallery - A selected image is displayed while also showing thumbnails of all images in the set
    • Light Box Gallery - A grid of thumbnails is displayed, and the selected image opens in a modal dialog box

Items

Create, delete, and reorder gallery items
Note - you may no longer drag-and-drop images from the asset library tab

Add items

  1. Image - Choose the image from the asset library
  2. Link/Reference - Choose a page to link to or input a URL
  3. Heading
  4. Caption
  5. Align
    • Center
    • Left
    • Right