Matte: Theme HOWTO: Detail View

The Matte detail view allows people to view dettailed information about a single media items within a shared album. This can be used in themes to dynamically display information about the current media item being shown in an album view (for example via an AJAX request).

Sample detail data model

The detail data model includes the album the item is shared in (a <m:album> element) as well as the item requested (a <m:item> element). The item will have as much information as available populated so the detail view can render it as desired (i.e. they will have <m:metadata> elements populated).

Here is a sample of the detail data model:

view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <x:x-data xmlns:x="http://msqr.us/xsd/jaxb-web"  
  3.   xmlns:m="http://msqr.us/xsd/matte">  
  4.   <x:x-context>  
  5.     <x:server-name>localhost</x:server-name>  
  6.     <x:server-port>8080</x:server-port>  
  7.     <x:user-agent>Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US;  
  8.       rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4</x:user-agent>  
  9.     <x:user-locale>en_US</x:user-locale>  
  10.     <x:web-context>/matte</x:web-context>  
  11.     <x:path>/viewMediaItemInfo.do</x:path>  
  12.   </x:x-context>  
  13.   <x:x-auxillary>  
  14.     <x:x-param key="item.info.flag">true</x:x-param>  
  15.   </x:x-auxillary>  
  16.   <x:x-session>  
  17.     <m:session>  
  18.       <m:thumbnail-setting quality="GOOD" size="THUMB_NORMAL"/>  
  19.       <m:view-setting quality="GOOD" size="NORMAL"/>  
  20.     </m:session>  
  21.   </x:x-session>  
  22.   <x:x-request>  
  23.     <x:param key="themeId">1</x:param>  
  24.     <x:param key="itemId">32</x:param>  
  25.     <x:param key="albumKey">gVL9ZPlb2pW7MuntmQQwd7gSPuCA</x:param>  
  26.   </x:x-request>  
  27.   <x:x-request-headers>  
  28.     <x:param key="host">localhost</x:param>  
  29.     <x:param key="user-agent">Mozilla/5.0 (Macintosh; U; PPC Mac OS X  
  30.       Mach-O; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4</x:param>  
  31.     <x:param key="accept"  
  32.       >text/xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5</x:param>  
  33.     <x:param key="accept-language">en-us,en;q=0.5</x:param>  
  34.     <x:param key="accept-encoding">gzip,deflate</x:param>  
  35.     <x:param key="accept-charset">ISO-8859-1,utf-8;q=0.7,*;q=0.7</x:param>  
  36.     <x:param key="Keep-Alive">300</x:param>  
  37.     <x:param key="connection">keep-alive</x:param>  
  38.     <x:param key="Cache-Control">max-age=0</x:param>  
  39.     <x:param key="content-length">0</x:param>  
  40.   </x:x-request-headers>  
  41.   <x:x-model>  
  42.     <m:model>  
  43.       <m:album album-id="44" allow-anonymous="true" allow-browse="true"  
  44.         allow-feed="true" allow-original="true"  
  45.         anonymous-key="gVL9ZPlb2pW7MuntmQQwd7gSPuCA"  
  46.         creation-date="2007-02-15T17:32:06.829+13:00" name="4 months!"  
  47.         sort-mode="1">  
  48.         <m:owner access-level="0"  
  49.           anonymous-key="db35b2faa3ad4527e76be12fba4ceab1"  
  50.           country="US" creation-date="2006-12-17T12:10:50.123+13:00"  
  51.           email="matt@localhost" language="en" login="matt" name="Matt"  
  52.           password="{SHA}Mv+VCPQnH3dNmi0W7qXI9nQCI78=" quota="0"  
  53.           user-id="3">  
  54.           <m:tz code="Pacific/Auckland" name="Pacific/Auckland"  
  55.             offset="43200000" ordering="563"/>  
  56.         </m:owner>  
  57.         <m:theme author="Matte Development Team"  
  58.           author-email="matte@noplace" base-path="/core/woosh"  
  59.           creation-date="2006-12-17T12:06:38.387+13:00" name="Woosh"  
  60.           theme-id="1">  
  61.           <m:description>Default theme.</m:description>  
  62.         </m:theme>  
  63.         <m:item creation-date="2007-01-02T18:45:31+13:00"  
  64.           display-order="0" file-size="3531640" height="2336" hits="6"  
  65.           item-date="2007-01-02T18:45:31+13:00" item-id="32"  
  66.           mime="image/jpeg"  
  67.           name="Lillian having fun on the boucenette"  
  68.           path="4 months!/IMG_4525.JPG" use-icon="false" width="3504">  
  69.           <m:tz code="Pacific/Auckland" name="Pacific/Auckland"  
  70.             offset="43200000" ordering="563"/>  
  71.           <m:tz-display code="Pacific/Auckland"  
  72.             name="Pacific/Auckland" offset="43200000" ordering="563"/>  
  73.           <m:description>She's a pretty happy camper in this bouncy  
  74.             chair!</m:description>  
  75.         </m:item>  
  76.         <m:item creation-date="2007-01-09T14:41:27+13:00"  
  77.           display-order="0" file-size="3621531" height="3504" hits="0"  
  78.           item-id="46" mime="image/jpeg" name="Matt cradling Lillian"  
  79.           path="4 months!/IMG_4544.JPG" use-icon="false" width="2336">  
  80.           <m:tz code="Pacific/Auckland" name="Pacific/Auckland"  
  81.             offset="43200000" ordering="563"/>  
  82.           <m:tz-display code="Pacific/Auckland"  
  83.             name="Pacific/Auckland" offset="43200000" ordering="563"  
  84.           />  
  85.         </m:item>  
  86.       </m:album>  
  87.       <m:item creation-date="2007-01-02T18:45:31+13:00" display-order="0"  
  88.         file-size="3531640" height="2336" hits="6"  
  89.         item-date="2007-01-02T18:45:31+13:00" item-id="32"  
  90.         mime="image/jpeg" name="Lillian having fun on the boucenette"  
  91.         path="4 months!/IMG_4525.JPG" use-icon="false" width="3504">  
  92.         <m:tz code="Pacific/Auckland" name="Pacific/Auckland"  
  93.           offset="43200000" ordering="563"/>  
  94.         <m:tz-display code="Pacific/Auckland" name="Pacific/Auckland"  
  95.           offset="43200000" ordering="563"/>  
  96.         <m:description>She's a pretty happy camper in this bouncy chair!</m:description>  
  97.         <m:metadata key="APERTURE">5.3106995</m:metadata>  
  98.         <m:metadata key="CAMERA_MAKE">Canon</m:metadata>  
  99.         <m:metadata key="CAMERA_MODEL">Canon EOS 20D</m:metadata>  
  100.         <m:metadata key="EXPOSURE_BIAS">0</m:metadata>  
  101.         <m:metadata key="EXPOSURE_TIME">1/8</m:metadata>  
  102.         <m:metadata key="F_STOP">F6.3</m:metadata>  
  103.         <m:metadata key="FLASH">true</m:metadata>  
  104.         <m:metadata key="FOCAL_LENGTH">90.0</m:metadata>  
  105.         <m:metadata key="FOCAL_LENGTH_35MM_EQUIV">144</m:metadata>  
  106.         <m:metadata key="ORIENTATION">1</m:metadata>  
  107.         <m:metadata key="SHUTTER_SPEED">1/8</m:metadata>  
  108.         <m:user-rating creation-date="2007-07-20T17:29:06.068+12:00"  
  109.           rating="3" rating-id="1707">  
  110.           <m:rating-user access-level="0"  
  111.             anonymous-key="db35b2faa3ad4527e76be12fba4ceab1"  
  112.             country="US"  
  113.             creation-date="2006-12-17T12:10:50.123+13:00"  
  114.             email="matt@localhost" language="en" login="matt"  
  115.             name="Matt" password="{SHA}Mv+VCPQnH3dNmi0W7qXI9nQCI78="  
  116.             quota="0" user-id="3">  
  117.             <m:tz code="Pacific/Auckland" name="Pacific/Auckland"  
  118.               offset="43200000" ordering="563"/>  
  119.           </m:rating-user>  
  120.         </m:user-rating>  
  121.         <m:user-tag creation-date="2007-07-20T17:07:18.013+12:00"  
  122.           tag-id="1706">  
  123.           <m:tagging-user access-level="0"  
  124.             anonymous-key="db35b2faa3ad4527e76be12fba4ceab1"  
  125.             country="US"  
  126.             creation-date="2006-12-17T12:10:50.123+13:00"  
  127.             email="matt@localhost" language="en" login="matt"  
  128.             name="Matt" password="{SHA}Mv+VCPQnH3dNmi0W7qXI9nQCI78="  
  129.             quota="0" user-id="3">  
  130.             <m:tz code="Pacific/Auckland" name="Pacific/Auckland"  
  131.               offset="43200000" ordering="563"/>  
  132.           </m:tagging-user>  
  133.           <m:tag>Lillian</m:tag>  
  134.         </m:user-tag>  
  135.       </m:item>  
  136.       <m:theme author="Matte Development Team"  
  137.         author-email="matte@noplace" base-path="/core/woosh"  
  138.         creation-date="2006-12-17T12:06:38.387+13:00" name="Woosh"  
  139.         theme-id="1">  
  140.         <m:description>Default theme.</m:description>  
  141.       </m:theme>  
  142.     </m:model>  
  143.   </x:x-model>  
  144. </x:x-data>  

Woosh - Dissection

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

Woosh Detail View
The Woosh detail view.

The Woosh theme presents the media item detail view with information about the selected item as well as some links to other URLs for performing some other actions, like downloading the media item or downloading the entire album.

  1. Item name: here the item's name is displayed, with XSLT like this:

    view plaincopy to clipboardprint?
    1. <xsl:template match="m:model" mode="meta">  
    2.     <xsl:variable name="meta-item" select="m:item[1]"/>  
    3.     <h2 id="ii-imageTitle">  
    4.         <xsl:choose>  
    5.             <xsl:when test="$meta-item/@name">  
    6.                 <xsl:value-of select="$meta-item/@name"/>  
    7.             </xsl:when>  
    8.             <xsl:otherwise>  
    9.                 <xsl:value-of select="$meta-item/@path"/>  
    10.             </xsl:otherwise>  
    11.         </xsl:choose>  
    12.     </h2>  
    13. </xsl:template>  

  2. Item date: here the item's date is displayed. If the current user is anonymous, or logged in but with a different time zone set in the Matte user profile, the item's time zone is also displayed.

    view plaincopy to clipboardprint?
    1. <div id="ii-imageDate">  
    2.     <xsl:choose>  
    3.         <xsl:when test="string-length($meta-item/@item-date) >= 19">  
    4.             <xsl:value-of select="date:format-date(substring($meta-item/@item-date, 1, 19),   
    5.                 'd MMM yyyy H:mm')"/>  
    6.         </xsl:when>  
    7.         <xsl:otherwise>  
    8.             <xsl:value-of select="date:format-date(substring($meta-item/@creation-date, 1, 19),   
    9.                 'd MMM yyyy H:mm')"/>  
    10.         </xsl:otherwise>  
    11.     </xsl:choose>  
    12.     <xsl:if test="(not($acting-user/m:tz/@code = $meta-item/m:tz/@code))  
    13.         or not($meta-item/m:tz-display and $acting-user/m:tz/@code = $meta-item/m:tz-display/@code)">  
    14.         <!-- Display the TZ, as it is different from the user's time zone -->  
    15.         <xsl:text> (</xsl:text>  
    16.         <xsl:choose>  
    17.             <xsl:when test="$meta-item/m:tz-display">  
    18.                 <xsl:value-of select="$meta-item/m:tz-display/@name"/>  
    19.             </xsl:when>  
    20.             <xsl:otherwise>  
    21.                 <xsl:value-of select="$meta-item/m:tz/@name"/>  
    22.             </xsl:otherwise>  
    23.         </xsl:choose>  
    24.         <xsl:text>)</xsl:text>  
    25.     </xsl:if>  
    26. </div>  

    Which renders HTML like this:

    view plaincopy to clipboardprint?
    1. <div id="ii-imageDate">2 Jan 2007 18:45 (Pacific/Auckland)</div>  

  3. Comment: next comes the item's comments, stored in the item's <m:description> element. The comments are a free text field entered by the owner of the item. Woosh renders it like this:

    view plaincopy to clipboardprint?
    1. <xsl:value-of select="$meta-item/m:description"/>  

  4. Metadata: next comes a select list of the available item metadata. This metadata is extracted from the items when it is added to Matte, using the sMeta library. Any metadata sMeta is able to extract is stored as <m:metadata> elements within the item. Typically this includes EXIF information from digital photos and ID3 information from MP3 files.

    Our example here is for a photograph. The metadata available from this item is:

    view plaincopy to clipboardprint?
    1. <m:metadata key="APERTURE">5.3106995</m:metadata>  
    2. <m:metadata key="CAMERA_MAKE">Canon</m:metadata>  
    3. <m:metadata key="CAMERA_MODEL">Canon EOS 20D</m:metadata>  
    4. <m:metadata key="EXPOSURE_BIAS">0</m:metadata>  
    5. <m:metadata key="EXPOSURE_TIME">1/8</m:metadata>  
    6. <m:metadata key="F_STOP">F6.3</m:metadata>  
    7. <m:metadata key="FLASH">true</m:metadata>  
    8. <m:metadata key="FOCAL_LENGTH">90.0</m:metadata>  
    9. <m:metadata key="FOCAL_LENGTH_35MM_EQUIV">144</m:metadata>  
    10. <m:metadata key="ORIENTATION">1</m:metadata>  
    11. <m:metadata key="SHUTTER_SPEED">1/8</m:metadata>  

    Most of the metadata keys are self-explainatory. The Woosh theme looks for specific ones to display for photographs: the shutter speed, f-stop, focal length, and camera model. It uses a simple trick in the XSLT to render different metadata for different media types, based on the item's MIME type, which is available in the @mime attribute of each item: if the MIME type starts with image, it renders these specific types.

    view plaincopy to clipboardprint?
    1. <xsl:template match="m:item[starts-with(@mime,'image')]" mode="extra-extra-info">  
    2.     <xsl:choose>  
    3.         <xsl:when test="key('item-meta','EXPOSURE_TIME')">  
    4.             <span class="ii-attribute">Shutter: </span>  
    5.             <xsl:value-of select="key('item-meta','EXPOSURE_TIME')"/>  
    6.             <xsl:text>s</xsl:text>  
    7.             <br />  
    8.         </xsl:when>  
    9.         <xsl:when test="key('item-meta','SHUTTER_SPEED')">  
    10.             <span class="ii-attribute">Shutter: </span>  
    11.             <xsl:value-of select="key('item-meta','SHUTTER_SPEED')"/>  
    12.             <br />  
    13.         </xsl:when>  
    14.     </xsl:choose>  
    15.     <xsl:if test="key('item-meta','F_STOP')">  
    16.         <span class="ii-attribute">F-Stop: </span>  
    17.         <xsl:value-of select="key('item-meta','F_STOP')"/>  
    18.         <br />  
    19.     </xsl:if>  
    20.     <xsl:if test="key('item-meta','FOCAL_LENGTH')">  
    21.         <span class="ii-attribute">Focal length: </span>  
    22.         <xsl:value-of select="key('item-meta','FOCAL_LENGTH')"/>  
    23.         <xsl:text>mm</xsl:text>  
    24.         <xsl:if test="key('item-meta','FOCAL_LENGTH_35MM_EQUIV')">  
    25.             <xsl:text> (</xsl:text>  
    26.             <xsl:value-of select="key('item-meta','FOCAL_LENGTH_35MM_EQUIV')"/>  
    27.             <xsl:text> @ 35mm)</xsl:text>  
    28.         </xsl:if>  
    29.         <br />  
    30.     </xsl:if>  
    31.     <xsl:if test="m:metadata[@key='CAMERA_MODEL']">  
    32.         <span class="ii-attribute">Camera: </span>  
    33.         <xsl:value-of select="m:metadata[@key='CAMERA_MODEL']"/>  
    34.         <br />  
    35.     </xsl:if>  
    36.     <!--  The following are not m:metadata elements, but we display them here -->  
    37.     <span class="ii-attribute">File: </span><xsl:value-of select="@path"/><br />  
    38.     <xsl:if test="@width > 0">  
    39.         <span class="ii-attribute">Original size: </span>  
    40.         <xsl:value-of select="@width"/>  
    41.         <xsl:text> x </xsl:text>  
    42.         <xsl:value-of select="@height"/>  
    43.         <br />  
    44.     </xsl:if>  
    45. </xsl:template>  

    Note the last two items are not really metadata elements, in the data model at least. The File listing is simply the item's @path attribute, which is the path to the file in the Matte server's filesystem. The Original size listing are the @width and @height attributes of the item. All of this renders HTML like the following:

    view plaincopy to clipboardprint?
    1. <span class="ii-attribute">Shutter: </span>1/8s<br/>  
    2. <span class="ii-attribute">F-Stop: </span>F6.3<br/>  
    3. <span class="ii-attribute">Focal length: </span>90.0mm (144 @ 35mm)<br/>  
    4. <span class="ii-attribute">Camera: </span>Canon EOS 20D<br/>  
    5. <span class="ii-attribute">File: </span>4 months!/IMG_4525.JPG<br/>  
    6. <span class="ii-attribute">Original size: </span>3504 x 2336<br/>  

    Woosh also has similar XSLT templates for audio media items and video media items:

    view plaincopy to clipboardprint?
    1. <xsl:template match="m:item[starts-with(@mime,'audio')]" mode="extra-extra-info">  
    2.     <xsl:if test="m:metadata[@key='SONG_NAME']">  
    3.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.audio.songName')"/>: </span>  
    4.         <xsl:value-of select="m:metadata[@key='SONG_NAME']"/>  
    5.         <br />  
    6.     </xsl:if>  
    7.     <xsl:if test="m:metadata[@key='ARTIST']">  
    8.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.audio.artist')"/>: </span>  
    9.         <xsl:value-of select="m:metadata[@key='ARTIST']"/>  
    10.         <br />  
    11.     </xsl:if>  
    12.     <xsl:if test="m:metadata[@key='ALBUM']">  
    13.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.audio.album')"/>: </span>  
    14.         <xsl:value-of select="m:metadata[@key='ALBUM']"/>  
    15.         <br />  
    16.     </xsl:if>  
    17.     <xsl:if test="m:metadata[@key='TRACK_NUM']">  
    18.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.audio.track')"/>: </span>  
    19.         <xsl:value-of select="m:metadata[@key='TRACK_NUM']"/>  
    20.         <xsl:if test="m:metadata[@key='TRACK_TOTAL']">  
    21.             <xsl:text> </xsl:text>  
    22.             <xsl:value-of select="key('i18n','meta.of')"/>  
    23.             <xsl:text> </xsl:text>  
    24.             <xsl:value-of select="m:metadata[@key='TRACK_TOTAL']"/>  
    25.         </xsl:if>  
    26.         <br />  
    27.     </xsl:if>  
    28.     <xsl:if test="m:metadata[@key='GENRE']">  
    29.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.audio.genre')"/>: </span>  
    30.         <xsl:call-template name="render-id3-genre">  
    31.             <xsl:with-param name="genre" select="string(m:metadata[@key='GENRE'])"/>  
    32.         </xsl:call-template>  
    33.         <br />  
    34.     </xsl:if>  
    35.     <xsl:if test="m:metadata[@key='AUDIO_FORMAT']">  
    36.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.audio.format')"/>: </span>  
    37.         <xsl:value-of select="m:metadata[@key='AUDIO_FORMAT']"/>  
    38.         <br />  
    39.     </xsl:if>  
    40.     <xsl:if test="m:metadata[@key='BIT_RATE']">  
    41.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.audio.bitRate')"/>: </span>  
    42.         <xsl:value-of select="m:metadata[@key='BIT_RATE']"/>  
    43.         <br />  
    44.     </xsl:if>  
    45.     <xsl:if test="m:metadata[@key='SAMPLE_RATE']">  
    46.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.audio.sampleRate')"/>: </span>  
    47.         <xsl:value-of select="m:metadata[@key='SAMPLE_RATE']"/>  
    48.         <br />  
    49.     </xsl:if>  
    50. </xsl:template>  
    51.   
    52. <xsl:template match="m:item[starts-with(@mime,'video')]" mode="extra-extra-info">  
    53.     <xsl:if test="m:metadata[@key='DURATION_TIME']">  
    54.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.video.duration')"/>: </span>  
    55.         <xsl:value-of select="m:metadata[@key='DURATION_TIME']"/>  
    56.         <br />  
    57.     </xsl:if>  
    58.     <xsl:if test="@width > 0 and @height > 0">  
    59.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.dimensions')"/>: </span>  
    60.         <xsl:value-of select="@width"/>  
    61.         <xsl:text> x </xsl:text>  
    62.         <xsl:value-of select="@height"/>  
    63.         <br />  
    64.     </xsl:if>  
    65.     <xsl:if test="m:metadata[@key='FPS']">  
    66.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.video.fps')"/>: </span>  
    67.         <xsl:value-of select="format-number(m:metadata[@key='FPS'],'#0.#')"/>  
    68.         <br />  
    69.     </xsl:if>  
    70.     <xsl:if test="m:metadata[@key='VIDEO_FORMAT']">  
    71.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.video.format')"/>: </span>  
    72.         <xsl:value-of select="m:metadata[@key='VIDEO_FORMAT']"/>  
    73.         <br />  
    74.     </xsl:if>  
    75.     <xsl:if test="m:metadata[@key='AUDIO_FORMAT']">  
    76.         <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.audio.format')"/>: </span>  
    77.         <xsl:value-of select="m:metadata[@key='AUDIO_FORMAT']"/>  
    78.         <br />  
    79.     </xsl:if>  
    80.     <xsl:if test="not(m:metadata[@key='VIDEO_FORMAT'] or m:metadata[@key='AUDIO_FORMAT'])">  
    81.         <span class="ii-attribute"><xsl:value-of select="key('i18n','mime.displayName')"/>: </span>  
    82.         <xsl:value-of select="@mime"/>  
    83.         <br />  
    84.     </xsl:if>  
    85. </xsl:template>  

  5. File path, item dimensions: these are covered in the previous discussion on metadata, but hilighted here to remind us that they are not strictly metadata elements, but attributes of the <m:item> element.

  6. Tags: media items can be tagged with keywords. They are available on items as <m:user-tag> elements. The element has the date the tag was created, the user who created the tag, and the tags, as a comma-delimited list. The XML looks like this:

    view plaincopy to clipboardprint?
    1. <m:user-tag creation-date="2007-07-20T17:07:18.013+12:00"  
    2.   tag-id="1706">  
    3.   <m:tagging-user access-level="0"  
    4.     anonymous-key="db35b2faa3ad4527e76be12fba4ceab1"  
    5.     country="US" creation-date="2006-12-17T12:10:50.123+13:00"  
    6.     email="matt@localhost" language="en" login="matt"  
    7.     name="Matt" password="{SHA}Mv+VCPQnH3dNmi0W7qXI9nQCI78="  
    8.     quota="0" user-id="3">  
    9.     <m:tz code="Pacific/Auckland" name="Pacific/Auckland"  
    10.       offset="43200000" ordering="563"/>  
    11.   </m:tagging-user>  
    12.   <m:tag>Lillian</m:tag>  
    13. </m:user-tag>  

    Woosh renders all available tags as a single list, like this:

    view plaincopy to clipboardprint?
    1. <xsl:if test="m:user-tag">  
    2.     <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.tags')"/>: </span>  
    3.     <xsl:for-each select="m:user-tag">  
    4.         <xsl:if test="position() > 1">  
    5.             <xsl:text>, </xsl:text>  
    6.         </xsl:if>  
    7.         <xsl:value-of select="m:tag"/>  
    8.     </xsl:for-each>  
    9.     <br/>  
    10. </xsl:if>  

  7. Hits: the number of times each media item is viewed, the "hit" counter for that item is incremented. The current count is available as the @hits attribute of the item. Woosh displays the hit count, making use of several message bundle keys to display the appropriate message based on how many hits there are:

    view plaincopy to clipboardprint?
    1. <span class="ii-attribute"><xsl:value-of select="key('i18n','meta.hits')"/>: </span>  
    2. <xsl:choose>  
    3.     <xsl:when test="@hits > 0">  
    4.         <xsl:value-of select="@hits"/>  
    5.         <xsl:text> </xsl:text>  
    6.         <xsl:choose>  
    7.             <xsl:when test="@hits > 1">  
    8.                 <xsl:value-of select="key('i18n','meta.hits.times')"/>  
    9.             </xsl:when>  
    10.             <xsl:otherwise>  
    11.                 <xsl:value-of select="key('i18n','meta.hits.time')"/>  
    12.             </xsl:otherwise>  
    13.         </xsl:choose>  
    14.     </xsl:when>  
    15.     <xsl:otherwise>  
    16.         <xsl:value-of select="key('i18n','meta.hits.never')"/>  
    17.     </xsl:otherwise>  
    18. </xsl:choose>  

    All of this will render one of

    1. Viewed: never
    2. Viewed: 1 time
    3. Viewed: x times

    The rendered HTML looks like:

    view plaincopy to clipboardprint?
    1. <span class="ii-attribute">Viewed: </span> 7 times<br/>  

  8. Download item: the Matte /media.do URL for rendering media items can also be used to allow users to download the item to their computer. You can download the item scaled to the current view settings just by calling the render-media-server-url XSLT template with a download parameter set to true.

    Woosh only shows a link to download the current view size item if the item is an image, because in most other cases Matte probably does not know how to scale the item to different sizes. The XSLT looks like this:

    view plaincopy to clipboardprint?
    1. <!-- if MIME is an image, MediaServer can scale for download... -->  
    2. <xsl:if test="starts-with($meta-item/@mime,'image')">  
    3.     <li>  
    4.         <a title="{key('i18n','action.download.title')}">  
    5.             <xsl:attribute name="href">  
    6.                 <xsl:call-template name="render-media-server-url">  
    7.                     <xsl:with-param name="item" select="$meta-item"/>  
    8.                     <xsl:with-param name="album-key" select="m:album[1]/@anonymous-key"/>  
    9.                     <xsl:with-param name="size" select="$single-size"/>  
    10.                     <xsl:with-param name="quality" select="$single-quality"/>  
    11.                     <xsl:with-param name="download" select="true()"/>  
    12.                     <xsl:with-param name="web-context" select="$web-context"/>  
    13.                 </xsl:call-template>  
    14.             </xsl:attribute>  
    15.             <xsl:value-of select="key('i18n','action.download')"/>  
    16.             <xsl:text> </xsl:text>  
    17.             <xsl:value-of select="$meta-item-type-name"/>  
    18.         </a>  
    19.     </li>  
    20. </xsl:if>  

    Here you can see on line 11 Woosh is passing true() as the download parameter. This will cause Matte to return the media item at the requested size, but with an additional HTTP header that triggers most browsers to prompt the user to save the response to a file, named the original media item's file name.

    There is an attribute present in <m:album> elements called @allow-original that, when true, signifies the owner of the album does allow other users to download the original version of the media item (i.e. not re-sized or re-compressed, just the original file that was uploaded into Matte). To download the original of any item, the render-media-server-url accepts another parameter, original, that you should pass a value of true to in order to download the original media file.

    In Woosh, the XSLT looks like this:

    view plaincopy to clipboardprint?
    1. <xsl:if test="m:album[1]/@allow-original = 'true'">  
    2.     <li>  
    3.         <a title="{key('i18n','action.download.original.title')}">  
    4.             <xsl:attribute name="href">  
    5.                 <xsl:call-template name="render-media-server-url">  
    6.                     <xsl:with-param name="item" select="$meta-item"/>  
    7.                     <xsl:with-param name="album-key" select="m:album[1]/@anonymous-key"/>  
    8.                     <xsl:with-param name="download" select="true()"/>  
    9.                     <xsl:with-param name="original" select="true()"/>  
    10.                     <xsl:with-param name="web-context" select="$web-context"/>  
    11.                 </xsl:call-template>  
    12.             </xsl:attribute>  
    13.             <xsl:value-of select="key('i18n','action.download.original')"/>  
    14.             <xsl:text> </xsl:text>  
    15.             <xsl:value-of select="$meta-item-type-name"/>  
    16.         </a>   
    17.         <xsl:text> (</xsl:text>  
    18.         <xsl:call-template name="render-file-size">  
    19.             <xsl:with-param name="size" select="$meta-item/@file-size"/>  
    20.         </xsl:call-template>  
    21.         <xsl:text>)</xsl:text>  
    22.     </li>  
    23. </xsl:if>  

    Notice here on lines 8 and 9, both download and original are set to true(). Also notice there is no need to pass the size or quality parameters, as these are not needed when downloading the original item file. Finally, notice the last few lines call a template called render-file-size. That will be discussed in the next point.

    The final HTML rendered by Woosh looks like this:

    view plaincopy to clipboardprint?
    1. <li>  
    2.     <a title="Download this image at the current size you are viewing it at."   
    3.         href="/matte/media.do?id=32&albumKey=gVL9ZPlb2pW7MuntmQQwd7gSPuCA&size=NORMAL&quality=GOOD&download=true">  
    4.         Download current size image  
    5.     </a>  
    6. </li>  
    7. <li>  
    8.     <a title="Download the original image"   
    9.         href="/matte/media.do?id=32&albumKey=gVL9ZPlb2pW7MuntmQQwd7gSPuCA&original=true&download=true">  
    10.         Download original image  
    11.     </a>   
    12.     (3.37 MB)  
    13. </li>  

  9. File size: the size of the original media item, in bytes, is available on <m:item> elements as the @file-size attribute. Woosh displays this in a friendly way, using kilobytes or megabytes, by using the render-file-size template that is available in Matte:

    view plaincopy to clipboardprint?
    1. <!--  
    2.     Named Template: render-file-size  
    3.       
    4.     Generate text representation of the size of a file. For example:  
    5.       
    6.     render-file-size(size = 14875) => 14.53 KB  
    7.       
    8.     Parameters:  
    9.     size - an integer, assumed to be the number of bytes of the file  
    10. -->  
    11. <xsl:template name="render-file-size">  
    12.     <xsl:param name="size"/>  
    13.     <xsl:choose>  
    14.         <xsl:when test="$size > 1048576">  
    15.             <xsl:value-of select="format-number($size div 1048576,'#,##0.##')"/>  
    16.             <xsl:text> MB</xsl:text>  
    17.         </xsl:when>  
    18.         <xsl:when test="$size > 1024">  
    19.             <xsl:value-of select="format-number($size div 1024,'#,##0.##')"/>  
    20.             <xsl:text> KB</xsl:text>  
    21.         </xsl:when>  
    22.         <xsl:otherwise>  
    23.             <xsl:value-of select="format-number($size div 1024,'#,##0')"/>  
    24.             <xsl:text> bytes</xsl:text>  
    25.         </xsl:otherwise>  
    26.     </xsl:choose>  
    27. </xsl:template>  

  10. Download album: Matte provides another URL for downloading all the media items within an album, combined into a single zip archive. This is useful in themes for providing a link to download an album currently being viewed. The URL for downloading an album supports either downloading the items based on the current view settings or the original files.

    Woosh prsents two links to users for downloading the album, one for the album with items sized to the current view settings, and one for downloading the original files. The XSLT looks like this:

    view plaincopy to clipboardprint?
    1. <li class="sep">  
    2.     <a title="{key('i18n','action.download.album.title')}">  
    3.         <xsl:attribute name="href">  
    4.             <xsl:call-template name="render-download-album-url">  
    5.                 <xsl:with-param name="album-key" select="m:album[1]/@anonymous-key"/>  
    6.                 <xsl:with-param name="original" select="false()"/>  
    7.                 <xsl:with-param name="web-context" select="$web-context"/>  
    8.             </xsl:call-template>  
    9.         </xsl:attribute>  
    10.         <xsl:value-of select="key('i18n','action.download.album')"/>  
    11.     </a>  
    12. </li>  
    13. <xsl:if test="m:album[1]/@allow-original = 'true'">  
    14.     <li>  
    15.         <a title="{key('i18n','action.download.album.original.title')}">  
    16.             <xsl:attribute name="href">  
    17.                 <xsl:call-template name="render-download-album-url">  
    18.                     <xsl:with-param name="album-key" select="m:album[1]/@anonymous-key"/>  
    19.                     <xsl:with-param name="original" select="true()"/>  
    20.                     <xsl:with-param name="web-context" select="$web-context"/>  
    21.                 </xsl:call-template>  
    22.             </xsl:attribute>  
    23.             <xsl:value-of select="key('i18n','action.download.album.original')"/>  
    24.         </a>   
    25.     </li>  
    26. </xsl:if>  

    This renders HTML like this:

    view plaincopy to clipboardprint?
    1. <li class="sep">  
    2.     <a title="Download all the items in this album as a zip archive, with the items sized..."   
    3.         href="/matte/downloadAlbum.do?albumKey=gVL9ZPlb2pW7MuntmQQwd7gSPuCA">  
    4.         Download album (current size items)  
    5.     </a>  
    6. </li>  
    7. <li>  
    8.     <a title="Download all the original items in this album as a zip archive (can be quite large)."   
    9.         href="/matte/downloadAlbum.do?albumKey=gVL9ZPlb2pW7MuntmQQwd7gSPuCA&original=true">  
    10.         Download album (originals)  
    11.     </a>  
    12. </li>  

  11. Ratings: Users can rate media items on a scale from 1 to 5. They are stored as <m:user-rating> elements within the item. The user who set the rating is available as a child <rating-user> element (which is a normal Matte <m:user> object). The rating value is stored as the @rating attribute:

    view plaincopy to clipboardprint?
    1. <m:user-rating creation-date="2007-07-20T17:29:06.068+12:00"  
    2.   rating="3" rating-id="1707">  
    3.   <m:rating-user access-level="0"  
    4.     anonymous-key="db35b2faa3ad4527e76be12fba4ceab1"  
    5.     country="US"  
    6.     creation-date="2006-12-17T12:10:50.123+13:00"  
    7.     email="matt@localhost" language="en" login="matt"  
    8.     name="Matt" password="{SHA}Mv+VCPQnH3dNmi0W7qXI9nQCI78="  
    9.     quota="0" user-id="3">  
    10.     <m:tz code="Pacific/Auckland" name="Pacific/Auckland"  
    11.       offset="43200000" ordering="563"/>  
    12.   </m:rating-user>  
    13. </m:user-rating>  

    Woosh displays all available user ratings, using the following XSLT:

    view plaincopy to clipboardprint?
    1. <xsl:if test="$meta-item/m:user-rating">  
    2.     <div id="ii-ratings">  
    3.         <h3>User Ratings</h3>  
    4.         <xsl:apply-templates select="$meta-item/m:user-rating" mode="meta"/>  
    5.         <xsl:variable name="num-ratings" select="count($meta-item/m:user-rating)"/>  
    6.         <xsl:if test="$num-ratings > 1">  
    7.             <div class="sep"></div>  
    8.               
    9.             <span class="ii-attribute">  
    10.                 <xsl:text>Average (from </xsl:text>  
    11.                 <xsl:value-of select="$num-ratings"/>  
    12.                 <xsl:text> ratings): </xsl:text>  
    13.             </span>  
    14.             <xsl:value-of select="format-number(  
    15.                 sum($meta-item/m:user-rating/@rating) div $num-ratings, '0.#')"/>  
    16.             <br />  
    17.         </xsl:if>  
    18.     </div>  
    19. </xsl:if>  
    20.   
    21. <!--  follwed by later... -->  
    22. <xsl:template match="m:user-rating" mode="meta">  
    23.     <span class="ii-attribute">  
    24.         <xsl:choose>  
    25.             <xsl:when test="m:rating-user">  
    26.                 <xsl:value-of select="m:rating-user/@name"/>  
    27.             </xsl:when>  
    28.             <xsl:otherwise>  
    29.                 <xsl:text>Anonymous user</xsl:text>  
    30.             </xsl:otherwise>  
    31.         </xsl:choose>  
    32.     </span>  
    33.     <xsl:text>: </xsl:text>  
    34.     <xsl:value-of select="@rating"/>  
    35.     <em>  
    36.         <xsl:text> (</xsl:text>  
    37.         <xsl:value-of select="date:format-date(substring(@creation-date,1,19),'d MMM yyyy, h:mm a')"/>  
    38.         <xsl:text>)</xsl:text>  
    39.     </em>  
    40.     <br />  
    41. </xsl:template>  

    Woosh calculates the average user rating, if there are more than one available, followed by the actual user ratings.

SourceForge.net Logo