Customizing Aperture’s Web Templates

May 16, 2006 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.


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.


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.


30 Comments on Customizing Aperture’s Web Templates

  1. Jay Rubin on Mon, 29th May 2006 8:08 pm
  2. This was good stuff. Ideas about customizing Aperture book templates? All suggestions appreciated.

  3. Rafael on Mon, 29th May 2006 10:23 pm
  4. 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”.

  5. Rafael on Wed, 31st May 2006 11:55 pm
  6. I got it… “journal-gallery.html” is for both journal and gallery! simple!

    [...] In this article, I showed how you can edit and customize the underlying template documents that Aperture uses to create web galleries and web journals. These tricks rely on editing the HTML and CSS template documents that are stored inside the Aperture package. There are similar template files for Aperture’s book designs, but because of the flexibility of Aperture’s book editing tools, you don’t need to edit Aperture’s default book files – you can simply edit the book designs within Aperture itself and use a few simple tricks to overcome Aperture’s book layout shortcomings. [...]

  7. scott on Sun, 4th Jun 2006 1:14 pm
  8. i’ve created a few customized Aperture Book layouts. you can check them out here:

    there’s a lot of XML and reverse engineering is very time consuming, but it can be done.

  9. Pierrot on Thu, 29th Jun 2006 7:12 am
  10. 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 !

    [...] Well, tonight it looks like I have struck gold!!! Just on a whim, I decided to do another search for customizing the web galleries and I found the following article by Ben Long. [...]

  11. tobias on Sun, 30th Jul 2006 6:49 pm
  12. 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

    [...] Complete Digital Photography » Customizing Aperture’s Web Templates (tags: aperture photography mac css themes software howto web webdesign photo osx design apple) [...]

  13. matt on Mon, 8th Jan 2007 7:50 am
  14. 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.

  15. Aldaron on Wed, 17th Jan 2007 2:33 pm
  16. Be warned though: there are serious bugs in the code that generates the web pages from the templates. These can result in all kinds of strange output if you use any scripts in your custom templates.


  17. orat on Tue, 25th Sep 2007 4:07 pm
  18. 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.

  19. Mike Holdsworth on Mon, 2nd Jun 2008 6:29 am
  20. 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.

  21. hanno keppel on Fri, 13th Jun 2008 9:21 am
  22. 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???

  23. koby on Sun, 16th Nov 2008 1:15 am
  24. 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

  25. Steve on Sun, 15th Nov 2009 6:32 pm
  26. 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?



  27. PF on Wed, 18th Nov 2009 7:49 pm
  28. 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.

  29. Ben Long on Thu, 19th Nov 2009 1:23 pm
  30. 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.

  31. Kevin A Petersen on Tue, 26th Jan 2010 2:35 pm
  32. 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.

  33. Michel Collot on Sun, 28th Mar 2010 9:07 am
  34. 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…

  35. Dreadneno on Tue, 3rd Aug 2010 11:57 am
  36. kendra wilkinson nude kendra wilkinson nude dance

  37. Home Oxygen on Sun, 12th Dec 2010 5:45 am
  38. Thanks for your effort and hard work!

  39. Aubrey Thompson on Thu, 24th Jul 2014 8:47 pm
  40. Hello, great advice and an interesting article post, it’s going
    to be interesting if this is still the case in a few months time

  41. Nora Peterson on Fri, 25th Jul 2014 1:41 am
  42. Profound piece, I liked the mads electronics smarty part

  43. New Balance Discount on Thu, 4th Sep 2014 1:20 am
  44. I think this is among the most important information for me.

    And i am glad reading your article. But should remark on few
    general things, The website style is wonderful, the articles is really
    excellent : D. Good job, cheers

  45. on Thu, 11th Sep 2014 11:06 pm
  46. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment
    is added I get three emails with the same comment. Is there any way you can remove me
    from that service? Thanks!

  47. Louis Vuitton Bags on Sat, 13th Sep 2014 5:36 pm
  48. Hey there! I’ve been following your site for some time now and finally
    got the bravery to go ahead and give you a shout out
    from Dallas Texas! Just wanted to mention keep up
    the great work!

  49. ninja bo staff on Tue, 16th Sep 2014 7:38 am
  50. For, it helps in enhancement of their physical and mental concentration, co-ordination, endurance and a balanced personality.

    You will become a better fighter when you learn these aspects of self
    defense instruction and training. Beast Boy’s ranged attack increases in effectiveness as Beast Boy progresses through the stages, from the power of a mere goat to
    the strength of a bull in the last stages.

    My web page :: ninja bo staff

  51. Replica New Balance on Thu, 18th Sep 2014 11:32 pm
  52. My spouse and I stumbled over here coming from a different web
    page and thought I might as well check things out.
    I like what I see so now i am following you. Look forward to finding out about your web page repeatedly.

  53. Hay Day Cheats No Survey on Sun, 21st Sep 2014 12:21 am
  54. Anyway, she went back with the guy, I was heartbroken,
    and I was like, “I’m going to show you. Brigham Young was installed as governor of the territory, and Utah became subject to federal laws, including that of Polygamy, which was a felony. It seems daunting at first, like, “How are they going to know.

    my weblog – Hay Day Cheats No Survey

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

  • Nothing Else to Buy!

    Seventh Edition
    Order Now!

    Complete Digital Photography
    by Ben Long.

    Everything you want and need to know about digital photo-
    graphy - from buying a camera, to editing your images, to making your final prints. Completely reorgan-
    ized and loaded with more content than any previous edition!

  • Classes at


    Foundations of Photography
    by Ben Long.

    No matter how good your technical skills are, if you can't frame a good shot, you're going to get a substandard photo. In Foundations of Photography: Composition, you'll work through a series of exercises and lessons designed to build a deep compositional vocabulary. Through as a series of lectures and demonstrations, this course also takes you into a photo classroom so that you can see the work of other students, and watch along through their critiques and assessments. Don't skip out on this essential area of expertise, check out

  • More To Read

    Learn to raw!

    New Edition!
    Order Now!

    by Ben Long.

    Take advantage of your camera's raw mode to shoot better images. For Windows or Mac users of Photoshop CS3, CS4, and Photoshop Elements, this book teaches you everything you need to know about raw shooting.

    Click here for more info!