Generating image thumbnails using ImageReader

This is some basic information that explains how to use the ImageReader to generate thumbnails of images (i.e. small versions of a larger image). When using this functionality there is no more need to store image thumbnails on disk. They will be generated on-the-fly.

The ImageReader is part of the AboutTheBuildTargets. (Current as of CVS 2.1-dev 2 November 2002)

Sitemap

Reader component

Your sitemap should contain the following definition of the reader component:

<map:readers>
  <map:reader
    logger="sitemap.reader.ImageReader"
    name="imageresource"
    pool-max="32"
    src="org.apache.cocoon.reading.ImageReader"/>
</map:readers>

Pipeline definition

You probably already have the following fragment in your pipeline to serve static JPEG images.

<map:match pattern="**.jpg">
  <map:read mime-type="image/jpg" src="{1}.jpg"/>
</map:match>

If you add the following fragment to your pipeline before the previous one, Cocoon will be able to generate thumbnails when requested. 

<map:match pattern="**-tn.jpg">
  <map:read type="imageresource" mime-type="image/jpg" src="{1}.jpg">
    <map:parameter name="width" value="0"/>
    <map:parameter name="height" value="96"/>
  </map:read>
</map:match>

I have added "-tn" to the pattern to be matched to distinguish between the original image and the resized version.

The parameters "width" and "height" define the size of the image to be served. If you want to keep the aspect ratio of the images, one of them should be 0. In the above example, all thumbnails will be 96 pixels high. The width depends on the actual size of the original image.

Usage

The following HTML fragment uses the above definitions:

<a href="kiran.jpg"><img src="kiran-tn.jpg" alt="Picture of Kiran"/></a>
  • The <a> tag refers to the full-size image.
  • The <img> tag refers to the thumbnail.

Tips

  • If you use SitemapPatterns in the matcher you can make width and/or height variable.
  • No labels