Transmutable Software


Template Tutorial: The Basics

Step Seven: Building image pages

This is a short step, because you already know almost everything there is to know about building a template which results in a page for every image. The same pattern we used to build a page for every location back in step 5 is used to build image pages, with a couple small additions.

Name the image pages

Image page template names must start with "image" and contain an upper case "I" and an upper case "L". As you might imagine, the "I" is replaced with the index number of the image and the "L" is replaced with the index number of the location in which the image is found. For example, if our template file was named "image-L-I.xml" then 93 Photo Street would create "image-1-1.xml", "image-1-2.xml", "image-2-1.xml"... all the way through every image in every location.

Now we use a combination of the image building template from step six and a bit of new code to create listing 13, which we will save as "image-L-I.html".

After building with the new image page, you should find that there is a new file for each image which includes the name of the image and an img element. Now we'll change the location pages so that the image thumbnails link to the proper image pages by saving listing 14 to "location-L.html" and rebuilding.

You have completed the tutorial

You can now build all of the pieces and parts of a photo map template: region maps, location markers, location pages, detail maps, photo images, and image pages. Mixing and remixing those elements together, you can recreate any existing photo map and design entirely new styles. You want to make photo maps that look like they were printed in 1906? Grab some old map scans and remix! You want your photo maps to have the same design as your web site? Grab your old HTML and remix!

The next step mentions a few "extras" that can put a bit of extra polish on a photo map. They are not requirements, but they are fun and it would be a shame to end a tutorial without at least mentioning them.


<<Step Six: Building images | Step Eight: Extras>>