Introduction

Before you read this document, please be familiar with the use of WebExport from a users' side (by reading the user's guide). The developer's side is not difficult, and you could potentially learn everything you need to know just by looking at sample templates. This document is meant as a primer and as a reference.

gallery.html

<html><head>
<title><?title?></title>
</head><body>
Gallery Title: <?title?><br/>
Gallery Author: <?author?><br/>
<cells>
Image Title: <?title?><br/>
Image Author: <?author?><br/>
Image:<img src="<?image(300,200,'t')?>" /><br/>
</cells>
</body></html>

The most basic template possible, would just be an empty folder with one file, gallery.html, which would look like the code presented to the right. HTML tags are left alone by the python interpreter, with a few exceptions:

The <?title?> block is interpreted as a microscopic python file, and simply returns the contents of the variable named "title" and puts it in the document, which in this case can be two things, the title of the gallery, or the title of the image, depending on context.

The <?author?> block simply inserts the author in the same way. It knows by context if you are talking about an image or about the gallery.

The <?image(300,200)?> tag is also evaluated as a small python statement, calling the function named "image". The image function returns a link to an image file with the given attributes, in this case image(width,height). This link is pasted directly inside the <img/> tag. It doesn't matter how many times you use any tag, so you could very easily do this: <img src="<?image(300,200)?>" alt="<?title?>"/> adding the alt attribute for HTML compliance.

The <cells> block has special meaning, even though it looks like a regular HTML tag. It tells WebExport that you want to repeat a section of code for every image in your export. It simply repeats whatever is between <cells> and </cells> for every image, making sure that <?title?> and its ilk all point to the current image, and not the gallery. If you want to access the name of the gallery anyway, just put an underscore under it, like this: <?_title?> and <?_author?>

Digging Deeper: Closeups

You are probably not satisfied just having the ability to generate a list of photos. Chances are, you want people to be able to click on things to bring up larger views of the images, view more detailed information, or other common things. You are in luck! This is what <?closeup()?> is for!

gallery.html (differences)

...
Image: <a href="<?closeup()?>">
<img src="<?image(300,200,"t")?>" />
</a>
...

Check out the code to the right. Notice anything? I added a simple HTML tag with a little extra: <a href="<?closeup()?>"> and </a> The <a> tag you should be familiar with, and all the <?closeup()?> tag does is paste the result of the closeup() function, which happens to be a relative URL to a closeup page! Well, what exactly is it linking to? If you use the closeup() function, you must supply a closeup.html file, which is the template for all closeup()s

If you looked carefully, you may have noticed the difference in the <?image(300,200,"t")?> tag. I added an extra argument to the image() command. Because of the way that the image() tag works, it returns a link to an image that is the same filename as the source image. If you have different sizes of the same image, you have to prefix it with something different in each case. Since we are going to have a closeup here, we need a prefix for the thumbnail version (hence "t"), and later, a prefix for the larger size one (hence "l", which we'll get to). You can also make separate directories to place images in, if you add them in the template folder. So, "images/large/" is a perfectly acceptable prefix, as long as the images/large/ folder exists.

Anatomy of a closeup.html file

closeup.html

<html><head>
<title><?_title?> : <?title?></title>
</head><body>
<a href="<?gallery?>">gallery</a>
<a href="<?next()?>">next</a>
<a href="<?prev()?>">prev</a>
<?_title?>:<?title?> by <?author?><br/>
<img src="<?image(500,400,'l')?>" /><br/>
<?comment?>
</body></html>

This is the code for closeup.html, which defines the look of the closeup views of photos. This is a very bare bones one, without any styles, links, buttons etc. Here's a run-down of everything in it.

The <?_title?> block references the website-wide title, as opposed to the photo title, just as it would between the <cells> and </cells> tags.

The <?title?> just links to the photo's title.

The <?gallery?> block links to the current gallery, and <?prev()?> and <?next()?> insert links to the next and previous closeups. The whole set of closeups loops, so on the last one, "next" will link to the first, and vice-versa. Check out the advanced documentation for more info on how to change this.

The <img src="<?image(500,400,'l')?>" /> works the same as it did in the gallery, but you'll notice the size is larger, and the prefix is different. This is to differentiate between the two sizes of images.

Putting It Together: A Working, Simple Template

First Template Steps

Make a new directory in WebExports template dir (~/Library/Application Support/WebExport/). Call it "simple" or whatever else you want. Put your gallery.html and closeup.html from earlier inside it (or download the package: simple.tgz). Once you have your two files in there, you are ready for your first experiment. Fire up iPhoto, select some photos you want to export, and select "Export" from the "File" menu (the rest of this segment requires WebExport to be installed).

Using Your Template

The Product Directory

Select the "WebExport" tab, and select your template at the bottom of the window. Click Export, and select a directory to export into. Any directory will do, I personally like to use the /tmp directory, because when you reboot, it gets emptied. To get there, hit the slash key in the file selector window ('/'), and type "/tmp". Make a directory in this one, and select it. You will export into this directory, so you don't want to spam up a directory. Click "OK", and let the progress window go through.

Now you have created your first templated export. Navigate to your directory (if it's in /tmp, you have to use Command-Shift-G to get there). Once there, you should have just a ton of files all in one directory. Very ugly. Open up the index.html file, and check out your gallery. Yuck! It's really gross looking! That's because you haven't added any CSS or other stylings. How to go about doing that is beyond the scope of this document, but for more help check out this excellent float tutorial. If you're totally new to HTML and CSS, you will have to check out the W3C's HTML/CSS tutorials.

Cleaning It Up

gallery.html (differences)

...
<?image(300,200,'thumbs/')?>
...

closeup.html (differences)

...
<?image(500,400,'large/')?>
...
What we've done so far is really messy, and you'd never want this on your server, because there are just too many files in the main directory. The main directory should be for the closeups and gallery files, not the images. A real, packaged template would also have a few finishing touches that make it much more appealing to a final user.

Putting the Files Elsewhere

The only change is to make the single-letter file prefixes into full directory prefixes. The exporter is dumb, if you add a '/' to the end of the path, it will put it in a dir, if you don't, it will just prefix the name of the file. If these directories do not exist in the template folder, they will be created automatically, on the fly, by WebExport.

Another good thing to add is the Info.plist, which tells WebExport the name, description, copyright, and much more.