thumbnail_tag.wmk

• LOADING
• HTML TAGS
• PERL CODE
• DESCRIPTION
• DEFAULT TEMPLATE
• TABLE-GENERATION FUNCTIONS
• EXAMPLES
• OPTIONS WHICH AFFECT THIS TAG

LOADING

  <use plugin="thumbnail_tag" />

HTML TAGS

  <thumbnail name="filename.jpg" [text="template"]
        [bordercolor="black"] [borderwidth="1"] [format="jpg"] />

PERL CODE

  <{perl

    make_thumbnail_table (3, @names_of_images);

  }>

DESCRIPTION

This WebMake Perl library provides a quick shortcut to make thumbnail links to full-sized images, suitable for use in a photo album site or similar.

The library provides support for a <thumbnail> tag, which creates a thumbnail of one image, and some helper functions for creating thumbnail pages with lots of images.

The attributes supported by the <thumbnail> tag are as follows:

name=``imagename''

The image to link to. This should be the name of a URL reference, loaded from a <media> search, not the filename of the image itself.

borderwidth=``n''

If you wish to draw a border around the images, this specifies the border width (in pixels). The default value is 1. This can also be specified by setting a template content item called thumbnail.borderwidth.

bordercolor=``#xxxxxx''

The border colour to draw image borders in. The default value is ``black'' (or #000000). This can also be specified by setting a template content item called thumbnail.bordercolor.

format=``fmt''

The format to use for thumbnail images; default is ``jpg''. Also available: ``gif'' or ``png''. Any reasonable ImageMagick-supported format will work.

text=``template''

The template text to be used for the thumbnail link and img tags. The following content items are defined for use inside the template text. This can also be specified by setting a template content item called thumbnail.template.

thumbnail.name

The name of the image (not the filename, the <media> item name).

thumbnail.path

The image file's path, with directories.

thumbnail.filename

The image file's name, without directories.

thumbnail.href

The path to the full-sized image file, relative to the current output file.

thumbnail.thumb_src

The path to the thumbnail-sized version of the image file, relative to the current output file.

thumbnail.size_in_k

The full-sized image file's size, in kilobytes (rounded up).

thumbnail.size

The full-sized image file's size, in bytes.

thumbnail.full_height / thumbnail.full_width

The full-sized image file's height and width, in pixels.

thumbnail.height / thumbnail.width

The thumbnail-sized image file's height and width, in pixels.

thumbnail.tag_attrs

The remaining attributes of the thumbnail tag.

DEFAULT TEMPLATE

If template is not specified, the template content item thumbnail.template is used. The default value for this is:

  <template name=thumbnail.template>
    <div align=center>
      <a href="$ {thumbnail.href}"><img
          src="$ {thumbnail.thumb_src}" alt="$ {thumbnail.filename}"
          height="$ {thumbnail.height}" width="$ {thumbnail.width}"
          border="0" $ {thumbnail.tag_attrs} /></a>
      <br />
      $ [$ {thumbnail.name}.title]
      <br />
    </div>
  </template>

Note that this means that any unrecognised attributes of the thumbnail tag itself will become attributes of the IMG tag.

This template can be overridden by simply redefining thumbnail.template in your WebMake file.

TABLE-GENERATION FUNCTIONS

The following Perl functions are provided:

$text = make_thumbnail_table ($pics_per_row, @names_of_images);

This function will lay out a table containing thumbnails, with up to $pics_per_row pictures on each row. The following template content items can be set to customise the behaviour of this tag:

$ {thumbnail.table.td}

The template used to wrap each thumbnail. References to $ {thumbnail.table.item} will be replaced with the output from the <thumbnail> tag itself. Default setting:

        <td valign=top> $ {thumbnail.table.item} </td>

$ {thumbnail.table.tr}

The template used to wrap each row of thumbnails. References to $ {thumbnail.table.tds} will be replaced with the output from the $ {thumbnail.table.td} templates so far for this row. Default setting:

        <tr> $ {thumbnail.table.tds} </tr>

Note that you will have to wrap this up in a <table> tag yourself ;)

EXAMPLES

The file examples/thumbnails.wmk in the WebMake distribution.

OPTIONS WHICH AFFECT THIS TAG

FileSearchPath - WebMake option