XWikiSyntaxImages

1

= Editing =

2

== Images ==

=== 1.0 Images ===

|=Feature|=XWiki Syntax 1.0|=Result

8

|Image from attachment on current page|(((

9

{{info}}See [[Image Macro>>https://extensions.xwiki.org/xwiki/bin/view/Extension/Old%20XWiki%201.0%20syntax%20renderer/Image%20Macro%20%28Radeox%29]] for details{{/info}}

10

{{{{image:img.png}}}}

11

)))|image:XWiki.XWikiSyntaxImages@img.png

12

|Image from attachment on another page|{{{{image:img.png|document=Space.Page}}}}|image:XWiki.XWikiSyntaxImages@img.png

13

|Image with parameters|{{{{image:img.png|width=25|height=25}}}}|[[image:XWiki.XWikiSyntaxImages@img.png||width="25" height="25"]]

14

|Images located at URL|{{{https://some/url/img.png}}}|image:XWiki.XWikiSyntaxImages@img.png

=== 2.0 Images ===

|=Feature|=XWiki Syntax 2.0|=Result

19

|Image from attachment on current page|{{{image:img.png}}}|image:XWiki.XWikiSyntaxImages@img.png

20

|Image from attachment on another page|{{{image:Space.Page@img.png}}}|image:XWiki.XWikiSyntaxImages@img.png

21

|Image with parameters|{{{[[image:img.png||width="25" height="25"]]}}}|[[image:XWiki.XWikiSyntaxImages@img.png||width="25" height="25"]]

22

|Image with caption|{{{[[~[~[XWiki~>~>https://www.xwiki.org~]~] supports captions.>>image:img.png]]}}}|((([[~[~[XWiki~>~>https://www.xwiki.org~]~] supports captions.>>image:XWiki.XWikiSyntaxImages@img.png]])))

23

|Images located at URL|{{{image:https://some/url/img.png}}}|image:XWiki.XWikiSyntaxImages@img.png

24

25

{{velocity}}$subHeading XWiki Syntax 2.0 Image Specification $subHeading{{/velocity}}

26

27

28

The part in ##( )## is required, while the parts in ##{ }## are optional.

29

30

31

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

32

33

* **##caption##**: An optional caption. May contain arbitrary XWiki 2.0 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.

34

* **##image~:##** A required string identifying the resource as image.

35

* **##reference##**: The reference to the image that shall be displayed in one of the following forms:

36

** **URL**: Any URL to an image in the form of **##http:~/~/path/imageName##**. Example: ##http:~/~/domain.org/path/img.png##

37

** **Attachment** reference in the form **##~{~{~{wikiName:} space.} page@} (imageName)##**

38

*** **##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. Example: mywiki

39

*** **##space##**: An optional wiki Space name. If no space is specified the current space is used. Example: Main

40

*** **##page##**: An optional string containing the name of the wiki page to which the referenced image is attached. Example: WebHome

41

*** **##imageName##**: A required string containing the name of the image attached to a page as it is stored in the wiki.

42

* **##parameters##**: An optional list of space-separated parameters passed to the image. Example: ##width="800" height="600" alt="img.png" title="My nice image"##

43

** **HTML attributes**: All attributes defined by the HTML standard will be added to the rendered HTML ##<img>## tag.

44

*** **##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)

45

*** **##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%"##).

46

*** **##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%"##).

47

*** **##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"##

48

*** **##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"##

49

*** **More**: A more in depth explanation on the HTML ##<img>## tag including more attributes can be reviewed [[in the HTML standard>>https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element]].

=== 2.1 Images ===

|=Feature|=XWiki Syntax 2.1|=Result

54

|Image from attachment on current page|{{{image:img.png}}}|image:XWiki.XWikiSyntaxImages@img.png

55

|Image from attachment on another page|{{{image:PageA.PageB@img.png}}}|image:XWiki.XWikiSyntaxImages@img.png

56

|Image with parameters|{{{[[image:img.png||width="25" height="25"]]}}}|[[image:XWiki.XWikiSyntaxImages@img.png||width="25" height="25"]]

57

|Image with caption|{{{[[~[~[XWiki~>~>https://www.xwiki.org~]~] supports captions.>>image:img.png]]}}}|((([[~[~[XWiki~>~>https://www.xwiki.org~]~] supports captions.>>image:XWiki.XWikiSyntaxImages@img.png]])))

58

|Images located at URL|{{{image:https://some/url/img.png}}}|image:XWiki.XWikiSyntaxImages@img.png

59

|Prepackaged Icons|{{{image:icon:accept}}}|image:icon:accept

60

61

{{velocity}}$subHeading XWiki Syntax 2.1 Image Specification $subHeading{{/velocity}}

62

63

64

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

65

66

67

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

68

69

* **##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.

70

* **##image~:##** A required string identifying the resource as image.

71

* **##reference##**: The reference to the image that shall be displayed in one of the following forms:

72

** **URL**: Any URL to an image in the form of **##[url:](protocol:~/~/path/imageName)##**. Example: ##http:~/~/domain.org/path/img.png##

73

*** **##url:##** An optional string identifying the image as an URL.

74

*** **##protocol:~/~/path/imageName##**: The URL to the image

75

** **Attachment**: A reference in the form **##[attach~:]~{~{~{(wikiName):}(spaceNameList).}(pageName)@}(imageName)##**

76

*** **##attach~:##** An optional string identifying the reference as an XWiki Document attachment.

77

*** **##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##.

78

*** **##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##

79

*** **##pageName##**: An optional string containing the name of the wiki page to which the referenced image is attached. Example: ##Welcome##

80

*** **##imageName##**: A required string containing the name of the image attached to a page as it is stored in the wiki. Example: ##myImage.png##

81

** **Page Attachment**: A reference in the form **##pageAttach~:~{~{~{(wikiName):}(pageNameList)/}(imageName)##**

82

*** **##pageAttach~:##** An required string identifying the reference as an XWiki Page attachment.

83

*** **##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##.

84

*** **##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##

85

*** **##imageName##**: A required string containing the name of the image attached to a page as it is stored in the wiki. Example: ##myImage.png##

86

** **Icon**: A reference in the form **##icon{{{:(}}}iconName)##**. Example: **##icon:accept##**

87

*** **##icon:##** A required string identifying the image reference as an icon from the [[XWiki Icon Set>>https://www.famfamfam.com/lab/icons/silk/previews/index_abc.png]].

88

*** **##iconName##**: A required string identifying the icon referenced. Example: ##accept##

89

** **Data URI**: A reference in the form **##(data{{{:)}}}(content)##**. Example: **##{{{data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==}}}##**

90

*** **##data:##** A required string identifying the image as being specified inline using the [[Data URI scheme>>https://en.wikipedia.org/wiki/Data_URI_scheme]].

91

*** **##content##**: The encoded image. Example: ##{{{image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==}}}##

92