Matte: Theme HOWTO: Album View

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.

Woosh Browse Theme
An album in the Woosh browse view.

Sample album data model

The album data model includes the album the item is shared in (a <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 <m:metadata> elements).

Here is a sample of the album data model:

Woosh - Dissection

Here is a dissection of the Woosh album theme so you can see where the elements come from the Matte XML data model.

Woosh Album View
An album in the Woosh album view.

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:

  1. Page title: Woosh displays the album name and the album date as the page title.

  2. Album date: Albums can have a user-specifed date (the @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:

  3. Thumbnail navigation: here Woosh generates thumbnails for all the items in the album dynamically using JavaScript on the client's browser. To do this, it generates an array of data based on all the items available in the album. Matte provides an XSLT template that is useful for this purpose:

    The way Woosh calls this template is like this:

    Which generates JavaScript like this:

    In order to generate URLs to Matte resources, such as the thumbnail images, the JavaScript needs to know the server path it should use. Matte makes this available to themes, so Woosh generates some more JavaScript data to pass this to the client:

    Now the client has all the information it needs to dynamically generate the thumbnail images. The JavaScript (simplified here) looks like this:

    Here you can see Woosh is generating <img> elements for each item, setting the src attribute to the Matte /media.do URL for generating images. Woosh has hard-coded the media size to be a normal sized thumbnail.

  4. 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.

  5. 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.

    The updateImageInfo() method uses the Prototype Ajax.Updater class to call the detail URL and place the result into the page. The JavaScript looks like this:

    The @anonymous-key of the album being viewed and the @item-id of the item you want to view the details for are passed to the /viewMediaItemInfo.do URL (as the albumKey and itemId URL parameters, respectively).

Next: Detail View

Continue next with information on how the Detail View handles returning the detailed information for a single item.

SourceForge.net Logo