How to convert HTML to ThumbNailer template

ThumbNailer Home

Source pages

    If you followed along as we merged the thumbnail page into our template, the source page merge will seem trivial.


Create the source page

    Using your favorite web page creation tool, create a web page that will hold one of your source images. This is usually a much simpler task than a thumbnail page, because there is only one image to deal with, and that image is usually large and takes up most of the page, leaving little room for other things.

Things to keep in mind

  1. From a source page, ThumbNailer knows where to find the following items:
    • The source image
    • The thumbnail image
    • The thumbnail page where the corresponding thumbnail lives
    • The previous source page
    • The next source page
    • The root source and destination folders
  2. Use a sample source image that's roughly the same size as your source images.
  3. If you are linking back to thumbnail pages, or to previous/next pages, use mock-up links that are easy to spot in the HTML - we'll be replacing those with ThumbNailer expressions.
  4. ThumbNailer can only "see" one source image at a time, so you can only have one source image on the page.

Sample Source HTML page

<html>
<head><title>SOURCE_IMAGE_NAME</title></head>
<body bgcolor="#ffffe0">

<center>

<!-- the image -->
<img src="SOURCE_IMAGE.JPG" border=0>
<p>

<font face="verdana, helvetica" size="+0" color="#660000">

SOURCE_IMAGE_NAME
<p>
<a href="THUMBNAIL_PAGE">Return to thumbnails</a>
<p>

<!--previous / next stuff -->
<a href="PREVIOUS_PAGE.HTM">PREVIOUS_PAGE_NAME</a>
&nbsp;|&nbsp;
<a href="NEXT_PAGE.HTM ">NEXT_PAGE_NAME</a>

</font>

</center>

</body>
</html>

    As you can see, this is much simpler than even the very simple thumbnail page. (view it)

Merging the source page with the template

    As with the thumbnail page, we need to copy this entire HTML page into the template. This time, we'll put it in the @:sourcepage section, between the @+ and @-, replacing whatever's there already.

    So, the @:sourcepage section looks like:

####
# Source page definition
@:sourcepage
@+
<html>
<head><title>SOURCE_IMAGE_NAME</title></head>
<body bgcolor="#ffffe0">

<center>

<!-- the image -->
<img src="SOURCE_IMAGE.JPG" border=0>
<p>

<font face="verdana, helvetica" size="+0" color="#660000">

SOURCE_IMAGE_NAME
<p>
<a href="THUMBNAIL_PAGE">Return to thumbnails</a>
<p>

<!--previous / next stuff -->
<a href="PREVIOUS_PAGE.HTM">PREVIOUS_PAGE_NAME</a>
&nbsp;|&nbsp;
<a href="NEXT_PAGE.HTM ">NEXT_PAGE_NAME</a>

</font>

</center>

</body>
</html>
@-

    The first thing we need to do is to replace all of those capitalized mock-up links with ThumbNailer expressions. This is fairly straightforward:

    SOURCE_IMAGE_NAME - This is the filename of the source file. ThumbNailer keeps this information in the "srcFile" variable. So, we'll use this expression on the page: &Name(srcFile). Note that we use this in two places on the template.

    SOURCE_IMAGE.JPG - This is a reference to the source image file. In this case we need to know the path to the file (not just its name, as above). So, as with the thumbnail files, we'll get the relative path from the page to the file, and put that in quotes: &Q(RelFile(srcFile, srcPage)).

    THUMBNAIL_PAGE - Here we need a link to the thumbnail page, using a relative path, quoted: &Q(RelFile(thmPage, srcPage)).

Previous / Next

    The rest of the capitalized mock-up links are in the previous and next block. As with the thumbnail sections, we have to move this to the previous / next sections of the template.

@:sourceprevpage

    Copy the HTML that makes up the "previous" link from the @:sourcepage section to the @:sourceprevpage section. Then replace that HTML in the @:sourcepage with @@sourceprevpage.

    Now the @:sourcepageprev section should look like:

####
# Source page previous page link
@:sourceprevpage
@+
<a href="PREVIOUS_PAGE.HTM">PREVIOUS_PAGE_NAME</a>
@-

    Now, let's replace those mock-up tags with ThumbNailer expressions.

    PREVIOUS_PAGE.HTM - We need the relative path from the current source page to the previous source page, quoted, so we use &Q(RelFile(prevPage, srcPage)).

    PREVIOUS_PAGE_NAME - This is the name of the previous source page: &NoExt(prevPage). We use &NoExt(…) here instead of &Name(…) because we don't want to see the file extension on the link.

    Now the @:sourcepageprev section should look like:


####
# Source page previous page link
@:sourceprevpage
@+
<a href=&Q(RelFile(prevPage, srcPage))>&NoExt(prevPage)</a>
@-

@:sourcenextpage

    This is essentially the same as the previous section. Copy the HTML that makes up the "next" link out of the @:sourcepage section and put it into the @:sourcenextpage section. Replace that HTML with @@sourcenextpage. Use the same expressions as above, except with "nextPage" instead of "prevPage".

####
# Source page next page link
@:sourcenextpage
@+
<a href=&Q(RelFile(nextPage, srcPage))>&NoExt(nextPage)</a>
@-

@:sourcepnsep

    As with the thumbnail page, we need to add the previous/next separator.

####
# Source page previous / next separator
@:sourcepnsep
@+
&nbsp;|&nbsp;
@-

    And, then we need to add the @@sourcepnsep to the @:sourcepage section. And that's it. 

    Here's the compete @:sourcepage section:

####
# Source page definition
@:sourcepage
@+
<html>
<head><title>&Name(srcFile)</title></head>
<body bgcolor="#ffffe0">

<center>

<!-- the image -->
<img src=&Q(RelFile(srcFile, srcPage)) border=0>
<p>

<font face="verdana, helvetica" size="+0" color="#660000">

&Name(srcFile)
<p>
<a href=&Q(RelFile(thmPage, srcPage))>Return to thumbnails</a>
<p>

<!--previous / next stuff -->
@@sourceprevpage
@@sourcepnsep
@@sourcenextpage
</font>

</center>

</body>
</html>
@-

Copyright © 2008, Smaller Animals Software, Inc.