This started as a personal documentation long time ago… may be it is useful for soemeone 🙂

For Plone 4 a bunch of different gallery products are available. Having tested most of them, see the plone.org products section, for incunabulum.de the following two products were chosen:

• collective.prettyphoto
• collective.plonetruegallery

As personal documentation and may be as help for other interested users, in the following different usage scenarios for these two products are shown.

Plain Galleries

This is probably the most common and simple use case where a bunch of images residing in a common folder should be shown as gallery. For this purpose, both products provide the corresponding views as shown

• here for collective.prettyphoto
• and here for collective.plonetruegallery.

As the album view only shows 12 images on each page (batched), prettyPhoto only shows 12 images at one go. Then you have to select the next page, see this bug report…

For plonetruegallery, please see the settings tab (display type: highside or Fancy Box)

Handling Individual Images

Often, on an indivdual page, small images are shown which are then linked to the full size version which, when clicked, show up some enlarged lightbox overlay. For this purpose, on incunabulum.de the functionality offered by collective.prettyPhoto is used where two different approaches are avaiabele

Rel Statement

Either use the approach mentioned in the prettyphoto documentation and add a rel=prettyPhoto argument to your href statement as follows

<a href="path/to/image/fullsize" rel="prettyPhoto">Title for the Link</a>

and you get:

• Example

Css Statement

Alternatively, you can mark your href statement and use the css class prettyPhoto prodived by prettyPhoto for this purpose. Your html code hence looks as follows

<a title="PrettyPhoto Overlay Test for Single Image Using a CSS Class" 
 class="prettyPhoto" href="path/to/image/fullsize">Example</a>

and results in:

• Example

Galleries for Multiple Images

If the page contains multiple images, you might want to show a gallery overlay where you can browse through such a set of images. For this purpose prettyPhoto offers an solution as follows:

<a href=/path/to/image1/fullsize" rel="prettyPhoto[ImageSetName]">Image 1</a> 

<a href=/path/to/image2/fullsize" rel="prettyPhoto[ImageSetName]">Image 2</a>

Here, a set of images is defined by the statement rel=”prettyPhoto[galleryName]”. In a single page, different independent sets of images can be defined. Upon calling a single link, prettyPhoto presents a navigation over all images of the selected set.

• Example:
  Image 1 Image 2

Tip: If you want only a single visible image yet would like to present a navigation over multiple images, add the other links with empty <a > tags or with blanks.

Links to Complete Galleries

Assume that you have a folder with a set of images somewhere in your site that you want to link to. As a result, you would like to see some gallery overlay (lightbox style) when you activate this link. Herefore, with the products described two different solutions are possible.

PrettyPhoto

Link to the folder containing the images. Here, the user can start the overlay gallery manually

PloneTrueGallery

Use the @@placegalleryview view provided by collective.plonetruegallery while using the prettyPhoto overlay IFrame. This can be done as follows

<a class="prettyPhotoIframe" href="/path/to/image/folder/@@placegalleryview">Link Name</a>

which gives:

• this

Embedding Galleries

Finally, embedding a gallery representation in a page is currently not supported by prettyPhoto. Personally, I doubt that this is feasible, as prettyPhoto mandated that for all images links are present somehwere on the page.

Yet, there is collective.plonetruegallery to the rescue.

<object data="/path/to/image/folder/@@placegalleryview" height="400"  width="500">

<param name="data" value="/path/to/image/folder" />

</object>

And don’t forget to update safe_html as mentioned in the documentation. Namely, change the following

• nasty_tags: object = 0
• valid_tags: object = 1, param = 1

Wishlist

• prettyPhoto: Currently, a plonetruegallery overlay linking to a complete set of images (Example) may lead to nasty scrollbars. This is due to prettyPhoto.js script not adhering to the prettyPhoto properties defined in portal_properties (width, height), see this bug report.
  ><b>Update 201107/13: It seems this issue can be solved by updating the css registry, see the this bug report.
• prettyPhoto: Find a way to directly embed the prettyPhoto view into a page without referencing all the other images somehow. Maybe use the API and provide the list of images as argument. This list could be populated by javacscript somehow…