The Matte album view allows people to view the media items within a shared album. In many ways it is analogous to an album slide show. The primary purpose of the album view is to allow a user to view the media items within an album. Thus it must provide a way for the user to move between the items within the album in some way, and can also support showing detailed information about each item.
The album data model includes the album the item is shared in
<m:album> element). The album will have the items within the album
available (as child
<m:item> elements) but those items will not
have their detailed metadata elements available (i.e. they will not have
Here is a sample of the album data model:
Here is a dissection of the Woosh album theme so you can see where the elements come from the Matte XML data model.
The Woosh theme presents an album with all media items displayed as thumbnails in a scrolling widget at the top of the page (#3). Clicking on individual thumbnails loads a full-size version of that item in the center of the page (#4), and also displays detailed information about that item in another widget on the right side of the page. (#5) Let's take a look at the numbered items from this snippet in more detail:
Page title: Woosh displays the album name and the album date as the page title.
Album date: Albums can have a user-specifed date
@album-date attribute). If the album has been
modified, it will have a
@modify-date. An album will
always have a
@creation-date for the date it was
created. Knowing this, Woosh attempts to display the user-specified
album date. If the album does not have an album date, it looks
for the album's modification date. If it does not have a
modification date, it uses the album creation date.
The overall XSLT that generates the title (name and date) looks like this:
The way Woosh calls this template is like this:
Here you can see Woosh is generating <img> elements for each item,
src attribute to the Matte
URL for generating images. Woosh has hard-coded the media size to be a
normal sized thumbnail.
Full size image: The process of generating full-size images is similar to how the thumbnails images are generated. Woosh does it in this way (again, simplifed here):
Note the call to
updateImageInfo() at the
bottom. We discuss that next.
Image detail information: Matte themes can utilize another
URL for generating detailed information about a single media item.
The URL is
/viewMediaItemInfo.do and Woosh uses this
via an AJAX call to populate this information here.
updateImageInfo() method uses the Prototype
Ajax.Updater class to call the detail URL and place the
@anonymous-key of the album being viewed and
@item-id of the item you want to view the details for
are passed to the
/viewMediaItemInfo.do URL (as the
itemId URL parameters, respectively).
Continue next with information on how the Detail View handles returning the detailed information for a single item.