Control the display and alignment of images using an easy syntax


Use this plugin to control the display and alignment of images using an easy syntax and support for server-side resizing and thumbnailing. There are a set of pre-defined layout formats for images as well as a free layout configurability.

Short example:
You type:

  caption="caption text"

You get:


Images to be displayed can be located

  • at the topic as specified,
  • at the location specified in the IMAGEALBUM preference variable,
  • at the current topic or
  • at a remote URL.

If you specify a remote url using http://... the image is downloaded (using CPAN:LWP::Simple) into a local cache and then processed as usual. WARNING: please be aware of any copyrights of the images you mirror this way.

The topic and IMAGEALBUM parameters can be of the for [<web>.]<topic>. For example putting

   * Set IMAGEALBUM = TWiki.ImagePlugin
into the current topic will search all images at the given topic.


%IMAGE{"foo.gif" ...}%

There are four predefined format types (plain, simple, link, thumbnail, frame, float) that can be used by setting the type paramenter (see below). In addition there is a free-form format parameter to specify any other possible html layout. The Wikipedia format is also supported. See Wikipedia:Wikipedia:Extended_image_syntax.

(hidden feature: %IMAGE{"clear"}% will create a proper clear for your floats wink )


The image name is mandatory. Further arguments are optional.

Name Values Default
align left|center|right|none right
alt alt text image filename
caption caption text empty
class (see html specs) imageFrame, imageFloat, ... depending on the type
desc description text title text
footer text to be appended to the html output empty
format image layout format string set by type argument
header text to be prepended to the html output empty
height integer value image width
href hyperlink when clicking on the image url of the source image
id (see html specs) empty
mousein javascript executed if moving the mouse over the image empty
mouseout javascript executed if moving the mouse off the image empty
size geometry specification image geometry
style (see html specs) empty
title title text alt value
topic valid TWiki topic name topic part of IMGALBUM value or current topic
type simple|link|thumb[nail]|frame|float" plain
web valid TWiki web name web part of IMGALBUM value or current topic
width integer value image width
warn on/off, surpress error warnings on

Image geometry

The image geometry in the size parameter can be specified in a format <width>[px][x<height>[px]], that is width and height can be given as integers with an optional px, where the height is optional, separated with a 'x' in between. Note, that the given width and height values are the maximum width and maximum height that the image will have keeping its aspect ratio. If you want to deform it to an extact measure use the width and height arguments.

Format specification

Format strings given in header, footer and format may contain the following pseudo variables:

Name Value
$align value of align argumet
$alt value of alt argumet
$caption caption text
$class value of class argumet
$desc value of desc argument
$dollar replaced with dollar sign ($)
$height image height
$href hyperlink url when clicking on an image
$id value of id argumet
$magnifyIcon enlage-icon
$mousein value of mousein argument
$mouseout value of mouseout argument
$n replaced with a linefeed (\n)
$nop replaced with empty string
$origheight image height of the original image
$origsrc url of the original image (not the resized one)
$origwidth image width of the original image
$percnt replaced with percent sign (%)
$src image source url
$style value of style argumet
$text link text to be displayed in the "link" layout type
$title value of title argument
$width image width

After the layout has been formatted any further TWiki markup that might be contained is expanded afterwards. Note, that using $percnt and $dollar evaluation order of TWiki markup can be changed so that arguments are expanded after the IMAGE tag has been computed, whereas TWiki's default evaluation order is left-to-right-inside-out.


  • %IMAGE{"foo.gif" size="100" align="left" caption="This is my caption"}% (resize to 100 pixels, text flows right, with caption)
  • %IMAGE{"foo.gif" type="thumb" align="center"}% (Resize to %THUMBNAIL_SIZE% size, and center image)

Plugin Installation Instructions

  • Download the ZIP file
  • Unzip in your twiki installation directory. Content:
    File: Description:

  • Optionally, run ImagePlugin_installer to automatically check and install other TWiki modules that this module depends on. You can also do this step manually.
  • Alternatively, manually make sure the dependencies listed in the table below are resolved.
  • Configure the Plugin:
    • Run the configure script to enable the Plugin
    • Change the Plugin settings as needed
  • Test if the installation was successful:
    • For complete example see ImagePluginTest?

Plugin Info

  • Set SHORTDESCRIPTION = Control the display and alignment of images using an easy syntax

Plugin Author: TWiki:Main.CraigMeyer
Copyright: © 2006, TWiki:Main.CraigMeyer,
© 2006-2008 Michael Daum,
© 2006-2010 TWiki:TWiki.TWikiContributor
License: GPL (GNU General Public License)
Plugin Version: 19301 (2010-08-01)
Change History:  
2010-08-01: TWikibug:Item6530 - doc fixes; changing TWIKIWEB to SYSTEMWEB
03 Jul 2008: fixed parsing the type parameter; fixing docu about the default THUMBNAIL_SIZE; added new default format plain; plainify text to be used in a html attribute position, e.g. titles; default to no img alignment; refresh images on a ?refresh=on url param; using LWP::UserAgent instead of LWP::Simple to mirror images; using Resize instead of Scale for higher quality thumbnails; don't encrypt the href param
03 Mar 2008: make implementation of image mage configurable, defaulting to Graphics::Magick as Image::Magick has got issues using perl accellerators like mod_perl, speedy-cgi
03 Jan 2008: added processing of remote images
18 Dec 2006: fixed image lookup order; fixed html formats; added I18N workaround
18 Aug 2006: fixed html errors; removed references to ImgPlugin thus not showing the magnify-clip; some html and css fixes to resemble closer to the MediaWiki examples
17 Aug 2006: width and height arguments had no effect; floating images not clearing proberly on IE
16 June 2006: released into the public
10 May 2006: Initial version by forking ImgPlugin
TWiki Dependency: $TWiki::Plugins::VERSION 1.1
CPAN Dependencies: CPAN:Graphics::Magick; CPAN:LWP::UserAgent; CPAN:Digest::MD5
Other Dependencies:  
Perl Version: 5.8
Benchmarks: GoodStyle nn%, FormattedSearch nn%, ImagePlugin nn%
Plugin Home:

Related Topics: TWikiPlugins, UserDocumentationCategory

Topic attachments
I Attachment Action Size Date Who Comment
pngpng WestminstpalaceSample.png manage 105.2 K 02 Aug 2010 - 01:50 TWikiAdminGroup Saved by install script
pngpng magnify-clip.png manage 0.3 K 02 Aug 2010 - 01:50 TWikiAdminGroup Saved by install script
elsecss style.css manage 1.6 K 02 Aug 2010 - 01:50 TWikiAdminGroup Saved by install script
Topic revision: r2 - 01 Sep 2010 - 15:04:52 - TWikiAdminGroup

This site is powered by the TWiki collaboration platformCopyright � by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on at TWiki:TWiki.ImagePlugin