Child pages
  • Gallery Wireframes

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

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 (info) 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.

titleGallery Select Issues

Should we provide a directly link to the Resource Tool from this view?

The sorting operations don't make all that much sense. Should they be eliminated?

Currently, the Resource Tool allows mulple folders to be open at the same time. This relies on tool placement state and POST operations. The Gallery Tool could be coded to use GET operations, which would enable support for the browser back button. However, only one folder path could be open at a given time.

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.

titleThumbnail Issues

How many images across should we put in the table? Something in the four to six range seems optimal, given most screen sizes and the fact that the tool will be embedded as an iFrame in the Charon portal. Scaling may be irrelevant if the size of the iFrame is fixed in Sakai. If the frame size doesn't change with window sizing, then a fixed scale factor could be applied.

Table boxes could be decorated in a number of ways, if desired, bounding lines for example.

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.

titleImage View Issues

Showing image title on top and bottom may be reduntant.

Scaling of images is going to be a problem no matter what. The autoscaling feature is nice, but if the image doesn't match the aspect ration of your browser window, scroll bars may appear.

Sequencing links are below the image in this wireframe, as is typical for these sorts of things. However, depending on image scaling, these links may be pushed off of the visible screen. Should consider either moving them to the top of the image, or having them in two places (above and below).

Scaling may push description off the visible screen as well.