Santa Clara University

Commonspot Elements

Photo Album Element

The Photo Album element lets you easily display images uploaded to the Commonspot Image Gallery as a single-image slideshow or as a table of thumbnail images.  The images can be arranged in a specified numerical order, or arranged by the date the image was added to the Gallery.

Getting Started

This element makes use of the Image Gallery, along with a subsite's image folder and an index page for the Photo Album element.  To get started, you will need to:

• create a new subsite, or navigate to the subsite where you will be uploading images.
• from the Knowledge Maps (left) icon, select Image Gallery
• add images to the Image Gallery; they will be placed in the "images" directory in the current subsite
• add the Photo Album element to a page in the current subsite

Once the basic steps have been completed, a number of options will be available:

• you can display the images as a "slide show", or as a table of thumbnail images
• the display size of the image can be customized
• the style of the display table can be customized
• the display order (by date, or numerical order) can be changed, in ascending or descending order
• the number of columns in the thumbnail display table can be changed

Adding images to the Image Gallery

We'll use the Image Gallery's "description" and "keywords" properties to specify an image title, and a numerical order sequence.  Since there's just one field for the description, we will enter a descriptive title followed by a colon (":"), and the Photo Album element will pull that text out of the description and use it as a title for the image.  Here's what that would look like when entering the description:

To specify a numerical sequence for the display of the images, enter a number in the "keywords" field (this is optional; by default, images will be displayed in ascending order by the date added to the Image Gallery):

Default display settings 

Here's an example of a Photo Album element using the default display settings:

• count=1 (display one image at a time, as a slideshow)
• sequence=date (optionally can be sorted numerically, if this is provided as a keyword)
• order=ASC (use DESC for descending order)
• width= (if no value is provided, the image will be displayed in its actual size)
• tableclass=bluetable (optionally, all standard table classes can be used)
• columns=2 (if a "count" greater than 1 is specified, the images will be displayed in a two-column table. you can alter this value to any other value greater than 1)

Customizing the display

In the following example, a number of display options have been specified by supplying parameters for the element.

• count=3 (show 3 images at a time; optionally, you can specify "0" to display all images - the default setting is "1")
• width=140 (display "thumbnail" views of the images - 140 pixels wide)
• tableclass=tealtable
• sequence=number (provide a numerical sequence in the image's keyword property field)
• order=ASC (display images in ascending numerical order)
• columns=3 (the table of images will have three columns)