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.

<!–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.

Comments

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:

    http://www.macmethod.com/Aperturebooks

    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.
    thanks

  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.

    See: http://discussions.apple.com/thread.jspa?threadID=816854

  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.

    http://www.csszengarden.com/

  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?

    Thanks,

    Steve

  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 http://www.derektrucks.com/blog/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. pheromonoes on Tue, 9th Apr 2013 11:18 pm
  40. [url=http://www.smallbusinesswebdesign.co.uk]new jersey small business web design[/url] 1tw1imvl9oyfkur, [url=http://buypheromones.webs.com/]pheromones perfume[/url] 5311 [url=http://sandfilter.tumblr.com]sandfilteranlage ohne skimmer[/url]

    [...] Complete Digital Photography – Customizing Aperture's Web Templates [...]

  41. lightning strikes on Mon, 8th Jul 2013 12:13 am
  42. Can I simply say what a relief to discover somebody that really understands what they
    are discussing on the net. You actually realize how to bring a problem to light and make it important.
    More people should read this and understand this side of
    the story. It’s surprising you are not more popular since you most certainly possess the gift.

  43. Zelda on Mon, 8th Jul 2013 12:16 am
  44. This design is spectacular! You obviously know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost.
    ..HaHa!) Excellent job. I really enjoyed what you had to say, and more than that, how you presented it.
    Too cool!

  45. Osvaldo on Thu, 25th Jul 2013 4:41 am
  46. Having read this I thought it was extremely enlightening.
    I appreciate you spending some time and energy to put this content together.
    I once again find myself spending a lot of time both reading and commenting.
    But so what, it was still worth it!

  47. diesel sunglasses on Mon, 29th Jul 2013 3:56 am
  48. It’s really very difficult in this busy life to listen news on Television, thus I simply use the web for that reason, and get the hottest news.

  49. creating a website html tutorial on Sat, 5th Oct 2013 11:36 pm
  50. Excellent post. I will be going through soe oof these issues as well..

    Here is mmy blog creating a website html tutorial

  51. league of legends on Thu, 3rd Apr 2014 3:33 pm
  52. His presence at the Marsh Firs and his pursuit of
    the carriage taking away Belaretski and Nadzeja give the movie a
    redeeming quality – a hope that when the two of them return, there will be at least
    one person, one friend waiting for them. The effect of a
    single rune is small, but an entire page can make a great hero
    better and a weak hero powerful. With only 11 days until the drawing (June 27th, 2013), there is still time to tell friends that might be interested in winning a Riot Points
    card.

    my website … league of legends

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 Lynda.com



    Composition

    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!