Customizing Aperture’s Web Templates

Posted by & filed under Features.

Apple’s Aperture provides a large assortment of output options. In addition to straight printing, you can create on-screen slide shows, books, and two kinds of web galleries. Pre-built themes are provided for books, web galleries and web journals. While Aperture includes no built-in facility or documentation for creating your own templates, if you’re comfortable with Cascading Style Sheets and HTML, you can edit the built-in web gallery templates to create customized designs.

<!–more–>

Aperture’s web gallery templates rely on CSS for their type, color specifications, and some layout options, which means you can easily customize any existing templates by simply editing the associated style sheet. If you want to create entirely new designs, then you’ll have a little more work on your hands, because some options are created procedurally within Aperture, and are based on parameters stored in PList files. While it’s easy enough to edit these parameters, getting them to render properly is difficult. Apple has not documented its template formats, so the information provided here is based entirely on tearing the appropriate files apart to try to see how they work.

Creating a New Template

The easiest way to create a new Web Gallery template, or to modify a current one, is to duplicate one of the existing templates. These provide the easiest, safest starting points for any edits that you might want to make.

Web Gallery templates are stored in the Aperture package (which, by default, is in your Applications folder). To open the package, right-click (or control-click if you don’t have a two-button mouse) on the Aperture application, and choose Show Package Contents from the context menu.

The Aperture package will open as a normal Finder window. For those of you who haven’t worked with packages before: they’re just the same as a normal folder. The Aperture "application" is really a folder that contains lots of other folders, documents, and resources.

In the Aperture folder, navigate to Contents:Resources:Enligh.lproj:WebThemes

Inside, you’ll find six different folders, one for each theme that Aperture includes. Each theme covers both Web Galleries and Web Journals.

Choose the theme that you want to customize and duplicate its folder. If you are hoping to create a new theme, then it probably doesn’t matter which theme you choose as a base.

Rename the duplicate folder to the name of your theme. This is the name that will appear in the Theme dialog box whenever you go to choose a new theme.

Customizing a Theme

Unfortunately, Aperture’s themes are not all uniform in their design and organization, so you need to do a little investigation to figure out exactly where the style sheet is that your theme uses.

The Art Collection, Special Occasion, and Proof themes use three different HTML files for their layouts. detail.html contains the layout for the themes’ Detail pages, gallery.html provides the index page layout, and journal.html holds the layout for the Web Journal.

The Stock and Stock Black themes provide detail.html and journal-gallery.html – a single template that covers the Web Gallery index page, and the Web Journal page.

Finally, the Proof theme provides detail.html, gallery.html, and journal-gallery.html.

If you only want to change color schemes, type specs, and CSS-based formatting options like padding and margins, then you won’t probably won’t need to deal with any of these HTML files, as you can make your changes by editing the Themes’ CSS file.

No matter what theme you’re using, the CSS file is kept in the assets:css folder inside the theme folder. The Stock, Stock Black, Proof, and Special Occasion themes all use a CSS file called global.css. The other themes use separate CSS files for the Index and Detail pages. Check the HTML files to find out which CSS file you should edit.

To edit the CSS file, simply open it in a text editor or HTML editor and change the appropriate tag.

For example, to make simple type and color changes to the Stock and Stock Black themes, you would edit the following tags.

To change the background color of the page, edit the background-color field in the body tag.

To change the color and type style of the Image name, edit the h2 tag.

To change the color and type style of the site title, edit the h1 tag.

To change the color and type style of the Index page link, edit the ul#nav li a, ul#nav li a:visited tag.

To change the image info text style, edit the .imageinfo, .imageinfo a, imageinfo a:visited, .imageinfo a:active, .imageinfo a:hover tag.

To change the style of the site subjeading edit the .journaltitle tag.

Here’s a simple example of an edited Stock theme.


Editing Site Layout

The best way to create a new layout is to re-arrange the existing elements in one of the stock themes. Many page elements, such as metadata display and navigation controls, are held by placeholder tags that Aperture replaces when the site is built. For example, _metavalue_ is used as a placeholder for the metadata set that the user selects within Aperture. Similarly _PreviousPageNumber_ and _NextPageNumber_ are used as page number placeholders. Each of these elements are styled using a stylesheet entry.

Right now, Aperture Web Galeries are fairly simplistic. You can only have one metadata entry per page, so if you want to show the image title on one part of the page, and its caption on another, you’re out of luck.

There are some other oddities that I haven’t yet been able to figure out. For example, on Detail pages, photos are kept in a table entry, with their width and height specified in the image tag that is included in the table. However, editing these values does not necessarily change the size of the final photo. Trying to use absolute placement of DIV layers is also problematic.

Note, too, that your layouts may look very strange when displayed in Aperture. To find out what they really look like, you need to build out your site.

As detailed here, I build the web galleries on this site using iView MediaPro and a custom HTML Export template of my own design. I tried to replicate that template within Aperture, but ran into several problems. First, the lack of multiple metadata fields makes it impossible to display the image title above the image, and a caption, or shooting specs below.

Second, I still can’t get the images to appear at the correct size, and I’m having trouble with the positioning of some other image elements. You can see an unfinished attempt here.

Other Customizations

Inside the assets:img folder within your theme, you’ll find all of the images that are used as navigation icons. You can replace these with your own icons, but remember to adjust the image size fields in the appropriate HTML files.

In the Aperture Web Gallery editing interface, the user can select which metadata set they would like displayed in the metadata field of the gallery. You can change the default by editing the following field in the albuminfo.plist file

Root>Templates>[template number]>metadataSetDefault>keys>0

Most themes have four template numbers, each template number includes a field called fileName, so just check each template until you find the one that has the file name – detail, gallery, etc. – that you’re looking for.

To edit the albuminfo.plist file, you’ll need a plist editor, such as the one included with XCode, the free development tools provided with the MacOS.

Note that the albuminfo.plist file also contains height, weight, and maximum/minimum height and width fields. I’ve tried editing these in an effort to get my images to appear at the right size, but so far they don’t seem to have any effect.

Finally, when you click the Theme button within Aperture, a dialog box is displayed showing thumbnails of each theme. The thumbnail for a theme is kept in the thumbnail.tiff file inside the main theme folder. If you want to create a custom theme, just take a screenshot of a finished page, and scale it to 90 x 105 pixels, then place it in your theme folder with the name thumbnail.tiff.

To use a theme, quit Aperture, place your new theme folder in the WebThemes folder inside the Aperture package, and restart the program. Go to a Web Gallery and click the Theme button to choose a theme. The theme should appear in Aperture’s Theme dialog box using the name of the folder that contains it.

Help!

This is, of course, far from a comprehensive detailing of how to customize your themes. Hopefully, you’ll find that the information provided here gives you a good starting point. The easiest way to learn more is to start playing with a copy of an existing theme. It’s not hard to map out exactly what each style sheet tag does.

I’d certainly love to hear from anyone who hacks more of Aperture’s layout scheme, so please don’t be shy about posting your own results and discoveries.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>