My goal was to create a web site that combined a few pages
created in iWeb with Aperture web galleries. For something
that should be trivial, it's actually rather difficult.
This document explains one way to do it. You’re looking at
the results!
For purposes of this example, assume that the web site is
located at http://www.foo.com and that gallery home pages
are http://www.foo.com/photography/gallery1/index.html,
http://www.foo.com/photography/gallery2/index.html, etc.
Also assume that the gallery index will be located at
http://www.foo.com/Gallery Index.html and that the Site
Name (defined in the Inspector) is Fred Foobar.
Step 1: Aperture web galleries are dead ends.
Fixing this involves creating a Aperture web gallery style
that contains a link back to a parent directory. To do
this, right click on the Aperture logo and select "View
Package Contents". Then navigate to
Contents->Resources->WebThemes. Select the directory
corresponding to a style that you like and hit Apple-D to
duplicate, then rename it something appropriate, e.g.
FooSub.
I like the Art Gallery style, so these instructions
specifically refer to it. The other styles are similar, but
you're on your own. You can download my files here. Note that they’re from
Aperture 1.5.
Open the gallery.html file in your favorite text editor and
scroll down until you see the text dealing with navigation,
i.e.:
<div id="navrow" style="width: _TableWidth_px;"
removeonsinglepage="yes">
The link to the index must remain visible at all times, so
delete the following portion of the line:
removeonsinglepage="yes"
Insert the following link to the navigation page after
<ul id="nav" rkid="navbar">:
<li class="index"><a href="../../Gallery
Index.html">Gallery Index</a></li>
This piggypacks off the formatting definitions in the CSS
file.
Now, insert the removeonsinglepage="yes" tag into the href
tags for _PreviousPageURL_, _IndexPageURL_, and
_NextPageURL_.
When you fire up Aperture, you'll see FooSub among the list
of styles. Web galleries created using it will now contain
a link back to the gallery index page.
Go ahead and create galleries for your photo sets. When
you're done, you'll have directories called gallery1,
gallery2, etc. Create a directory called
./pages/photography somewhere on your HD and move these
directories into ./pages/photography. You now have
directories ./pages/photography/gallery1,
./pages/photography/gallery2, etc.
The next step involves creating a page in iWeb that links
to the index page for the gallery.
Step 2: Creating a gallery index page
Fire up iWeb and create a page called "Gallery Index". The
page name must match the link you inserted in the Aperture
style file. On that page, create external links to
http://www.foo.com/photography/gallery1/index.html,
http://www.foo.com/photography/gallery2/index.html, etc.
Then publish the site to a folder.
Step 3: Absolute links complicate previewing
The published site contains absolute links to the gallery
pages, which means that you cannot preview them on your
computer. One option is to manually edit the HTML in the
links, replacing "http://www.foo.com/" with "./". If you're
comfortable with the terminal, you can go to ./Fred Foobar
and type the following (you’ll need to change the
“www.foo.com” to your domain):
find . -type f -exec sh -c 'echo {}; sed
"s/http:\/\/www.foo.com/\./g" "{}" > qqfile; mv qqfile
"{}"' \;
You can safely skip this step if you're okay going live
with the pages without previewing.
Step 4: Assembling Frankenstein
Pop open two Finder windows. In one, go to ./Fred Foobar
and in the other go to ./pages. Copy the contents of ./Fred
Foobar (you'll see Gallery Index.html and a few files and
subdirectories) into ./pages. Disregard the index.html file
located next to ./Fred Foobar in the directory hierarchy.
Step 5: Test the site
If you've made it this far, you know how to do this.
Step 6: Sync the local directories with your hosting
services
See instructions for step 5. I use rsync over ssh.
I’ve since switched to RapidWeaver and RapidAlbum, which has made life
considerably easier.
Back