Gallery Wireframes

Four pages are being considered for the Gallery Tool:

1. Select Gallery
2. Gallery Metadata
3. Image Thumbnails
4. View Image (and sequence)

Recall that all gallery editing functions are presumed to take place using the Sakai Resource Tool. As such, no editing capabilities are provided in the Gallery Tool at this time.

A set of Image Tool wireframes predates this project.

Select Gallery

Two verisons of gallery selection are considered at this time: an array of collections with representative images, and a hierarchical file/folder view.

Pictoral Gallery Selection

Based on discussions with Daphne Ogle, a simpler approach to gallery selection is desired. The following view shows an array of gallery collections that all exist in a single, pre-defined site collection:

This view provides visual distinction between gallery selection from image selection using a folder tap graphic on top of each representative image. Note that this requires forcing the image into a fixed height and width, which distorts the picture. This is visible on close examination of the illustration above.

One problem with this approach is that some method is need to identify one image in the collection as the "representative view". A metadata page is proposed that would allow some information to be specified about the gallery, and to optionally identify an image as the representative image. The folder graphic has been modified to contain an information icon. Clicking on the folder graphic displays the Metadata Page, see below.

Hierarchical Gallery Selection

When the Gallery Tool is selected from the site page tabs, the user is presented with a modified file picker type operation:

The directory structure shown in this tool is the same as the Resource Tool, which will hopefully provide some navigational context moving between the tools. Users can drill down into collections by clicking on a folder icon that has a plus sign. Leaf collections will usually be where galleries exist, although gallery's may contain collections that are ignored during sequencing.

Clicking on a collection tool will show the Image Thumbnail view.

Some statistics are shown such as Created By, Modified Date, and number of images in the collection. An image is defined to be a resource of a type included in the image type set.

Gallery Information

Clicking on the tab graphic above a gallery displays the gallery information page:

Title is not editable in this version, but could be made so, easily. Both description and assignment are included as textarea editable fields. Note that the text area will scroll if text exceeds the space alotted. Representative image is selected from a drop down menu of images in this gallery, numbered using the current order. The representative image will default to the first image in the gallery if none is chosen. Access information is show, along with a URL that can be used to access the gallery directly.

This information is not as complete as the Resource Tool provides. Missing are collection copyright information (separate from particular images), search tagging (searching is out of scope), etc.

Image Thumbnails

Selecting a gallery displays it in thumbnail view:

The HTML in this view has been crafted to take advantage of the automatic image scaling feature of browsers such as FireFox. Images are dynamically to the space that is available to them. If the window is re-sized, the images will re-size as well. Note how images of different sizes and orientations are scaled to fit into the table.

Images are displayed in the order determined by the priority map of the resource collection, and numbered dynamically. Images (and title?) are clickable to view them full sized and to sequence them.

View Image

Selecting an image from its thumbnail show it full size:

Again, the size of this image will scale to fit the current size of the browser window.

Breadcrumbs have more detail in this wireframe. Similar detail could be added to the other views as well.

Besides showing the image full size (scaled to window), images can be sequences using the "Previous" and "Next" links. Again, by avoiding POST forms, the browser's back button should work better. Sequence number, image title, and description are shown at the bottom. The description is the field provided by the Resource Tool when adding a resource.