How to convert HTML to ThumbNailer template

This step-by-step tutorial will show you how you can use a web page created outside of ThumbNailer as the basis for a ThumbNailer HTML template. This way, you can use powerful web page layout tools like FrontPage, GoLive or Fireworks (or even Notepad, if you prefer) to create your page layout and let ThumbNailer fill in the images.

This document assumes you're familiar with HTML. And it would be helpful if you've at least looked at the ThumbNailer help file about expressions and templates.

Create a thumbnail page

The first step is to create a thumbnail page. Using your favorite HTML editing tool, create a page that holds a group of thumbnails.

While the overall layout is completely up to you, there are some things to keep in mind that will make the job of integrating with ThumbNailer much easier:

Choose an image of the same size as your sample thumbnail (100x100 is a typical thumbnail size) and use that wherever you want a thumbnail image. Try to use an image of the same size as the thumbnails you're going to be creating.
If you want image captions on your pages, put them in your layout now, including all fonts and colors. Use some easily identifiable text as the caption ("THUMBNAIL CAPTION", for example). You're going to need to be able to find and replace this text later on.
If you want to link to source HTML pages, add links to mock source pages now (or create a temporary source page to link to). The link from a thumbnail image to its corresponding source page should be either on the thumbnail image itself, on the caption, or very close to the thumbnail image. Important rule: you must not let any other thumbnail images come between a thumbnail image and the link to its source page.
Create a single look for all of the thumbnails on the page. This means using the same fonts for the captions, the same cell size, if you're putting them in tables, the same arrangement of caption and thumbnail, etc.. The easiest way to do this is to create a single thumbnail (including the caption and link to the source page), make it look exactly like you want it; then copy & paste that one thumbnail everywhere else you need it. The reason for this should be obvious when we get to the template.
If you want to add Previous / Next links, add them now, too. You can add as many "previous" and as many "next" links as you want, almost anywhere on the page. But for your first page, you might want to limit yourself to one of each, at the top or bottom of the page. The only exception to the "anywhere on the page" rule is that you shouldn't put them inside a thumbnail. Also, all "previous" links must be identical and all "next" links must be identical. Use some mock-up links for now.

So, with that in mind, here's a simple HTML page that we can use as an example:

Sample HTML thumbnail page

Pretend this is the wonderful design you came up with for your thumbnail pages.

<html> <head><title>Thumbnails</title></head>

<body bgcolor="#ffffe0">

<center>

 Some pictures



 <table border=0 cellspacing=5 cellpadding=5> <tr> <td>  <center> <a href="SOURCE_PAGE.HTM"> <img src="SAMPLE_THUMBNAIL.JPG"> </a> THUMBNAIL_CAPTION SOURCE_IMAGE_SIZE </center>  </td> </tr>

<tr> <td>  <center> <a href="SOURCE_PAGE.HTM"> <img src="SAMPLE_THUMBNAIL.JPG"> </a> THUMBNAIL_CAPTION SOURCE_IMAGE_SIZE </center>  </td> </tr> </table>



 <a href="PREVIOUS.HTM">Previous Page</a>  |  <a href="NEXT.HTM">Next Page</a> 

Click the image to enlarge

</center>

</body> </html>

The layout is not going to win any awards for design, but it will do for illustration. (view it)

The interesting points here are the thumbnail table and the previous / next links.

First, let's look at the thumbnail table. There are two "thumbnails" in a table with two rows and one column. You'd probably have more thumbnails on your pages, but I want to keep things small for this example. Notice how I've marked off each thumbnail with comments. (Note, when I write "thumbnail" I'm generally referring to the image, the caption, the source links, etc. as a single object - everything that goes into THUMBNAIL_ONE, for example makes up a "thumbnail". I'll try to use "thumbnail image" when I'm referring to the actual image by itself).

Notice that the HTML that makes up "THUMBNAIL ONE" is the same as the HTML for "THUMBNAIL TWO". This is what point 4 (above) is trying to get across: the HTML that we use to create one thumbnail is the same HTML we use for all thumbnails.

You might wonder why I included the CENTER tags in the thumbnail, but not the TR/TD tags; I did this because the CENTER affects how the image and text in the thumbnail line are arranged with respect to one another, while the TR and TD really only control where the thumbnail goes on the page. We've separated the stuff that describes how a thumbnail looks from the stuff that says where to put the thumbnail. As you'll see later, this choice will make it very easy to move the thumbnails around on the page.

Also note all the capitalized words (SAMPLE_THUMBNAIL.JPG, THUMBNAIL_NAME, etc.). These are things that we will replace with ThumbNailer expressions, later. For now, they are just links to mock-up pages and images. These capitalized words ("SAMPLE_THUMBNAIL.JPG ", etc) don't actually mean anything to ThumbNailer, you can use whatever you like for your mock-up images and links. And I capitalized these so they'd stand out in the HTML. Again, they are just placeholders for now.

And finally, the "Previous" / "Next" stuff; it's pretty simple. We'll replace the capitalized words with ThumbNailer expressions, later.

Create a template

First we need a ThumbNailer HTML template to put our stuff into. The easiest way to do this is to start ThumbNailer, reset all your options and go to Advanced / HTML. Turn on HTML Pages, and go to HTML setup. Go to the Source Pages window, and choose the "Source pages with destination images" option (it doesn't really matter which of these you choose, for now). Press OK. Now, press "Export template…" to save the settings into a template. All this did was to create a very simple template that we can use as a starting point. It is just a plain text file and you could have created this by hand, but letting ThumbNailer create it saves typing.

Choose the "Use external template" option and enter the path to the file you just saved. Press Edit Template. This will bring up the template editor. The first thing you see in the template editor is the "@:thumbnailpage" section (if you don't see it, use the Jump To Section menu item to bring the thumbnailpage section into view). This is the body of the thumbnail HTML page and this is where we start.

Now would be a good time to read up on HTML Templates in the help file.

@:thumbnailpage section

This is where we define the main page layout for thumbnail pages. So, copy all of the HTML for the sample thumbnail page into the @:thumbnailpage section (between the @+ and @-). Replace whatever is there already.

The @:thumbnail section will look like this:

#### # Thumbnail page definition @:thumbnailpage @+ <head><title>Thumbnails</title></head>

<body bgcolor="#ffffe0">

… rest of the HTML



Click the image to enlarge

</center>

</body> </html> @-

Extract your thumbnail

It isn't as bad as it sounds. In fact, I've made it easy. If you scroll down past the @:thumbnailpage section, you'll find the @:thumbnail section of the template. There's some stuff in there already, but don't worry about that. This is where we'll define what a "thumbnail" is for this page. The "thumbnail" in this case is the block of HTML that makes up THUMBNAIL_ONE and THUMBNAIL_TWO in the sample (remember, they are identical). We need to move this HTML into the @:thumbnail section of the template. So, copy the HTML for THUMBNAIL_ONE into the @:thumbnail section, between the @+ and @-, replacing whatever's already there.

The @:thumbnail section will now look like this:

#### # Thumbnail element definition @:thumbnail @+ <center> <a href="SOURCE_PAGE.HTM"> <img src="SAMPLE_THUMBNAIL.JPG"> </a> THUMBNAIL_CAPTION SOURCE_IMAGE_SIZE </center> @-

Remove the thumbnail HTML from the @:thumbnailpage section

Now, remove the original THUMBNAIL_ONE and THUMBNAIL_TWO blocks from the @:thumbnailpage section, and in their places, put this: "@@thumbnail" (without the quotes).

The @:thumbnailpage section will now look like this:

#### # Thumbnail page definition @:thumbnailpage @+ <html> <head><title>Thumbnails</title></head>

<body bgcolor="#ffffe0">

<center>

 Some pictures



 <table border=0 cellspacing=5 cellpadding=5> <tr> <td> @@thumbnail </td> </tr>

<tr> <td> @@thumbnail </td> </tr> </table>



 <a href="PREVIOUS.HTM">Previous Page</a>  |  <a href="NEXT.HTM">Next Page</a> 

 Click thumbnail to enlarge

</center>

</body> </html> @-

As you can see, we've taken everything that goes into making a single thumbnail out of the body of the HTML file (the @:thumbnailpage section) and moved it to the @:thumbnail section, and in its place, we've left a little tag that tells ThumbNailer "put a thumbnail here". Now, as you can imagine, we can move those @@thumbnail markers anywhere on the page, we can add more of them, arrange them, etc.. Later, we'll do the same with the previous and next links.

Adding ThumbNailer expressions

Now we need to add ThumbNailer expressions to the @:thumbnail section, so that it can create the real links and image references for your thumbnails. Specifically, we need to fix all of the mock-up links and references we used (all the things in capital letters).

Now would be a good time to read up on ThumbNailer operators and expressions

#### # Thumbnail element definition @:thumbnail @+ <center> <a href="SOURCE_PAGE.HTM"> <img src="SAMPLE_THUMBNAIL.JPG"> </a> THUMBNAIL_CAPTION SOURCE_IMAGE_SIZE </center> @-

When ThumbNailer is processing the @:thumbnail section, it knows about the current thumbnail, the current thumbnail page, the current source image, the current source page and a few other things. We'll use this information in this section to handle all of the links and references we need.

SAMPLE_THUMBNAIL.JPG - This is the image I used as a placeholder for thumbnail images. But we really want the actual thumbnail image. The "thmFile" variable holds the path to the thumbnail image, but it's the full on your local disk. What we really want is the relative path from the thumbnail page to the thumbnail image, and we want it to be in double quotes. We do that with &Q(RelFile(thmFile, thmPage)). So, replace "SAMPLE_THUMBNAIL.JPG" (quotes, too) with &Q(RelFile(thmFile, thmPage)). If you were to run a batch now, you'd get thumbnail pages with the real thumbnails on them, but the links would all be broken.

SOURCE_PAGE.HTM - This is the mock-up link I used to link to my mock-up source page. What we really want is the relative path to the real source HTML page. ThumbNailer keeps the real path to the source page in the "srcPage" variable, so we can use &Q(RelFile(srcPage, thmPage)) to get a relative path to the source page, in quotes. Replace "SOURCE_PAGE.HTM" (quotes, too) with &Q(RelFile(srcPage, thmPage)). Now the links to the source pages should work.

THUMBNAIL_CAPTION - This was the mock-up caption text I used. For this sample, we'll just use the name of the source file as the caption. Replace THUMBNAIL_CAPTION with &Name(srcFile). We don't use the &Q(…) in this because we don't really want the caption in double quotes.

SOURCE_IMAGE_SIZE - It's nice to tell people how large the images are before they download them. Replace SOURCE_IMAGE_SIZE with &SizeK(srcFile).

Now, the @:thumbnail section looks like this:

#### # Thumbnail element definition @:thumbnail @+ <center> <a href=&Q(RelFile(srcPage, thmPage))> <img src=&Q(RelFile(thmFile, thmPage))> </a> &Name(srcFile) &SizeK(srcFile) </center> @-

That &Q(RelFile(…) construction will get used wherever you have to link or reference one file from another. The reason for the &Q(…) is to put the output of RelFile in double quotes - links and image references want their targets in quotes. But we can't just do this "&RelFile(…)" because ThumbNailer doesn't evaluate text between double quotes. So, we use the Q, which outputs its input, quoted.

Previous / Next

Here's the HTML that makes up the Previous / Next links:

 <a href="PREVIOUS.HTM">Previous Page</a>  |  <a href="NEXT.HTM">Next Page</a> 

Like thumbnails, Previous and Next links have their own sections. And we'll handle them pretty much the same way.

@:thumbprevpage

First, copy the text that makes up a "Previous" link. In this case, it's the single line with PREVIOUS.HTM in it. Find the @:thumbprevpage section (it's just below the @:thumbnail section, usually , or use the Jump To Section menu in the template editor). Paste the text you just copied into the section, between the @+ and the @-, replacing what's there.

The @:thumbprevpage section should look like:

#### # Thumbnail page previous page link @:thumbprevpage @+ <a href="PREVIOUS.HTM">Previous Page</a> @-

Now, again, we need to fix the mock-up with a relative path link. When ThumbNailer is working on a @:thumbprevpage section, it keeps the path to the "previous" HTML page in the "prevPage" variable. (If there is no previous page, ThumbNailer will just skip this section). So, the expression is &Q(RelFile(prevPage, thmPage)). Replace "PREVIOUS.HTM" (quotes, too) with &Q(RelFile(prevPage, thmPage)). The @:thumbprevpage section should now look like:

#### # Thumbnail page previous page link @:thumbprevpage @+ <a href=&Q(RelFile(prevPage, thmPage))>Previous Page</a> @-

Just as we did for @@thumbnail blocks, we need to replace the chunk of HTML in the @:thumbnailpage section with @@thumbprevpage.

The @:thumbnailpage section should now look like:

#### # Thumbnail page definition @:thumbnailpage @+ <html> <head><title>Thumbnails</title></head>

… rest of the HTML

 @@thumbprevpage  |  <a href="NEXT.HTM">Next Page</a> Click the image to enlarge

</center>

</body> </html> @-

@:thumbnextpage

We'll handle the @:thumbnextpage section in the same way; copy the "next" HTML to the @:thumbnextpage section, replace the mock-up link with a ThumbNailer expression and then put a @@thumbnextpage marker in the @:thumbnailpage section:

The @:thumbnailPage section:

#### # Thumbnail page definition @:thumbnailpage @+ <html> <head><title>Thumbnails</title></head>

… rest of the HTML

 @@thumbprevpage  |  @@thumbnextpage Click the image to enlarge

</center>

</body> </html> @-

And the @:thumbnextpage section:

#### # Thumbnail page next page link @:thumbnextpage @+ <a href=&Q(RelFile(nextPage, thmPage))>Next Page</a> @-

@:thumbpnsep

The last little bit is the stuff that comes between the previous and next links, the " | ". We want the separator there, to keep the previous and next links apart. But, when there is a previous but no next (last page in the batch) or vice versa (next but no previous on the first page), we don't want the " | " to appear. That's the job of the @:thumbpnsep section - show up when both previous and next are present, else don't show up. So, replace the " | " in the @:thumbnailpage section with @@thumbpnsep, find the @:thumbpnsep section and add the separator HTML:

#### # Thumbnail page previous / next separator @:thumbpnsep @+  |  @-

That's It (for the thumbnail page, anyway.

Our @:thumbnailpage section looks like this:

#### # Thumbnail page definition @:thumbnailpage @+ <html> <head><title>Thumbnails</title></head>

<body bgcolor="#ffffe0">

<center>

 Some pictures



 <table border=0 cellspacing=5 cellpadding=5> <tr> <td> @@thumbnail </td> </tr>

<tr> <td> @@thumbnail </td> </tr> </table>



 @@thumbprevpage @@thumbpnsep @@thumbnextpage 

 Click the image to enlarge

</center>

</body> </html> @-

This is enough to handle thumbnail pages. Next, source pages. Don't worry they are much simpler.