garden tote with tools
 back link arrowPictools

Templates
 two beers
by Zweibieren
Up ArrowPhyspics
Up ArrowAnnals of ZB



Templates define the appearance of "category" and "picture" pages. Each project can have its own templates, and thus its own appearance.

For many projects, pictures fall naturally in a sequence of categories. Pictools presents the collection of pictures as a sequence of web pages, one page for each category. The category page displays thumbnails of the pictures:
1/4 size image of thumbnails page, with annotations


Clicking on a thumbnail switches to a page displaying the full image of the selected picture:
1/4 size page showing a picture, with annotations

For category pages the Next and Back buttons move to adjacent categories pages. For a picture page, the Next and Back buttons move through the full size pictures in the category. Captions appear on both kinds of pages, but on the category page it is just a popup as the mouse moves over the picture.

Template are in the distribution in pictools/picsrc/ and installed from there into ${PICTOOLS}.  You should tailor them there. And when you start a project directory, copy the templates to it and tailor them some more. They are further modified by macro replacement through genhtml, as called by gendirs in MakeTargets. In particular the Back or Next button is replaced with an Up button for the end pictures in the sequence.

Sections below describe each of the templates. The category pages are generated from a template called template.tpl and the picture pages come from frame.tpl. A third template, pictd.tpl, defines the appearance of each thumbnail; for instance, the caption could be made to appear directly on the page. The distributed versions of both template.tpl and frame.tpl have at their end a macro inclusion of another template, pagetrailer.txt; it provides a place to put copywrite and date stamp information.

Copies of the templates as distributed are on this website at template.tpl, frame.tpl, pictd.tpl, and pagetrailer.txt.

template.tpl

This template is used in gendirs and gensite to generate a header page showing thumbnails of all the pictures. The instructions shown here are part of the file as distributed and need to be removed before the file is used in earnest.  (Links have been removed, but rendered with underlining and blue.)

Kodak CX3740
 $tripTitle
$title

 physpics.com
Two mugs of beer
zweibieren
BACK button
 Click a thumbnail to see larger pictures, one-by-one NEXT button
Up Arrow Physpics
Up Arrow Annals of ZB
Up Arrow Log
Up Arrow Pictures
$pictures
BACK button Click a thumbnail to see larger pictures, one-by-one NEXT button
$includebody(${PICTOOLS}/copyright.html)

Background

A directory for displaying pictures has these files:
    Makefile
    template.tpl (a modified version of this file)
    frame.tpl (modified)
    captions.cap
    index.hin

The Makefile is three lines:
    DIGESTDIR = full name of directory containing the pictures
    include ${PICTOOLS}/MakeVars
    include ${PICTOOLS}/MakeTargets

The captions.cap file (or any .cap file) is a series of segments.
Each segment begins with a line
    file: segmentname Segment title ...
The segment is the pictures named on the following lines, up to the next segment line.  Each picture has a line
    [imagename.ext] caption words ...

When 'make build ' is performed, a subdirectory is created for each segment. It is named segmentname. Generated into that subdirectory is an index.html file and for each picture line, a file imagename.html. The index.html file is an instantiation of this file. template.tpl. The per-image files are instantiations of frame.tpl.

The index.hin file should contain references to the segments. It can do this with the line
    $include(captions-titles.txt)

So the segment directory is a subdirectory of the one with the files noted above. From that segment directory we have
index.html is the index to the segment of pictures
instantiated from template.tpl
../index.html is index to all segments of pictures
generated from index.hin
../../index.html is the main page for the project
(assuming that the pictures directory is a subdirectory of the project page)

Warning
Note that this template is instantiated into ./segmentname. So in it, the values of href= in <a> tags and src= in <img> tags must have an additional "../" at the beginning.  (That is, a reference to ../images/foo.png, must appear in this template as ../../images/foo.png)
Tasks
  1. Maybe change page title (the one for the window title bar).
  2. Put a better logo in the upper left.
    Or completely redesign the page.
  3. Define tripTitle in the Makefile with a line like
         DEFINES = -DtripTitle="Trip to Wilmerding"
    Or replace $tripTitle below
  4. Revise the list of backlink icons, especially those for Log and Pictures. Remember that local links have to be relative to a subdirectory of this one.
  5. Remove this instruction table!
Variables available

For early work you may want to use the unmodified template.tpl found in the pictools/picsrc directory of the distribution. Leave at least the variables section intact. After first building the site (with 'make') look at the generated files. The variables descriptions lines below will be augmented with the actual values of the variables as the file was processed.

The following variables will have the given values and may appear in the template.
 
 $title Text following the segment name in the file: line

$city Same as $title

$prev, $next Links to the previous and next picture in this segment

$previmg, $nextimg Name of image to use for link's icon; you can change these names by changing gendirs
The following have the indicated values, but are probably not useful.

$pictd wrapper for showing thumbnail pictures

$picdir directory where pictures are; usually ../
You may define tripTitle (or any other macro variable)

$tripTitle
 variable defined with -DEFINES in the Makefiles

frame.tpl

Gendirs generates a page for each picture to show it in the larger format. This page derives from the frame.tpl template. Here is a sample. (Links have been removed, but rendered with underlining and blue.)
put a cute
icon here
 		$tripTitle
$title
 two muds of beer
BACK button
back link arow Back to thumbnails
 NEXT button
<img alt="$alt" src="$imagename.$imageext" />
$caption
$includebody(${PICTOOLS}/copyright.html)

See the Background in template.tpl, above.

Tasks
  • Make a cute icon for the project's pictures, and put it upper left.
  • Verify that tripTitle is defined in DEFINES in the Makefile. (Or replace $tripTitle below with an actual title.)
  • Of course you should tailor colors and placement to your project's needs.
  • Delete this table.
Variables available

The following variables may be used. After instantiation, the values will appear within the parentheses.

$caption Text following [imagename.ext] in captions.cap
$alt Same as $caption, but stripped of all <...>
$index Ordinal of this picture in its segment: 1, 2, 3, ...
$imagename Filename of the image.
$imageext Filename extension of original image (thumb is .jpg).
$title Text following the set name in the file: line.
$city Same as $title.
$tripTitle may be defined in the Makefile with
    DEFINES=-DtripTitle="words in title"


The following have the indicated values, but are probably not useful.
$picdir directory where pictures are; usually ..
$picthumbsdir default: $(picdir)/thumbs

pictd.tpl


Genhtml instantiates this template for each thumbnail it generates for the $pictures macro. It implants the image like this:

<img class="picimage" src="$picthumbsdir/$picimage.jpg" title="$picalt" alt="$picalt" $picthumbsize>

The default version is usually sufficient; it shows the picture and uses the caption as a popup. You can revise the file or adjust the appearance with a CSS style sheet. The generated code gives elements these classes:
  • picrow
 style for <tr> for each row of a $pictures array
  • piccell
 style class for the entire <td>
  • picimage
 style class for the <img> inside the cell
The following variables will be expanded in pictd.tpl files. All are set by genhtml or the Makefile.

These may be set with DEFINES=... in the Makefile, -D on the genhtml command line, or $var=(value) in text

$title default from -t switch or file names

$city same as $title

$pictd default is ./pictd.tpl, $PICTOOLS/pictd.tpl, or a default internal value

$picdir default is ./.
 
$picthumbsdir default is ./thumbs
These are set depending on the image being displayed.

$piccaption Caption from caption.cap.

$picalt Same as piccaption, but stripped of all <...>

$picimage Name of image file (without extension)

$picext Filename extension (without dot)

$picthumbsize Empty or a CSS string defining height and weight.

copyright.html


Every file on the website includes at its end a line like
$includebody(${PICTOOLS}/copyright.html)
This way I can update the trailer at any time. (But pages have to be reprocessed to use the new trailer.) The trailer I use is this:
Copyright $date(%Y), Zweibieren
$date(%e %b %Y  %I:%M %p)
Page maintained
by Zweibieren 		two steins of beer
The file itself contains HTML code, but is not a full proper HTML file. To edit it, I embed it in a page, edit it, and then extract the contents for the text file.
Copyright boilerplate for zweibieren
Copyright 2008, Zweibieren
8 Aug 2008  11:38 PM
Page maintained by Zweibieren  two steins of beer