ImageGalleryPlugin

Description

This plugin helps you in viewing pictures that are attached to a topic in a nice thumbnail gallery. Clicking on a thumbnail zooms the image. You might navigate within your images using a navigation toolbar to visit the next, previous, first or last image in your gallery. Images and thumbnails are resized according to the given settings and are cached thereafter. The order of images can be customized by putting a sequence number into the attachment comment. An image attachment can be managed by clicking on the red dot in its title. The plugin will generate the document relations "parent", "first", "last", "next", "previous" for each image to improve navigation (only a few browsers support this, e.g. mozilla). The image gallery is highly customizable using cascading stylesheets and html formats (see below).

Example

There are 7 images at TWikiLogos.

Syntax

Arguments

This plugin introduces two tags:

• %IMAGEGALLERY{...}%: render an image gallery
• %NRIMAGES%: returns the number of images attachted to a (list of) topics

that both take the following arguments:

Argument	Description
topic	comma separated list of topics whose attachments should be displayed (default: the current topic)
size	the thumbnail size, the actual geometries of a size can be configured below; possible values: tiny, small, medium, large, huge (default: medium)
columns	number of thumbnais to be displayed in one row of the gallery (default: 4)
docrels	flag to disable/enable document relations between images; possible values are on, off, 0, 1 (default: on)
maxwidth	maximal display width of an image; images are scaled not to exceed this limit while preserving aspect ratio (default: 640)
maxheight	maximal display height of an image (default: 480)
minwidth	minimal display width of an image; images are scaled not to fall below this limit while preserving aspect ratio (default: 0)
minheight	minimal display height of an image (default: 0)
format	html format of an image (default: <a href="$origurl"><img src="$imageurl" title="$comment" width="$width" height="$height"/></a>)
titles	toggles image and thumnail titles on and off (default: on)
title	html format of an image title; "off" will hide the image's title (default: $comment ($imgnr/$nrimgs) $reddot)
thumbtitle	html format of a thumbnail title; "off" will hide the thumbnail's title (default: $comment $reddot)

Note, that only topic is meaningful to %NRIMAGES%.

Variables

The parameters "format", "title" and "thumbtitle" can use the following variables to refer to image properties:

Variable	Description
$web	the web the image is located
$topic	the topic the image is located
$nrimages	the total number of images in the gallery
$n	a linefeed
$reddot	render a red-dot anchor to access the attachment
$width	the display width of the image
$height	the display height of the image
$thumbwidth	the thumbnail width of the image
$thumbheight	the thumbnail height of the image
$origwidth	the original width of the image
$origheight	the original height of the image
$size	the size of the image
$sizeK	the size of the image in kilobytes
$comment	the comment of the image (with its sequence number stripped off)
$imgnr	the sequence number of the image
$date	the date when the image has been uploaded
$version	the version of the image attachment
$name	the filename of the image
$wikiusername	the wikiusername who uploaded the image
$username	the username who uploaded the image
$imageurl	the url path of the display image
$thumburl	the url path of the thumbnail image
$origurl	the url path pointing to the original image attachment

Query Parameters

The IGP will check for certain query parameters in the url. These are:

• id=<n;>: distinguish multiple IMAGEGALLERYs in the same topic
• filename=<name>: display the given file of the image set
• refresh=on: recompute all images and thumbnails in the IGP cache

Each IMAGEGALLERY has an anchor, namely a <a name="igp<n>"/>, that is used to scroll the display appropriately.

Customization

First of all this plugin should come with reasonable default values, so that you will get a nice image gallery (with regards to my taste) right on. There are several things that are customizable:

• customize a gallery using a compination of the arguments described above
• add custom cascading styles in a topic to format the gallery
• alter the default cascading styles in the styles.css file attached to this topic
• customize the plugin settings below

Cascading Stylesheets

The plugin emits the following css classes (see the comments in the styles.css file):

Class	Description
igp	division for the complete output of the image gallery
igpThumbNails	division of all thumbnails
igpThumbNailsTable	table of thumbnail images
igpThumbNail	table cell of one thumbnail image
igpThumbNailTitle	table cell of the thumbnail title
igpPictureTable	table of the display image and the navigation bar
igpPicture	table cell of the display image
igpPictureTitle	division of the title of the display image
igpNavigation	table cell of the navigation bar
igpRedDot	span surrounding the red dot
igpAlert	span surrounding error messages

Adjusting the image sequence

By default the image gallery will display images in the order that they where uploaded. This determines their natural order. When you want to change this order you can prefix the comment of the attachment with a sequence number. For example: given a picture whose comment is "My old bike" that should be put at position 12 in your image gallery then change the comment to "12 - My old bike". This will put the image at the desired position. Sequence numbers don't necessarily need to be unique, that is if there's another picture with a comment like "12 - My new bike" then the natural order of the both is relevant. In general, a picture will be put at position <nr> if its attachment comment has the format

  <nr><space>-<space><comment>

Note, that the $comment variable will only display <comment> , that is with <nr><space>-<space> stripped off.

Plugin Settings

• Names and sizes for thumbnails (feel free to add additional entries or to modify these defaults)
  • Set TINY = 25x25
  • Set SMALL = 50x50
  • Set MEDIUM = 95x95
  • Set LARGE = 150x150
  • Set HUGE = 250x250

• cascading style sheets
  • Set STYLE = /pub/System/ImageGalleryPlugin/style.css

• One line description:
  • Set SHORTDESCRIPTION = Displays image gallery with auto-generated thumbnails from attachments.

Plugin Installation Instructions

• Download the ZIP file from the ImageGalleryPlugin home
• Unzip = ImageGalleryPlugin.zip= in your twiki installation directory. Content:

  File:	Description:
  data/TWiki/ImageGalleryPlugin.txt	plugin topic
  pub/TWiki/ImageGalleryPlugin/style.css	cascading style sheets
  lib/TWiki/Plugins/ImageGalleryPlugin.pm	plugin interface
  lib/TWiki/Plugins/ImageGalleryPlugin/Core.pm	core implementation

• (Dakar) Visit configure in your TWiki installation, and enable the plugin in the {Plugins} section.

Plugin Info

Plugin Author:	TWiki:Main/MichaelDaum
Plugin Version:	v3.1 (14 Sep 2005)
Change History:
14 Sep 2005	don't strictly depend on normalizeFilename()
15 June 2005	new release
10 May 2005	fixed igp id clash error found by TWiki:Main/MartinCleaver; capture ImageMagick error messages; don't trust attachment info - check for attachment existence aswell ; added refresh query parameter to recompute images
09 May 2005	fixed errors reported by TWiki:Main/MarcelTrap; added support for multiple topics (proposed by TWiki:Main/MartinCleaver; added %NRIMAGES% tag
	fix error when called from within rename view
03 May 2005	fixed thumbnail resizing; reintroduced titles parameter; support for multiple galleries per topic
27 Apr 2005	complete rewrite
1 Aug 2003	Updates from feedback from a Windows installation
25 Jul 2003	Initial version posted to TWiki.org
15 Mar 2002	Initial (internal) version
CPAN Dependencies:	Image::Magick
Other Dependencies:
Perl Version:	5 something ? (not sure--i'm using 5.8.0)
Plugin Home:	TWiki:Plugins/ImageGalleryPlugin
Feedback:	TWiki:Plugins/ImageGalleryPluginDev

-- TWiki:Main.MichaelDaum - 14 Sep 2005