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>
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>
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

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

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/')?>
...
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.