Making Templates

As of version 3.0 of Thumbs you can now make your own templates.  Templates tell Thumbs how to generate the various pages it creates when you click "Make Thumbnails".

If you make a cool one please share it with us.

There are 3 levels of making a template. First we'll go over the simplest.

Making a picture frame.

The simplest template you could probably make is to copy the Purple-Frame template and change the frame.  To do this, go to the folder in which you installed Thumbs and inside that folder you'll find a folder called Templates.  Inside that folder where will be one folder for each template you have.  Each Template must have its own folder and that folder must be in the Templates folder

So.  First, copy the folder "Purple-Frame" to a new folder.  The easiest way to do this is to select the folder from the Windows Explorer, pick "Copy" from the Edit menu and then "Paste" from the Edit menu.  This should create a copy of the folder called "Copy of Purple-Frame".  Rename it to something better.

Then, load up you favorite image editing program.  Mine is Photoshop but you can use any image editing program that can save .GIF files.

Here's the original frame from "Purple-Frame"

After you are finished you need to cut your frame up into 8 parts and use the names below for each part.

As you can see here, it's important that the parts "frame_t.gif" and "frame_b.gif", the top and the bottom middle parts, are repeatable.  That is if you copied them several times they would still look correct.  Below is the file "frame_b.gif" copied 8 times.

The same is true of the left and right pieces ("frame_l.gif" and "frame_r.gif")

Finally you need to make a screenshot to be shown inside Thumbs.  It needs to be a .JPG file and it needs to be 188 pixels width by 220 pixels tall.  It needs to be named "screenshot.jpg".

Save or copy those 9 images to your new template folder and you're almost done.

Options.txt

You need to edit the file "options.txt" that's in the template folder for your template.  Double click on it and you should be able to edit it in the Windows Notepad.

[Options]

The most important part in this simple case is the [options] area. There you specify how much a width and height adjustment to take into account how big your frame is.  The easiest way to figure this out it to run Thumbs once, select your new template, make thumbnails, and then edit one of the mid-size pages it generated.  At near the top you'll see 2 lines that look like this

widthAdjust = -168;
heightAdjust = -80;

First, view that page in your browser.  Also edit that page in Notepad.  Make the the browser window tall and thin.   If parts of the page are off the right edge of the window then flip over to notepad and adjust "widthAdjust" for example from "-168" to "-188".  Save the file, flip back to your browser and press the refresh/reload button. Does it fit now?  Keep adjusting until it does.

Then do the same for the "heightAdjust" although you will have to first resize the browser window so it is wide and flat.  Adjust the "heightAdjust" value until the bottom of the page stops going off the bottom of the window.

You might have to adjust in the other direction too.  If you make these values too large then your image will appear smaller than the window.

Once you've figured out values that work, open "options.txt" for your template and look for the [options] section and set the values to match the ones you just figured out.

[options]
pictureWidthAdjust=-168
pictureHeightAdjust=-80

Set the to variables to the values you figured out above.(note: they are negative numbers so 30 more then -110 is -80)

[Colors]

[colors]
colorbackground=FFFFFF,unused
colortext=000000,default
colorlink=000080,default
colorused=800080,default
colorslidebackground=000000

This section is used to tell Thumbs what colors you recommend people use.  You put the color that Thumbs should use followed optionally by the keywords "default" or  "unused".

Default means that although you recommend a particular color the "Default" option will be checked inside Thumbs for that particular color making the pages use the browser's default colors.

Unused means your template has that particular color hardcoded and it is therefore not settable by from Thumbs.  This is probably true for most templates for the background color if the images expect to be blended to a particular color.  For example the shadows and icons in the "Shadow" template all expect to be on white therefore the background color is set unused for that template.

You're are finished!!!  Wasn't that easy?

Replacing All the the Images

It was pretty easy to replace the frame but if you want you can replace every image in a template.  It's just more work.

Here are the names of the border parts used in both the "Shadow" and "Purple-Frame" templates.

border_tl.gif	border_t.gif	border_tr.gif
border_l.gif		border_br.gif
border_bl.gif	border_b.gif	border_br.gif

And here's the bar used in those same templates.

bar_l.gif

bar_m.gif

bar_r.gif

Here are the various icon images.

mini_arrow_l.gif	mini_arrow_r.gif
pic_list.gif	pic_home.gif
pic_magnify.gif	slideshow.gif
arrow_loff.gif	arrow_roff.gif

Some templates use a border around each slide

tborder-tl.gif	tborder-t.gif	tborder-tr.gif
tborder-l.gif		tborder-br.gif
tborder-bl.gif	tborder-b.gif	tborder-br.gif
Note that most of the templates stretch / shrink the top, left, right and bottom images to fit the thumbnails.

thumbs_banner.gif

thumbs_logo.gif

You can also change the images used for the slideshow controls although I suggest you keep them the same size.  Normally they are stored in the same folder as the Thumbs program but if you make local copies in a particular template that template will use those local versions.  If you change the size you will need to edit the template so that it adjusts the size of the control window to fit.  

slideprev.gif

slidenext.gif

slidehide.gif

slideplay.gif

slideexit.gif

If you are using Photoshop you can download the Photoshop files I used to make some of the templates that are included with Thumbs here

Total Conversion
Changing all the HTML for a template

If you know HTML inside and out you can edit any of the HTML for a template.

The #1 concern is that what you change the files too may not be compatible across multiple browsers.  You're on your own in that respect.  The only way you can be sure it to make some thumbs and test them on a variety of platforms and browsers.

The files are as follows

The files are optionally broken into parts.  I part is marked by inserting a comment in the following form

<!-- THUMBSPART:partname -->

The part named "main" is the part that will be written to the corresponding destination file.  Other parts are used to help generate the various parts of the main file.  See below for an explanation of each part.

Copying referenced files.

Thumbs uses these files to build the HTML pages for your thumbnails.  As it reads them it will copy any files that they reference by looking for (src="", href="" and background="").  In order for the files to be copied they must be in the same template folder.

The copied files are not also parsed, they are just copied so if you for example make "index.html" reference "letter.html" and "letter.html" references "copyright.html", "copyright.html" will not be copied.   There is a work around.   Just put references to the extra files in comments.  For example

<!-- src="copyright.html" --> 

Variables

While the template is being processed various variables are available for substitution into the template.  A variable starts with $ and can optionally end with $ also.  This makes it possible to put a variable directly next to other text

$imageWidth$x$imageHeight

The second $ is ending the first variable.

For any variable that is numeric, like the width or height of something, you can add, subtract, multiply or divide a single number using a format like this

$imageWidth(+20) or $imageHeight(-15) or $imageWidth(*2) or $imageWidth(/2)

for more complicated math see scripting below.

Globals

These are available at all times in all templates parts

index.html

These variable are available while processing index.html

These variables are available while generating each folder entry in the file list IF you've chosen to generate a folder tree list

$thumbslink:	link to current thumbnail page
$thumbsfoldername:	name of current folder
$indent:	not important, used to make the HTML slightly more readable
$indent2:	not important, used to make the HTML slightly more readable
$captionhtml	the HTML to insert of there is a caption
$dirindent	the value of the part <!-- thumbspart:dirindent --> below * the number of levels deep we are in folders
$thumbpathfolder	path to current folder

<!-- thumbspart:dirstart -->

This part is inserted to start each folder that has some images inside it and has sub folders

<!-- thumbspart:dirstart_empty -->

This part is inserted to start each folder that has no images inside it but has sub folders.  This would only happen when you have subfolders and there's nothing in the parent.  For example if you had a folder called "male" and inside you had folders "boys" and "men".  In the last two folders you have images but in the first folder you have none.

<!-- thumbspart:dirstart_nosubfolders -->

This part is inserted to start each folder that has some images inside it but has sub folders

<!-- thumbspart:dirstart_nosubfolders_empty -->

This part is inserted to start each folder that has no images and no sub folders inside it

<!-- thumbspart:dirend -->

This part is inserted to end each folder that has sub folders inside

<!-- thumbspart:dirend_empty -->

This part is inserted to end each folder that has NO sub folders inside

<!-- thumbspart:dirindent -->

This part is used to build the variable $dirindent.  It is inserted once for each sub level of folders.

If you are NOT using a folder tree then these variables are available while each thumbnail page link is being generated.

$thumbpagelink:	link to current thumbnail page
$thumbsfoldername:	name of folder for current thumbnail page
$thumbpathfolder	path to current folder

<!-- THUMBSPART:template_thumbpagehtml -->

This part contains the HTML used to generate a link to a thumbnail page.  In other words, for each folder, if ithas images this part will be inserted into the destination "index.html"

These parts are used in general while making the index.html file

<!-- THUMBSPART:captionhtml -->

This part is the HTML inserted to for a caption.  This part becomes the value of the variable $captionhtml.

<!-- THUMBSPART:template_explorerviewhtml -->

This part is the HTML inserted to link to the explorer view.  This part becomes the value of the variable $explorerviewhtml. 

<!-- THUMBSPART:template_slideshowhtml -->

This part is the HTML inserted to link to the slideshow.  This part becomes the value of the variable $slideshowviewhtml. 

<!-- THUMBSPART:template_thumbsbanner -->

This part is the HTML to insert the Thumbs banner (created by Thumbs).  It becomes the value of $thumbsbanner. 

thumbs_page.html

These variable are available while processing thumbs_page.html

While each individual thumbnail is being generated these variables are available

<!-- THUMBSPART:rowtop -->
<!-- THUMBSPART:rowmiddle -->
<!-- THUMBSPART:rowbottom -->

These parts are used to build the rows of a table for the thumbnails.  rowtop is used to start the first row.  rowmiddle is used between rows.  rowbottom is used to end the last row.

<!-- THUMBSPART:thumbleft -->
<!-- THUMBSPART:thumbmiddle -->
<!-- THUMBSPART:thumbright -->

These parts are used to build the columns of a table for the thumbails.  thumbleft is used before the first thumbnail on the left of each row.  thumbmiddle is used between each thumbnail in a row.  thumbright is used after the last thumbnail in each row.

<!-- THUMBSPART:thumbnail -->

This part is inserted for each thumbnail and is combined with the parts above to create the variable $thumbnails

<!-- THUMBSPART:captionhtml -->

This part is inserted for each thumbnail if there is a caption or if "Insert Space for Captions" is checked in Thumbs

<!-- THUMBSPART:commenthtml -->

This part is inserted for each thumbnail if "Put Comments on Thumbnail Pages" is checked in Thumbs

<!-- THUMBSPART:foldercommenthtml -->

This part is inserted for the folder comment if there is a comment for the folder.

<!-- THUMBSPART:template_slideshowhtml -->

This part is the HTML inserted to link to the slideshow.  This part becomes the value of the variable $slideshowviewhtml. 

<!-- THUMBSPART:template_thumbsbanner -->

This part is the HTML to insert the Thumbs banner (created by Thumbs).  It becomes the value of $thumbsbanner. 

midpage_movie.html

Depending on what you change you made need to edit the "options.txt" file for your template.  See this section for most of the details.

On top of the info in that section there are also these two settings

commentWidthAdjust=0
commentHeightAdjust=-14

These adjust the size of the mid-size images even more based on if you have a comment or not.  If you have a comment then commentWidthAdjust is added to the width and commentHeightAdjust is multiplied by the number of lines in your comment and then added to the height.

These variables are available while building the mid-size pages

<!-- THUMBSPART:commenthtml -->

This part is the HTML inserted if there is a comment

<!-- THUMBSPART:template_slideshowhtml -->

This part is the HTML inserted to link to the slideshow.  This part becomes the value of the variable $slideshowviewhtml. 

<!-- THUMBSPART:template_thumbsbanner -->

This part is the HTML to insert the Thumbs banner (created by Thumbs).  It becomes the value of $thumbsbanner. 

<!-- THUMBSPART:template_html_mpg -->

This part is the HTML to insert the to show an mpg file

<!-- THUMBSPART:template_html_mov -->

This part is the HTML to insert the to show an quicktime mov/qt file

<!-- THUMBSPART:template_html_avi -->

This part is the HTML to insert the to show an avi file

explorer_filelist.html

These variables are available while generating the filelist pane of the explorer view.

These variables are available while generating each folder entry in the file list

These variables are available while generating each file entry in the file list

<!-- thumbspart:dirstart -->

This part is inserted to start each folder that has some images inside it.

<!-- thumbspart:dirstart_empty -->

This part is inserted to start each folder that has nothing inside it.  This would only happen when you have subfolders and there's nothing in the parent.  For example if you had a folder called "male" and inside you had folders "boys" and "men".  In the last two folders you have images but in the first folder you have none.

<!-- thumbspart:fileentry -->

This part is inserted for each image.

<!-- thumbspart:dirend -->

This part is inserted to end each folder

Customizing even more

The following files are stored in the Thumbs installation folder.  If you want to customize them for a particular template just copy them to that particular template's folder.  Thumbs will use those files instead for that particular template.

slideshow.html

These variables are available while generating each file entry to the slidelist above using the parts below 

showpic.html

Scripting

For some crazy reason I decided to had functions to allow some simple scripting.  I have not actually used it much yet so I'm not sure what's missing and I'm not sure what bugs there are.  If you would like to play with it though here's the functions.  If you find you need some special function or that something is broken then feel free to write me but I can't promise anything.

Basically these are functions kind of like $picWidth() and $picHeight() above except they do more *scripting* like stuff.

What could this be used for?  Well, you could make a template that picked different borders if the width of the thumbnail was bigger than the height.  Apple's iPhoto does this.  You could also make a template that picked different borders based on the size of the image or at random.  Stuff like that.  Here's a mostly useless example but...

$fmult($thumbwidth,$fif($fmod($fsubstr($filename,3,5),2),1,2))

The above example returns the width of a thumbnail OR double the width based on whether or not the filename of the file has an odd or even number.  It assumes the files are named "dsc12345.jpg" for example.

You can also do more complicated math than before.  Example:

width="$fadd($picWidth(border-l.gif),$thumbwidth,$picWidth(border-r.gif))"

and stuff like that.$

As of version 4.60 Thumbs supports both integers and floating point numbers in scripting.  An integer is a number with no decimal point.  If all values are integers then Thumbs uses integer math.  If a one value is a floating point number then it assumes both are.  So for example:

$fdiv(5,2)  =  2
$fdiv(5,2.0) = 2.5
$fdiv(5.0,2) = 2.5

$fmult($fdiv(5,2),3) = 2 * 3 = 6
$fmult($fdiv(5,2),3.0) = 2 * 3.0 = 6.0
$fmult($fdiv(5,2.0),3) = 2.5 * 3 = 7.5

EXIF Information:

The follow variables are available during thumbs_page.html and midpage_jpg.html processing (see above).  These fields are defined by the EXIF standard which can be downloaded from this page.

IPTC Information:

The follow variables are available during thumbs_page.html and midpage_jpg.html processing (see above).  These fields are defined by the IPTC standard which can be downloaded from the IPTC website.

T