Skip to content
This repository

Base gallery add-on with one view template using different sources: plone, picasa,...

tag: 1.0b7

Fetching latest commit…


Cannot retrieve the latest commit at this time

Octocat-spinner-32 collective
Octocat-spinner-32 docs
Octocat-spinner-32 .gitignore
Octocat-spinner-32 README.txt
Octocat-spinner-32 buildout.cfg
Notes: gdata 2.0.10 doesn't work properly:
please pin the version to 2.0.9


This add-on is gallery add-on for Plone.

It is tested with Plone 4 but it is also used with Plone 3.

This add-on is split in two parts: the UI and components

The goals are:

* Have a simple to customize gallery add-on for plone (non intrusive).
* Use very ligth weight resources
* Don't embed display configuration inside data

User Interface

The user interface has been designed to be easy to customize. Files are located
in the skin directory (easy to customize):

* Zope Page Template to render the html code
* gallery.css: pure css design to display 400*400 photos
* to set the title of the page in display drop down menu
* gallery.js: the javascript integration of galleriffic_.
* gallery_tooltip.png: the tooltip used to display the title/description of the photo

The user interface has many feature:

* resize photo if too big by setting the width or height
* paginate thumbs for navigation (5 by default)
* opacity on mouse rollover thumbs
* play / pause (autostart by default)
* display more than 300 photos without any performance issue
* display title and description throw a smart jquerytool tooltip

There are also two portets, which can be used:

* "Show Galleries" portlet to display random photos from random galleries.
* An itemview portlet to display specific photos.

Components (Backend)


* No custom content type, only views
* Works with lots of photos (is developed to work with +300 photos)
* Ramcache setup with a default key to one hours + modification date
* Works with Folder, Topic and Link content types
* picasaweb_ and flickr_ support.
* facebook support.
* I18N: english, french and german are available use zope.components to provide as much reusable as possible

First we have photo resources. Plone already manage this for you:

* Folder and Large Plone Folder can contains Image
* Topic can be criterized to list only Image
* Link can be sources of photos throw and services.

Next you have the business component: IGallery. This interface is implemented
at two levels:

* As named adapter over IATLink to get photos from picasaweb or flickr.
* As browserview to control the resource (@@gallery)

Folder & Image

Folder and Image content type can be used to build a gallery. Add a folder and
then add every images in it. Once its done come up to the folder and choose
'Gallery view' in the display drop down menu and voila.

The folder gallery component query the portal_catalog and adapts brains to

Topic & Image

Topic can be used to build a gallery. Add a topic and add criteria on the Type
to select only Image. Next choose the 'Gallery view' in the drop down menu and

The topic gallery component use the topic's queryCatalog method to get brains,
then they are adapted to IPhoto


Link can be used to build a gallery. Add a link, set URL to one of the following
services, validate and choose the 'Gallery view' in the drop down menu and

The link gallery component get all named adapters from Link to IGallery and call
the validate method. The first validated adapter is kept as resources.


In Plone, just paste the share link provided by picasaweb inside a Link content
type and display your link content with the view 'Gallery view' available in the
drop down display menu.

SIZES : 32, 48, 64, 72, 104, 144, 150, 160, 94, 110, 128, 200, 220, 288, 320,
          400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600

All metadatas are supported


In Plone, just paste the share link provided by flickr inside a Link content
type and display your link content with the view gallery available in the drop down display menu.

Flickr service is not album centric but photo centric. Supported case:
  It is an album, no problem
  We have the username, return all photos

IPhoto.description metadata is not supported


In Plone as with other link you just have to paste the link inside a Link content

The album must be public.

IPhoto.description metadata is not supported


* Smart image preloading after the page is loaded
* Thumbnail navigation (with pagination)
* jQuery.history plugin integration to support bookmark-friendly URLs per-image
* Slideshow (with optional auto-updating url bookmarks)
* Keyboard navigation
* Events that allow for adding your own custom transition effects
* API for controlling the gallery with custom controls
* Support for image captions
* Flexible configuration
* Graceful degradation when javascript is not available
* Support for multiple galleries per page


Because it is easy to customize, lets write some lines about how to fit gallery
to your needs.

Some advices:

be fixed width. Photo are fixed, you want your gallery to be nice, lets fixed its width.

You can configure in properties the max photo size you want but backends may not support
this settings.

Most of galleries do not contains every photos in the same size or in the same proportions.
Take care of this when you are customizing javascript and css.

All controllers can be placed where ever you want because they are accessed by #id

Gallery is not configurable because it needs to generate javascript and css.
It would make the add-on too much complex to customize. If you want configuration take
a look at plonetruegallery_

To register the "Show Galleries" portlet, you can add the following xml snippet
to your portlets.xml Generic Setup file:::

      <property name="search_portal">True</property>
      <property name="num_pictures">1</property>
      <property name="image_size">mini</property>

You want more ?

The picasaweb and flickr services let you embed a flash slideshow to display your photos.
Views are already available to use those services:

* @@gallery-picasaweb-slideshow
* @@gallery-flickr-slideshow

But they are not integrated in the Plone UI.


This add-on is use in production here and there:



* [1.0] finish the css
* [1.1] exif integration
* [2.0] add photos
* [2.0] search photos
* [2.0] collective.harlequin as an extra dependency




  * `Planet Makina Corpus <>`_
  * `Contact us <>`_


  - JeanMichel FRANCOIS aka toutpt <>


  - Johannes Raggam <>

.. |makinacom| image::
.. _makinacom:
.. _Galleriffic:
.. _flickr:
.. _picasaweb:
.. _jcarousel:
.. _Pikachoose:
.. _facebook:
.. _plonetruegallery:
Something went wrong with that request. Please try again.