Picasa: Customise Templates

web6.gif

I have a smattering of experience customising templates for Google's Picasa Photo-gallery. If you already know some HTML and CSS then you should not have too much trouble getting a basic gallery going, with thumbnails linking to fullsize images.

I don't claim that what follows is a comprehensive guide to Picasa and templates - but no-one else on the web seems to say very much about the subject, so even my modest contribution might help to get you running. I was using Picasa 2.7 on Windows XPP. See inspirational yoga photos.

Getting Started with Picasa

If you haven't already done so, then create a folder in Picasa containing the images that you want to publish. I tried drag-and-drop to no avail, so do this with File > Add Folder to Picasa. After a few moments thinking, Picasa will show you little thumbnails in its own interface (ie not in a web browser). You can double-click on a thumbnail and replace "Make a caption!" with, well, a caption, of course. This text will get exported to your web gallery.
* Tip: you can use HTML here, but be prepared that a) Picasa automatically applies smart quotes which are not good HTML - you can insert regular quotes if you Copy a quote character in a text editor, then go back to Picasa and use Control-V to Paste it in. b) Your caption will be applied in to HTML TITLE values, so if you have something like <A HREF="www.example.com"> in a caption, this will spoil your TITLE, and you may have to manually edit it out of a page.

The basic Picasa overview

Even if you have not yet created a template, you can get a quick feel of the process as follows:

  • Click a few of your pictures (Control-click or shift-click work as well). You could click them all but that takes longer if you have lots, you may as well save time while you are iterating your design.
  • Right-click over the name of your folder in Picasa, and choose the last option "Export as HTML Page..." from the context menu (fly-out menu).
    The Picasa export option
  • In the dialog box, make choices about image size of ultimate images (ie on their single pages), a title and folder location for the results. Click the "Next" button.
  • Picasa offers you some choices of templates, and shows you a small preview of their style. Later on, your template will appear here. For now, just choose something. Click the Finish button.
  • Picasa will build an index.html and several targetNN.html pages on your target folder, along with companion files such as CSS and images. It will also open your internet browser with a new page viewing your index of thumbnails.

That's it! You are the proud owner of a web image gallery which you can upload via FTP to your website.

Customise / Modify your Picasa Web Template

Here's the point where (if you are like me) you want to roll up your sleeves and get your hands dirty with some customisation of the look and feel. Use Windows Explorer to find the Picasa templates folder, which is something resembling C:\Program Files\Picasa2\web\templates. You will see one folder devoted to each template or theme. In my installation (as of v 2.7, 2008) there are a pair of folder for three colour backgrounds: black, grey and white. One member of the pair is devoted to a 2-page system, where you have an index page of all the thumbnails, and can click on a thumbnail to show a new page with the large-size image. The other member of the pair is for a frame system: the thumbnails show in a tall scrollable column down the left-hand side, and you click one to show the large-size image at right, on the same page. I am not a big fan of frames though I wouldn't want to marshall a strong argument against them in this case. Suffice it to say, the rest of this discussion is based on the two-page template, but it should help you even if you adopt the frame system.

Pick an existing folder and copy and paste the folder to a new name of your choice, say "Fluffy Photos". Work there from now on, using a standard text editor (not Microsoft Word or other fancy app). (I greatly recommend UltraEdit.) For the two-page system, there are two ".tpl" files; index.tpl which supervises the thumbnail page, and imagetarget.tpl, which supervises the pages that hold your full-size images. Call these the target pages.

  • Edit index.tpl. In the first line, there is an argument starting with -n This value in quotes gives the visible name of your template. Change that now to eg "Fluffy Photos". If you do not, then, when Picasa offers you a choice of templates, you will not be able to distinguish your own from the template which you cloned to get started.
  • Scanning the rest of the .tpl file, you will probably quickly figure out how things work. The main thing to notice is which .html files are used to build the page: by default, the index is assembled from:
    • header.html
    • imagelistheader.html
    • targetlistheader.html
    • includedtarget.html [inside a loop through your images]
    • footer.html
    And by default, the target page is assembled from:
    • itemheader.html
    • targetlistelement.html
    • footer.html
    In my extreme denseness, it was a while before I realised that the .tpl controlled these includes, and was cursing the fact that I got the same footer for index and target pages, which was quite inappropriate for my purpose. Happily, all I needed to do was nominate a new file for a separate footer and I solved the problem.
  • From here on, you have free rein. Edit the style.css and assorted .html files. Put your "chrome" images (for buttons, backgrounds and the like) into the assets sub-folder. They will all get copied to your destination folder when you do an export. You will have many iterations in this part,
  • The final grace note to add when you have finished your design is to build a preview page, in file preview.jpg. This is what is displayed in the dialog, when you browse the Picasa themes when you choose your template for export. My Picasa preview

* Tip: Sometimes I found that Picasa did not replace the folder with new contents. This happened for 2 reasons: 1) I had opened a file in that folder in my text editor to make some trial and error changes to the result CSS, for example. 2) I clicked the template option so quickly that Picasa had not had time to delete and re-create the folder before it was required to fill the folder with new results.

* Tip: I wanted my result files to be PHP and not HTML, so that I could include some PHP code. At first I manually renamed the result files, until I realised that Picasa had a good option for me. In each of the two .tpl files, there are lines which define the output filename pattern, viz:
define exportFileName index.html and
define exportFileName target.html.
I simply changed these lines to use a .PHP extension instead.

You will find some succinct reference information about the internal variables (such as itemWidth and isNextTarget) in the short file supplied in your installation, typically: C:\Program Files\Picasa2\web\documentation\index.html.

Top of page