<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>
WebMake: Documentation: thumbnail_tag.wmk
</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="WebMake/2.3" />
<style type="text/css">
body {
background-color: #ffffff;
color: #000000;
line-height: 110%;
margin-left: 10px;
margin-right: 10px;
}
p, table, td, th {
font-family: verdana,lucida,helvetica,sans-serif;
font-size: 11px;
line-height: 110%;
}
pre {
margin-left: 3%;
white-space: pre;
}
code, samp, pre, p pre {
font-family: "lucida console", "Courier New", courier, "fixed-width", monospace;
font-weight: bold;
}
H1 {
font-size: 150%; font-family: Garamond, "Book Antiqua",Times,serif;
background: #FFCC66; text-align: center;
padding: 0.5em 1em 0.5em 1em; border-width: 1px;
border-color: black; border-style: solid; line-height: 120%;
}
H2 {
font-size: 125%; font-family: Garamond, "Book Antiqua",Times,serif;
background: #FFDD77; text-align: center;
padding: 0.5em 1em 0.5em 1em; border-width: 1px;
border-color: black; border-style: solid; line-height: 100%;
}
H3 {
font-size: 100%; font-family: Garamond, "Book Antiqua",Times,serif;
background: #FFEE88; text-align: center;
padding: 0.5em 1em 0.5em 1em; border-width: 1px;
border-color: black; border-style: solid;
}
H4 { font-size: 75%; font-family: Garamond, "Book Antiqua",Times,serif; }
H5 { font-size: 50%; font-family: Garamond, "Book Antiqua",Times,serif; }
H6 { font-size: 25%; font-family: Garamond, "Book Antiqua",Times,serif; }
A:link {
font-weight: bold;
color: #004000;
text-decoration: underline;
}
A:visited {
font-weight: bold;
color: #008000;
text-decoration: underline;
}
A:active {
font-weight: bold;
color: #800000;
text-decoration: underline;
}
dt {
font-size: medium;
font-weight: bold;
padding-top: 8px; padding-bottom: 8px;
}
dd {
padding-top: 8px; padding-bottom: 8px;
}
</style>
</head>
<body bgcolor="#ffffff" text="#000000" link="#3300cc" vlink="#660066">
<!-- font tag for compat with non-CSS browsers -->
<font face="lucida,verdana,sans-serif">
<div align="center">
<img src="images/WebMakeTitle.png" alt="WebMake" width="500" height="122" />
</div>
<table width="100%">
<tr>
<td valign="top">
<strong><a href="http://webmake.taint.org/">WebMake</a>
Documentation</strong> (version 2.3)
</td>
<td valign="top">
<div align="right">
[ <a href="sitetree.wmk.html">Back</a> | <a href="wwwtable_tag.wmk.html">Forward</a> | <a href="index.html">Index</a>
| <a href="allinone.html">All In One</a> ]
</div>
</td>
</tr>
</table>
<!-- yes, it's that Mozilla black-border code again ;) -->
<!-- stolen from www.mozilla.org via rc3.org -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#aaaaaa">
<table border="0" cellspacing="4" cellpadding="4" width="100%">
<tr>
<td bgcolor="#ffffff">
<table border="0" cellspacing="4" cellpadding="4" width="100%">
<tr>
<td>
<h1>thumbnail_tag.wmk</h1><a name="__index__"></a><!-- INDEX BEGIN -->
<ul>
<li>
<a href="#loading">LOADING</a>
</li>
<li>
<a href="#html tags">HTML TAGS</a>
</li>
<li>
<a href="#perl code">PERL CODE</a>
</li>
<li>
<a href="#description">DESCRIPTION</a>
</li>
<li>
<a href="#default template">DEFAULT TEMPLATE</a>
</li>
<li>
<a href="#tablegeneration functions">TABLE-GENERATION FUNCTIONS</a>
</li>
<li>
<a href="#examples">EXAMPLES</a>
</li>
<li>
<a href="#options which affect this tag">OPTIONS WHICH AFFECT THIS TAG</a>
</li>
</ul>
<!-- INDEX END -->
<hr />
<h1><a name="loading">LOADING</a></h1><pre>
<use plugin="thumbnail_tag" /></pre><hr />
<h1><a name="html tags">HTML TAGS</a></h1><pre>
<thumbnail name="filename.jpg" [text="template"]
[bordercolor="black"] [borderwidth="1"] [format="jpg"] /></pre><hr />
<h1><a name="perl code">PERL CODE</a></h1><pre>
<{perl</pre><pre>
make_thumbnail_table (3, @names_of_images);</pre><pre>
}></pre><hr />
<h1><a name="description">DESCRIPTION</a></h1><p>
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.
</p>
<p>
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.
</p>
<p>
The attributes supported by the <thumbnail> tag are as follows:
</p>
<dl>
<dt>
<strong><a name="item_name%3D%22imagename%22">name=``imagename''</a></strong><br />
</dt>
<dd>
The image to link to. This should be the name of a URL reference, loaded from
a <media> search, <strong>not</strong> the filename of the image itself.
</dd>
<dt>
<strong><a name="item_borderwidth%3D%22n%22">borderwidth=``n''</a></strong><br />
</dt>
<dd>
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 <code>thumbnail.borderwidth</code>.
</dd>
<dt>
<strong><a name="item_bordercolor%3D%22%23xxxxxx%22">bordercolor=``#xxxxxx''</a></strong><br />
</dt>
<dd>
The border colour to draw image borders in. The default value is ``black'' (or
<code>#000000</code>). This can also be specified by setting a template content item
called <code>thumbnail.bordercolor</code>.
</dd>
<dt>
<strong><a name="item_format%3D%22fmt%22">format=``fmt''</a></strong><br />
</dt>
<dd>
The format to use for thumbnail images; default is ``jpg''. Also available:
``gif'' or ``png''. Any reasonable ImageMagick-supported format will work.
</dd>
<dt>
<strong><a name="item_text%3D%22template%22">text=``template''</a></strong><br />
</dt>
<dd>
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
<code>thumbnail.template</code>.
<dl>
</dd>
<dt>
<strong><a name="item_thumbnail%2Ename">thumbnail.name</a></strong><br />
</dt>
<dd>
The name of the image (not the filename, the <media> item name).
</dd>
<dt>
<strong><a name="item_thumbnail%2Epath">thumbnail.path</a></strong><br />
</dt>
<dd>
The image file's path, with directories.
</dd>
<dt>
<strong><a name="item_thumbnail%2Efilename">thumbnail.filename</a></strong><br />
</dt>
<dd>
The image file's name, without directories.
</dd>
<dt>
<strong><a name="item_thumbnail%2Ehref">thumbnail.href</a></strong><br />
</dt>
<dd>
The path to the full-sized image file, relative to the current output
file.
</dd>
<dt>
<strong><a name="item_thumbnail%2Ethumb_src">thumbnail.thumb_src</a></strong><br />
</dt>
<dd>
The path to the thumbnail-sized version of the image file, relative to the
current output file.
</dd>
<dt>
<strong><a name="item_thumbnail%2Esize_in_k">thumbnail.size_in_k</a></strong><br />
</dt>
<dd>
The full-sized image file's size, in kilobytes (rounded up).
</dd>
<dt>
<strong><a name="item_thumbnail%2Esize">thumbnail.size</a></strong><br />
</dt>
<dd>
The full-sized image file's size, in bytes.
</dd>
<dt>
<strong><a name="item_thumbnail%2Efull_height_%2F_thumbnail%2Efull_width">thumbnail.full_height / thumbnail.full_width</a></strong><br />
</dt>
<dd>
The full-sized image file's height and width, in pixels.
</dd>
<dt>
<strong><a name="item_thumbnail%2Eheight_%2F_thumbnail%2Ewidth">thumbnail.height / thumbnail.width</a></strong><br />
</dt>
<dd>
The thumbnail-sized image file's height and width, in pixels.
</dd>
<dt>
<strong><a name="item_thumbnail%2Etag_attrs">thumbnail.tag_attrs</a></strong><br />
</dt>
<dd>
The remaining attributes of the thumbnail tag.
</dd>
</dl>
</dl>
<hr />
<h1><a name="default template">DEFAULT TEMPLATE</a></h1><p>
If <code>template</code> is not specified, the template content item <code>thumbnail.template</code>
is used. The default value for this is:
</p>
<pre>
<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></pre><p>
Note that this means that any unrecognised attributes of the thumbnail tag
itself will become attributes of the IMG tag.
</p>
<p>
This template can be overridden by simply redefining <strong>thumbnail.template</strong> in
your WebMake file.
</p>
<hr />
<h1><a name="tablegeneration functions">TABLE-GENERATION FUNCTIONS</a></h1><p>
The following Perl functions are provided:
</p>
<dl>
</dd>
<dt>
<strong><a name="item_make_thumbnail_table">$text = make_thumbnail_table ($pics_per_row, @names_of_images);</a></strong><br />
</dt>
<dd>
This function will lay out a table containing thumbnails, with up to
<code>$pics_per_row</code> pictures on each row. The following template content items
can be set to customise the behaviour of this tag:
<dl>
</dd>
<dt>
<strong><a name="item_%24_%7Bthumbnail%2Etable%2Etd%7D"><code>$ {thumbnail.table.td}</code></a></strong><br />
</dt>
<dd>
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:
<pre>
<td valign=top> $ {thumbnail.table.item} </td></pre>
</dd>
<dt>
<strong><a name="item_%24_%7Bthumbnail%2Etable%2Etr%7D"><code>$ {thumbnail.table.tr}</code></a></strong><br />
</dt>
<dd>
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:
<pre>
<tr> $ {thumbnail.table.tds} </tr></pre>
</dd>
</dl>
<p>
Note that you will have to wrap this up in a <table> tag yourself ;)
</p>
</dl>
<hr />
<h1><a name="examples">EXAMPLES</a></h1><p>
The file <code>examples/thumbnails.wmk</code> in the WebMake distribution.
</p>
<hr />
<h1><a name="options which affect this tag">OPTIONS WHICH AFFECT THIS TAG</a></h1><p>
<code>FileSearchPath</code> - WebMake option
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td valign="top">
<strong><a href="http://webmake.taint.org/">WebMake</a>
Documentation</strong> (version 2.3)
</td>
<td valign="top">
<div align="right">
[ <a href="sitetree.wmk.html">Back</a> | <a href="wwwtable_tag.wmk.html">Forward</a> | <a href="index.html">Index</a>
| <a href="allinone.html">All In One</a> ]
</div>
</td>
</tr>
</table>
<div align="right">
<a href="http://webmake.taint.org/"> <img src="images/BuiltWithWebMake.png" alt="Built With WebMake" border="0" width="88" height="31" /></a>
</div>
</font>
</body>
</html>
