While building map images is OK, the interesting part of photo maps is always the photos. The imageBuilder provides you with the ability to build images in any size or shape, but (as with map images) it will only build image files whose URLs are requested by a template.
Taking the location-L.html that we built earlier as the base, we now add a quick foreach loop which will create an img element for each image at a location, demonstrated in listing 12 (save this as "location-L.html").
The two most interesting parts of listing 12 are the $imageBuilder.getHeightOfFixedWidthImage($image, $imageWidth) and the $imageBuilder.getFixedWidthImageRelativeURL($image, $imageWidth) function calls.
The first call returns the height of image when it is scaled to imageWidth. We then use that height in the img element's height attribute.
The second call creates the relative URL to the image file, which the imageBuilder creates later in the build process. We use that URL as the src attribute in the img element.
If you browse through the templates which ship with 93 Photo Street, you will see that imageBuilder is called on to build images for many different purposes. In some cases the first image in each location is used as a small thumbnail on a region map, and in other cases they're built so that they take up the entire portion of the page where the region map is displayed and javascript is used to switch swap them.
Now that you have seen how to build images in one size and shape, you can build them all. So now we move on to the next to last step in this tutorial, building image pages.