I just posted a new photo assignment gallery from my virtual camera club, and doing so reminded me that sometimes you just have to add a little code yourself to create the features you want in Aperture’s web gallery. I use Aperture to create these assignment pages, and just love the functionality it provides… most of the time.
For example, when you click on any of the thumbnails in the gallery, the “view” page displays a bounty of metadata about the photo. All of that data is pulled from the Aperture library, and all I had to do was create a preset to cull the parts I wanted. This works great!
But on the Index pages I want to provide a hot link to the parent site, The Digital Story. I hadn’t found a way to create that link in Aperture (althogh maybe one of you know how), so I’ve been coding it myself after generating the gallery.
I simply open up the index pages (such as index.html) in Text Wrangler and add the follow code to create the link:
Buy adding my own HREF link to the Digital Story, I was able to provide a path back to the original site from the web gallery. Fortunately, most of the code that Aperture generates for its web galleries is easy to understand and alter. However, I don’t understand why they still use uppercase tags.
So if you’d like to add a function or two to your Aperture galleries, consider popping the hood and writing a little HTML. And if you have tips for making those additions an easier way, please share them in the comments area.
You can easily make your own template. See my telephoto lens test page for an example. Not only do I have a link back to my home page, but I maintain the look-and-feel of the rest of my site, including links to numerous sub-pages.
To do this, you need to do some HTML. But you can also embed Javascript, as used by my rollover buttons, which came out of Image Ready.
The scary part is that you have to go "inside" the Aperture application. Make a backup if you're nervous, although if you stay where we're going, you shouldn't damage the application.
Select the Aperture application, use the contextual menu to "Show Package Contents". This will open a window with a single folder, Contents.
Navigate to "Aperture.app --> Contents --> Resources --> Web Themes". In this folder, you'll see all the themes available in the web gallery "Theme:" menu.
Pick one of these that looks the most similar to your own site, although it doesn't matter too much, and duplicate that folder. Name it what you want. I called mine "Bytesmiths" and I use it whenever I make a gallery that will be viewed on my website.
Now go into "Your Gallery Folder -->English.lproj" and edit both "detail.html" and "journal-gallery.html" to make it look the way you want. There is only a dozen or so lines of code that you must leave in to allow this to function as a template.
Now your template shows up in the "Theme:" menu! I did not get into how to make a thumbnail that looks like your new theme, but I'm sure it's just a JPEG somewhere under your gallery folder, and you don't need it to make websites with your new theme.
Wishlist: a way to make dynamic content pages. I use PHP for almost all my pages, from which I include separate elements, like my left-side links, but Aperture apparently only does HTML. Now if I change my links, I have to remember to change the Aperture template, as well.
Yes - most of the Aperture HTML was well below the standard I try to meet. I've been working on a custom export template which uses Lightbox and one of the first things I did was clean up the sometimes inexplicable coding decisions.
Hey Guys, the div tag inside the heading was put there by Aperture, not by me. I just added the href :)
I agree...do not place a DIV tag inside a heading tag.
Thanks you save me from emailing you. The inability to link back to my home page is the only reason I have not used the web gallery in Aperture much. You post will help. My hope is that in 2.0 they will fix this lack of integration
Thanks
Great blog!
But: HTML specifications don't allow DIVs inside headings. If you only want a line break just add a <br>:
<H2 localizable="true">Return to<br><a href="...">The Digital Story</a></H2>
Regards,
Rainer