Images

Single images

To insert an image into the page use the following syntax:

[[image image-source attribute1="value1" attribute2="value2" ...]]

And here is the list of allowed attributes:

attribute name allowed values example value description
link wiki page name or URL "wiki-page"
"http://www.example.com"
"#anchor"
"#"
makes image a link to another page or web address; this is ignored when using Flickr as a source; prepend the link with '*' to make it open in a new window; can link to an Anchor within a page; "#" prevents any actions when image is clicked
alt any string "a photo of me" Text substitution when image not available. It is also used by screen readers to describe an image.
title any string "a photo of me" Displays mouse-over text for the image.
width number of pixels "200px" forces width of a image when displaying
height number of pixels "200px" forces height of a image when displaying
style valid CSS style definition "border: 1px solid red; padding: 2em;" adds extra CSS style to the image
class CSS class "mystyle" forces the image CSS class - suggested use only with customized themes
size "square" - 75x75 pixels
"thumbnail" - 100 on longest side
"small" - 240 on longest side
"medium" - 500 on longest side
"medium640" - 640 on longest side (Flickr only)
"large" - 1024 on longest side (only for Flickr large images)
"original" - original image (Flickr only)
any of allowed ;-) displays a resized image; great for thumbnails
(transparency is lost and clicking the thumbnail opens the original image, unless link parameter is also supplied)
if flickr is the source it pulls required size from a Flickr server;
this option has effect only on local images or Flickr images

size attribute works very well with local files (attached to pages) not only with image files, but with e.g. PDF or PostScript. See this page for more details.

The image-source can be one of the following:

source type format example value description
URL address any valid URL address http://www.example.com/image.jpg displays image from the web address
file attachment (current page) filename exampleimage.jpg displays image attached to the current page
:first :first :first displays first image attached to the current page (or nothing at all)
file attachment (different page) /another-page-name/filename /another-page/exampleimage.jpg displays image attached to a different page
flickr image flickr:photoid flickr:83001279 displays image from Flickr and links to the original Flickr page
flickr image (private) flickr:photoid_secret flickr:149666562_debab08866 displays image from Flickr and links to the original Flickr page; if the secret is provided the image is available despite being marked as non-public

To make the linked document in a new window you can either prepend the link attribute with '*' (e.g. link="*http://www.example.com" or prepend the src element with '*' (e.g. *flickr:149666562_debab08866, *image-file etc.) for images that automatically generate links.

To choose horizontal alignment use:

  • [[=image… - centered image
  • [[<image… - image on left
  • [[>image… - image on right
  • [[f<image… - image on left floating (surrounded by text)
  • [[f>image… - image on right floating (surrounded by text)

Gallery of images

To insert a series of images into a page content use the [[gallery]] element:

[[gallery size="image-size"]]

or
[[gallery size="image-size"]]
: image-source1 attribute1="value1" attribute2="value2" ...
: image-source2 attribute1="value1" attribute2="value2" ...
...
[[/gallery]]

The allowed attributes within the [[gallery]] tag are:

attribute allowed values default description
size "square", "thumbnail", "small", "medium" "thumbnail" sets the size of preview image
this option has effect only on local images or Flickr images
order "name", "name desc", "created_at", "created_at desc" "name" sets order type
viewer "false", "no", "true", "yes" "yes" disables LightBox viewer

Order parameter also takes the following deprecated values: "nameDesc", "dateAddedDesc" and "dateAdded". For consistency with ListPages module it also takes the following values: "name desc desc" and "created_at desc desc" (meaning the same as without the "desc desc").

If the [[gallery]] tag is invoked without a list of images it automatically displays rescaled images (thumbnails) of image files attached to the current page (without .pdf and .ps documents as gallery displays only images by default).

If [[gallery]] is invoked with a list of images, only these images are displayed. image-source must not be a URL in this case. Allowed "per-image attributes are:

  • link - URL or wiki page name (does not work with Flickr images to be o.k. with Flickr terms)
  • alt - alternative text when the image is not available

To make a document open in a new window the same rules as with a single image applies.

The gallery by default is using LightBox to view images. It means that if you click on an image in the gallery, a very nice looking pop-up will show up with a possibility to scroll images forward / backward without reloading page / opening new tab or window. To disable LightBox view use parameter:

[[gallery viewer="no"]] or [[gallery viewer="false"]]

Also see FlickrGallery module if you wish to import images from Flickr.

Put the [[gallery]] tag on its own line or the parser will not recognize it.