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:
To insert a series of images into a page content use the [[gallery]] element:
[[gallery size="image-size"]]
[[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:
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.