Gallery component

The Gallery component provides a flexible platform to display various media in a clean and organized way. The component is able to display up to 4 sets of videos, image sets, presentations, or podcasts. On click of an item, it would open a popup window to display or play the gallery item.

To load the component

To load Gallery component onto the page:

  1. Open Side Panel if closed, and then click on Components tab
  2. Drag and drop the Gallery component.

To configure the Gallery Component

  1. Click on the component to display the Edit bar.
  2. Click on Configure icon (wrench) to open the Gallery Configure panel.
  3. Configure the component's header in the Gallery tab.
  4. Configure/add media in the Gallery Items tab.
  5. Click on the + icon to add a gallery set.
  6. Provide a gallery set header in the Identifier field.
  7. Drag and drop a thumbnail for the media.
  8. Provide Title or Sub Title for the media.
  9. Select the type of media in the Presentation Type drop-down menu. There are 4 types of presentation available: Video, Podcast, Presentation, and Image Set.
    • Video: Video requires a Vimeo .mp4 file URL (e.g. https://player.vimeo.com/external/1234567890.hd.mp4?s=26028c4d09d66e83511109146c9ef720026cde30&profile_id=000) to work properly. 
    • Podcast: Podcast requires either .ogg or .mp3 file to work properly.
    • Presentation: Presentation requires slide from slideshare.net
    • Image Set: Image Set requires at least one image from the DAM to work.
  10. Provide URL to the media in the Link URL to the presentation field. Image Sets does not require a link url. User will be able to select images from the DAM. Each Presentation Type has its own specific requirement for the Link URL to the presentation.
    • For Video, the link should be Vimeo (e.g. https://player.vimeo.com/external/1234567890.hd.mp4?s=26028c4d09d66e83511109146c9ef720026cde30&profile_id=000). Click here to learn more how to obtain .mp4 link from Vimeo.
    • For Podcast, the link should be audio file for ogg/mp3. Click here to learn more about how to obtain an internal link to audio files in the DAM.
    • For Presentation, the link should be for slideshare (e.g. http://www.slideshare.net/username/slide-name) 
    • For Image Set, the link is not required. To add images, simply click on + icon below the link field.
  11. Repeat as needed. To add new gallery set, start from step 5, to add a new image to an Image Set, start from step 10. Please note that user can only add a maximum of 4 gallery sets.
  12. Click Done icon (check mark) to save your progress. This should close the configure panel and display the component as authored.

Troubleshooting

Where can I find out about recommended image size?
To find out more about the best image size for the Gallery component, please consult the Recommended Image Size page.

Known Bugs

A space character in the file name of the asset will cause the Gallery component to become uneditable and also render the page unreachable in the frontend. User should make sure the asset's filename does not contain any spacing. (eg. "TwoWords.mp3" instead of "Two Words.mp3", or "TwoWords.pdf" instead of "Two Words.pdf") If the Gallery component is already uneditable, user can attempt to fix the component by renaming the asset's filename in the DAM.