XWiki Syntax Guide

Last modified by Leon Poon on 2021/03/01 21:35

XWiki Syntax 2.1: Images

2.1 Images

FeatureXWiki Syntax 2.1Result
Image from attachment on current pageimage:img.pngimg.png
Image from attachment on another pageimage:PageA.PageB@img.pngimg.png
Image with parameters[[image:img.png||width="25" height="25"]]img.png
Image with caption[[~[~[XWiki~>~>https://www.xwiki.org~]~] supports captions.>>image:img.png]]
img.png

XWiki supports captions.

Images located at URLimage:https://some/url/img.pngimg.png
Prepackaged Iconsimage:icon:acceptaccept

XWiki Syntax 2.1 Image Specification

Legend: The parts are () are required, while the parts in {} are optional.

The full format of an image is either image: (reference) or [[{caption>>}image: (reference) {||parameters}]]

  • caption: An optional caption. May contain arbitrary XWiki 2.1 syntax but nested link syntax must be escaped using ~. The caption is only supported when the image syntax is the only content of a paragraph. The captioned image may also be wrapped in a link. In this case, the link will contain the image but not the caption.
  • image: A required string identifying the resource as image.
  • reference: The reference to the image that shall be displayed in one of the following forms:
    • URL: Any URL to an image in the form of [url:](protocol://path/imageName). Example: http://domain.org/path/img.png
      • url: An optional string identifying the image as an URL.
      • protocol://path/imageName: The URL to the image
    • Attachment: A reference in the form [attach:]{{{(wikiName):}(spaceNameList).}(pageName)@}(imageName)
      • attach: An optional string identifying the reference as an XWiki Document attachment.
      • wikiName: An optional string containing the name of a wiki. The image reference will point to an image attached to a page inside that wiki. If no wiki is specified, the current wiki is used. Example: mywiki.
      • spaceNameList: An optional dot-separated list of wiki Space names. If no space is specified the current space is used. Examples: Main, A.B, A.B.C
      • pageName: An optional string containing the name of the wiki page to which the referenced image is attached. Example: Welcome
      • imageName: A required string containing the name of the image attached to a page as it is stored in the wiki. Example: myImage.png
    • Page Attachment: A reference in the form pageAttach:{{{(wikiName):}(pageNameList)/}(imageName)
      • pageAttach: An required string identifying the reference as an XWiki Page attachment.
      • wikiName: An optional string containing the name of a wiki. The image reference will point to an image attached to a page inside that wiki. If no wiki is specified, the current wiki is used. Example: mywiki.
      • pageNameList: An optional dot-separated list of wiki page names. If no page is specified the current page is used. Examples: Main, A/B, A/B/C
      • imageName: A required string containing the name of the image attached to a page as it is stored in the wiki. Example: myImage.png
    • Icon: A reference in the form icon:(iconName). Example: icon:accept
      • icon: A required string identifying the image reference as an icon from the XWiki Icon Set.
      • iconName: A required string identifying the icon referenced. Example: accept
    • Data URI: A reference in the form (data:)(content). Example: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
      • data: A required string identifying the image as being specified inline using the Data URI scheme.
      • content: The encoded image. Example: image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
  • parameters: An optional list of space-separated parameters passed to the image. Example: width="800" height="600" alt="img.png" title="My nice image"
    • HTML attributes: All attributes defined by the HTML standard will be added to the rendered HTML <img> tag.
      • style: CSS style information that should be applied to the image. Examples: style="float:right;height:50" (image on right side, height 50 px), style="display:block;margin-left:auto;margin-right:auto;width:80%" (image centered, width 80% of block width), style="vertical-align:bottom" (text starts at bottom of picture)
      • height: A parameter that defines the height of the displayed image. The value should be presented either in pixel (example: height="80") or in pixel related to the height of the block containing the image (example: height="40%").
      • width: A parameter that defines the width of the displayed image. The value should be presented either in pixel (example: width="80") or in pixel related to the width of the block containing the image (example: width="40%").
      • title: A parameter that defines the title the displayed image which will be visible when hovering the mouse trigger over the image, for instance. Example: title="My nice image"
      • alt: A parameter that defines which text should be displayed if the browser is not able to display the image. Since this is a required HTML attribute XWiki will use the file name instead if the alt parameter is not defined. Example: alt="img.png"
      • More: A more in depth explanation on the HTML <img> tag including more attributes can be reviewed in the HTML standard.
    • queryString: Allows queries to be passed to the server when creating the download link for the referenced image. Example: queryString="width=100&height=800&keepAspectRatio=true" (keepAspectRatio=true will fail if the width and height parameters are specified in addition to queryString!)