Display images in a query using query-styling

Objective

This article is about displaying a query-based table of images within a daisy installation for the visual selection of pictures.

Background

Once daisy is accepted by those working with it (in our case a company using it for background info and end-user documentation), a lot of pictures get uploaded ("a pictures makes up for a thousand words"). Even when there are naming-conventions, the picture's names usually only make sense to those who uploaded them.

Since re-using a picture in several pages does not only make sense, but is the only way for easing the exchange of e.g. a company logo easily across all documents, we encountered the need to be able to query for all pictures in the system including their thumbnail to have a visual choice of pictures..

The problem is that pictures cannot be displayed within a query using a standard daisy installation. Luckily the query may be "styled" manually.

The following day-to-day notation is what this document aims to do:

select name, link, image_thumbnail from my_daisy

i.e. Select all names, links and the image thumbnail from a daisy installation and display them as a table.

Credits:
Info, code and ideas for this document provided by Júlio, Karel and Paul on daisy's mailing list.

How it's done

Since daisy does not support querying for pictures, the trick is to add an option to the query with a style hint that is picked up by daisy and results in the display of the pictures rather than only the name and link of the picture.

Since daisy automatically generates a preview and a thumbnail from every picture added to the system, one of these want to be displayed.

The file handled is the one sitting in daisy's default template:

PATH_TO_DAISY/daisywiki/webapp/daisy/resources/skins/default/query-styling/query-styling-html.xsl 

Copy this to your skin (create the folder, if not there):

PATH_TO_YOUR_SKIN/query-styling/

You will find the style-hint "bullets" already defined, we will add the the two query styles

• image-preview
• image-thumbnail

Adding the Code

Before you start adding the code, find out which partIDs your thumbnails and previews have in you system.

Finding the Part Type of the Preview and the Thumbnail

You will need to hard-code the partIDs for your preview and thumbnail pictures. Go to your administration page, choose Part Types and note the IDs for the image preview and its thumbnail. In our case:

12	ImagePreview	false	view/edit | delete
11	ImageThumbnail	false	view/edit | delete

This should apply all systems that have not been tweeked.

Code to add to query-styling-html.xsl

Júlio came up with the idea of using the same template for previews and thumbnails (a bit smaller and faster to load than previews.)
Therefore two templates are added that simply set some variables and then call the template that sorts out the rest.
This is it:

<!--image-preview-->

<xsl:template match="d:searchResult[@styleHint='image-preview']">
  <xsl:call-template name="tabular-results-with-image">
    <xsl:with-param name="partId" select="12"/>
    <xsl:with-param name="imageTitle" select="'Preview'"/>
  </xsl:call-template>
</xsl:template>


<!--image-thumbnail-->
<xsl:template match="d:searchResult[@styleHint='image-thumbnail']">
  <xsl:call-template name="tabular-results-with-image">
    <xsl:with-param name="partId" select="11"/>
    <xsl:with-param name="imageTitle" select="'Thumbnail'"/>
  </xsl:call-template>
</xsl:template>

<!--used by image-thumbnail and image-preview-->
<xsl:template name="tabular-results-with-image">
  <xsl:param name="partId"/>
  <xsl:param name="imageTitle"/>
  <table class="default">
    <!--table header-->
      <tr>
        <th><xsl:value-of select="$imageTitle"/></th>
        <xsl:for-each select="d:titles/d:title">
          <th><xsl:value-of select="."/></th>
        </xsl:for-each>
        <th><i18n:text key="searchresult.actions"/></th>
      </tr>

    <!--table body-->
    <xsl:for-each select="d:rows/d:row">
      <tr>
        <xsl:variable name="hrefSuffix">
          <xsl:if test="@branchId != $siteBranchId or @languageId !=$siteLanguageId">
            <xsl:value-of select="concat('?branch=', @branchId, '&amp;language=', @languageId)"/>
          </xsl:if>
        </xsl:variable>
        <!--image-->
          <td>
            <img src="{@documentId}/version/last/part/{$partId}/data{$hrefSuffix}"/>
          </td>
        <!--other fields-->
        <xsl:for-each select="d:value|d:xmlValue|d:multiValue|d:linkValue|d:hierarchyValue"> 
          <td>
            <xsl:apply-templates select="."/> 
          </td>
        </xsl:for-each>
        <!--action link-->
        <td><a href="{$searchResultBasePath}{@documentId}.html{$hrefSuffix}"><i18n:text key="searchresult.action-show"/></a></td>
      </tr>
    </xsl:for-each>
  </table>
</xsl:template>

If you want to use the "i18n" tags, you will need to tell daisy what to do with them, by adding the following code at the top section of the xsl file (right under xmlns:d="http://outerx.org/daisy/1.0").

xmlns:i18n="http://apache.org/coccon/i18n/2.1"

If you want to change the order, eg. have the thumbnail at the end of the table, you simply take the image part and put it at the end.

Making your changes visible to Daisy

Daisy won't automatically notice changes to documents inside the <skin>/query-styling directory, so one way of letting Daisy know you've changed the query styling is:

1. Make sure you have a <skin>/searchresult.xsl file. If you haven't created one for your skin, copy the default searchresult.xsl file from daisy-<X.Y>/daisywiki/webapp/daisy/resources/xslt
2. Change the searchresult.xsl file. All you need is to change the file's timestamp, and Daisy will pick up the changes to all files inside /query-styling. You can type the command touch searchresult.xsl in your Daisy server's Un*x shell, or re-upload a local copy of searchresult.xsl via FTP.

Remember to 'touch' searchresult.xsl everytime you change the query styling, or the changes won't be applied until the next time Daisy is reset.

Using style-hints

Once you have set up the file, you can start using the style-hints. Below are two examples, each using one of the introduced style-hints.

select name, id, language where documentType='Image' and languageId = '2' order by name option style_hint = 'image-preview'

select name, id where documentType='Image' and languageId = '3' order by id option style_hint = 'image-thumbnail'