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.

22 Responses to “Customizing Aperture’s Web Templates”

  1. Jay Rubin

    This was good stuff. Ideas about customizing Aperture book templates? All suggestions appreciated.

  2. Rafael

    That’s great information! I wonder how to edit the thumbnail view on the theme Stock and stock black since they don’t have the file “gallery.html”.

  3. Rafael

    I got it… “journal-gallery.html” is for both journal and gallery! simple!

  4. Pierrot

    Great information, I use Aperture 1.1.2 and created my own theme from stock black. I also edited a sample journal page to make album indexes. Works like a charm so far !

  5. tobias

    many thanks for a great article!

    i still get a problem with non-english characters. how do i make Aperture export them as proper HTML entities? (i.e. √∂=ö etc)

    best regards, tobias

  6. matt

    Great advice on customizing.Any ideas to a novice how to eliminate the image title,ie image 1,2,3 etc….I find it very annoying and want my site as simple as poss.
    thanks

  7. orat

    I jsut gave up on this and decided to take the easier route, i.e. modifying the output CSS instead. It adds the hassle of having to manually replace the CSS file in resulting sites and, of course, lacks the elegance in a modified template, but I just couldn´t take it any more.

    Editing fields without being rewarded with the logical change in appearance is wearing me down. Please Apple, make the process more transparent in future upgrades.

  8. Mike Holdsworth

    am very new to aperture (about 1 week), but not new to CSS. Its interesting that Apple are so good at designing things, but that the webpage templates are not all that ‘pro’ looking. What would be interesting is if you could export Aperture to Joomlaworks Simple Images Gallery in Joomla CMS. You could then get the CSS from the Joomla template you are using.

    I see there is a plugin to do Simple Image Gallery. In Joomla to use it you simply enter {gallery}/folder with files in{/gallery} and you get an instant simple image gallery.

    What would be cool is if you export the Album in Aperture and it makes a page in joomla with the {galler} codes embedded…

    Also, for those of you who are not familiar with CSS check this out as it shows what is possible.

    http://www.csszengarden.com/

  9. hanno keppel

    thx for the stuff! how can i bring aperture to use the REAL FILE NAME in the (poor looking) aperture galeries instead of picture-1, picture-2?
    any ideas???

  10. koby

    hello maybe someone can assist me i have aperture 2 and all my book files have disappeared from the aperture library although i see their files in the hd how can i retrieve them please !!!! tks koby

  11. Steve

    Great article. I used it to generate a majority of my site galleries.

    You say in this article to “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.” I duplicated the Picture folder and renamed it My Picture, but it appears as though I have two Picture themes in the Themes dialog box.

    Any thoughts on how to resolve this?

    Has anyone created any custom themes other than the Jumsoft themes?

    Thanks,

    Steve

  12. PF

    Thanks for helping me get started.

    Steve, renaming the duplicate folder doesn’t seem to work in Aperture2, as you’ve learned. If you dig into the duplicate theme folder and find Englishl.proj/assets/Localizable.strings, you can edit it with TextEdit and change the name in quotes. That name will then display in the theme list in Aperture.

  13. Ben Long

    Hi Steve, Since I’m not using Aperture anymore, I don’t really recall what it was I figured out here, but it sounds like PF has it working.

  14. Kevin A Petersen

    Do you guys know how to center the detail page? i got the gallery page to center, but the div in the detail page won’t center. I’m using the art collection black.

  15. Michel Collot

    i have problem for integrating paypall function in the template.
    The modified pages are ok when opened by double clic
    Paypall is here. When it is published trough APERTURE everything is gone…

Trackbacks/Pingbacks

  1.  Complete Digital Photography » Customizing Aperture Books
  2.  Customizing Aperture’s Web Templates at ProfeC.net
  3.  FamilyGeek.net » Blog Archive » links for 2006-11-25

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>