Photo Gallery

The components of the player, the file structure, the XML and HTML file, the setups, and the bug reporting tools will be explained in detail in this documentation.

Download the Photo Gallery Starter Kit

Photo Gallery – Page View

Preview of the Photo Gallery - Page View

  1. Gallery page title
  2. Gallery page description
  3. Image pop-over – shows details of the current image.
    Image pop-over will show up only on desktop/laptop web browsers when the mouse cursor is over the image thumbnail. On mobile devices, tap the image thumbnail to see the title and description of the image in full view.
  4. Image title
  5. A snippet of the image description
  6. The image thumbnail – click to show the full image.
  7. Start slideshow button – click to view the gallery as a slideshow from the first image.
  8. Client agent indicator – show what devices the photo gallery page is currently viewed on.

Photo Gallery – Full-size Image View

Preview of Photo Gallery - Full-size Image view

  1. The full image
  2. Close button – click to close the full image.
  3. Previous button – hover over this area and the previous button will show up. Click to go to the previous image.
    On mobile devices, tap once to show the button and tap again to go to the previous or next slide.
  4. Next button – hover over this area and the next button will show up. Click to go to the next image.
    On mobile devices, tap once to show the button and tap again to go to the previous or next slide.
  5. Image duration indicator – the duration of image before moving to the next slide.
    The image duration indicator will show up only in slideshow view.
  6. Start Slideshow / Stop button – if the slideshow is started, click to stop. If not, click to start slideshow from the current image.
  7. Image title
  8. Full image description

File Structure

File Structure Diagram

The “source folder” is centralized. Thus no need to worry about where it should go in the directory. An HTML file or the index page is required since the photo gallery will be hosted in D2L via an iFrame. However, in the directory root level, a folder named “assets” is required. In the “assets” folder, two (2) folders and an XML file are required. The two (2) folders inside the “assets” folder are named “thumbs” and “images.”

  • The XML file should be named “gallery.xml“.
  • thumbs” folder contains all of the photo thumbnail images.
  • images” folder contains all of the full resolution images.

The file structure follows the UWEX multimedia team’s standards and naming conventions. The file and folder names should always be in lowercase letters with no spaces.

XML File

The following is how the XML file should be set up.

On the Photo Gallery, there are five images per row, and the images are sequentially listed in the XML. The Photo Gallery can have as many rows as needed.

XML Nodes Breakdown

XML file declaration. This is the first line of code and required. No changes should be made to it.

Opening gallery node.

Setup Node

The setup tag has the following inner nodes: title, description, imgFormat, and slideDuration.

  • galleryTitle – holds the photo gallery page title.
  • galleryDescription – holds the photo gallery page description.
  • imgFormat – holds the thumbnail image and full resolution image file type or extension. File types accepted are GIF, JPG, and PNG. If it is not specified or left blank, it will defaulted to PNG, and the imgFormat node can be written as <imgFormat />.
  • slideDuration – holds duration (in seconds) of the slide before moving on to the next.

Image Node

The image node has the attribute of fileName. Inside the image node, there are two inner nodes: title and description.

  • fileName – holds the name of the thumbnail image file AND the full resolution image file. Thus, the thumbnail image and the full resolution image must be named the same.
  • title – holds the title of the image.
  • description – holds the description of the image.

NOTE The <![CDATA[ ... ]]> can be also be used in the title nodes if HTML elements are needed.

Make sure to close the gallery node when you are done listing video nodes.


The HTML file MUST be set up the way shown below.

Setup (or How to Use) Introduction

Follow the instructions below on how to set up and use the Photo Gallery.

It would be wise to have the thumbnail images and the full resolution image files or embed codes handy before moving on to the next step.

  1. Thumbnail image’s dimensions should be no less and no greater than 150 × 80 pixels.
  2. The full resolution image’s dimensions should be no less than 640 × 360.
  3. The full resolution image’s and thumbnail image’s name must be the same.
  4. Download a copy of the starter kit.
  5. Place the thumbnail images in the “thumbs” folder, which is inside the “assets” folder.
  6. Place the full resolution images in the “images” folder, which is also inside the “assets” folder.
  7. The XML file must be set up the way documented above and named “gallery.xml“.
  8. Place the XML file in the “assets” folder.
  9. The HTML file must be set up the way documented above and named “index.html“.
  10. Place the HTML file in same directory with the “assets” folder.

Upload the HTML file and assets folder to its respective folder on the mediastreamer.

Known Bugs

  • None at the moment; however, please clear your cache when experiencing any abnormal activities.

Bug Reporting

If any bugs are found in the Storybook player, please report them in Basecamp. Login to the website is required. Once logged in, please write a bug report under the Photo Gallery Bugs list, which is under the Bug Reporting (Media Tools and Players). When reporting a bug, please write the report as detailed and specifically as possible. If possible, include screen captures. Also note down the steps to reproduce the bug.

Version Log

Initial release.

Published on September 04, 2013 at 1:29:33 pm CDT. Last modified on June 06, 2018 at 3:55:46 pm CDT.