XQuery/Image Library

From Wikibooks, open books for an open world
Jump to: navigation, search

Motivation[edit]

You want a script that will display a small thumbnail of all the images in an image collection. The images may have many file suffixes (jpg, png, gif etc).

Method[edit]

We will write an XQuery that finds all the child resources in the collection that have the correct file types.

Source Code[edit]

xquery version "1.0";
declare option exist:serialize "method=xhtml media-type=text/html";
 
(: look for the collection parameter in the incoming URL.  If not assume a default collection like /db/images. :)
let $collection := request:get-parameter('collection', '/db/images')
 
(: you can also change the number of images per row :)
let $images-per-row := xs:integer(request:get-parameter('images-per-row', 10))
 
(: first get all the files in the collection :)
let $all-files := xmldb:get-child-resources($collection)
 
(: now just get the files with known image file type extensions :)
let $image-files :=
   for $file in $all-files[
      ends-with(.,'.png') or 
      ends-with(.,'.jpg') or 
      ends-with(.,'.tiff') or 
      ends-with(.,'.gif')]
   return $file
 
   let $image-count := count($image-files)
   let $rows-count := xs:integer(ceiling($image-count div $images-per-row))
return
<html>
   <head>
      <title>Images for collection {$collection}</title>
   </head>
   <body>
      Images in collection: {$collection}
      <table>{
            for $row  in (1 to $rows-count)
            return
              <tr>{
                for $col in (1 to $images-per-row)
                let $n := ($row - 1 ) * $images-per-row + $col               
                return 
                  if ($n <= $image-count)
                  then  
                     let $image := $image-files[position() = $n ]
                     let $path := concat('/exist/rest', $collection, '/', $image)
                     return
                      <td>
                         <a href="{$path}"><img src="{$path}" height="100px" width="100px"/></a>
                      </td>
                   else <td/>  (: blank cells at the end of the last row :)
              }</tr>           
        }</table>
   </body>
</html>