Pier Gallery

Pier is a great content management system for Seaside. It is very easy to write components for Pier (and for Seaside for that matter!) and Pier-Gallery is such a component; a picture gallery, originally written by Damien Cassou. It was good, but not quite what I wanted as it used MAFileExternal to automatically stored files on the server, so I started to hack it...

The current version can now use files contained in pre-existing directories — a useful thing if, like myself, you want to switch your old website to a pier-based one...

Pier-Gallery allows the following:

import pictures simply by uploading a zip
create a gallery, and point to an existing directory on your server to fill it
"square" rendering of thumbnails
thumbnail creation and image resize is automatic and modifiable any time
files in a gallery directory that aren’t images are skipped
when you are logged, simply click on a thumbnail to go to a picture-specific page, where you can do small modifications (hide/show the image, rotate it)
a Gallery-Randomizer component — create a page with such a component embedded, and it will pick an image randomly from your galleries

Installing Pier-Gallery

Note that Pier-Gallery now depends on Rio, you need to install it first.

Load Pier-Gallery in your image using Monticello:

MCHttpRepository
   location: 'http://source.lukas-renggli.ch/pieraddons'
    user: ''
    password: ''

How to use it

In your pier site, add a new component, and in the list choose =Gallery=. The second screen show you a form with different fields you need to fill:

Root Pictures Path
Root local pictures path
Gallery Directory Name
image width (in px)
thumbnail width (in px)
Number of pictures per page
title
description

At the moment, Pier-Gallery expects all your pictures to be stored in the same local directory — i.e. you will have a "root" folder on your server containing all your galleries. This directory is the one indicated by "Root local pictures path" (e.g. /var/www/galleries); the "Root Pictures Path" indicates the corresponding http path (e.g. http://myserver.com/galleries).

The rest of the parameters are straightforward — "Gallery Directory Name" indicate the folder your gallery will be stored in (e.g. "mygallery" will resolve to "/var/www/galleries/mygallery" and "http://myserver.com/galleries/mygallery"). "image width" indicate the size of the pictures displayed (if a picture is larger it will be resized), and "thumbnail width" indicates the size of the thumbnails in the gallery view.

Gallery commands

Once your gallery is created, if there are already pictures in the directory you indicated it will load them. Otherwise, you can always click on the "Import Local Pictures" command at any time, which will refresh the gallery (if you added pictures in the directory in the meantime). The other command you can use is "Import Zip with pictures" - you can upload a zip file containing pictures (note that the images have to be at the root of the zip - e.g. they cannot be in a directory inside the zip). The pictures will then be extacted and saved in the gallery’s directory.

Image actions

If you are logged in, you can click on any image in your gallery. This will show you the image along with a few commands:

prev: go to the previous image
next: go to the next image
hide the image
rotate left
rotate right
regenerate

As expected, "hide the image" will hide it from the gallery (you can always come back to the image page to show it), and the rotate commands will rotate the image. The "regenerate" command will force a regeneration of the image representation and its thumbnail — this normally should not be necessary...

PGGalleryRandomizer

This component (created by Add->Component->Gallery Randomizer) will randomly choose a picture in your gallery and display it. As it can be embedded in a page (simply write the path of your component surrounded by +, e.g. +/myrandomcomponent+ in a page), this allow you to display a random picture taken from your galleries...

The only thing you have to do is to create the component, and add galleries as children. A useful trick is simply to go to an existing gallery and use the "Copy" commands. In the copied gallery you can independently hide pictures you don’t want to be used by the random component.

Note that the component expects to be at the same level as your galleries, so that it generates a link to the right gallery associated with the shown image.

Integration with lightbox2

Lightbox2 is a nice script that opens an image link as an overlay on the current page. Pier-Gallery automatically tag the images with rel=’lightbox[set]’, so you just need to load the css and javascript to be able to use it.

As an example:

updateRoot: aHtmlRoot
	super updateRoot: aHtmlRoot.
	aHtmlRoot javascript url: 'http://www.roard.com/lightbox2/js/prototype.js'.
	aHtmlRoot javascript url: 'http://www.roard.com/lightbox2/js/scriptaculous.js?load=effects,builder'.
	aHtmlRoot javascript url: 'http://www.roard.com/lightbox2/js/lightbox.js'.
	aHtmlRoot stylesheet url: 'http://www.roard.com/lightbox2/css/lightbox.css'