Exhaustive Test Page for ImagePlugin

See also: Wikipedia:Wikipedia:Extended_image_syntax

Syntax to use an image in uploaded size, with a caption

To use an image as uploaded with a caption use %IMAGE{"Westminstpalace.jpg" type="frame" align="none" caption="caption text"}%. This is the syntax you should use to update images that used the original image markup of the form %IMAGE{"Westminsterpalace.jpg|caption"}%.

caption text

Syntax for images with no automatic caption or formatting

The old syntax for images without captions is %IMAGE{"Westminstpalace.jpg|alt text"}%. This is rendered inline, and the specified text is used as the image's ''alt'' attribute (alternate text for programs which cannot display images, such as screen readers) and as the ''title'' attribute (supplementary text, often displayed as a tool tip when the mouse is over the image).


New syntax for images

In the syntax %IMAGE{"Westminstpalace.jpg" type="thumb" size="100" align="left" caption="The Palace of Westminster"}% shown in the left), several options can be set when including an image. Those affect the placing of the image, its size or the way the image will be presented. The options are right, left, center, none, _size_px, thumbnail (thumb), frame, and _alternate (caption) text_.

The options can be combined, and spaces ("") are used to separate options from each other. The options can be put in any order. %IMAGE{"Westminstpalace.jpg" type="thumb" size="200" align="right" caption="From the Thames"}% (shown on the right).

Here is the description of the options other than the caption text (shown on the right).

Westminstpalace.jpgThe image is right-aligned, and text floats to the left of the image %IMAGE{"Westminstpalace.jpg" align="right" size="70"}% (shown on the right).
Westminstpalace.jpgThe image is left aligned, and text floats to the right of the image %IMAGE{"Westminstpalace.jpg" align="left" size="70"}% (shown on the left).
The image is centered, and...Westminstpalace.jpgthe text following the image starts below it %IMAGE{"Westminstpalace.jpg" align="center" size="70"}% (shown above).
The image is put at the left, and...Westminstpalace.jpgthe text following does not float to the right (or to the left, obviously), and starts below it %IMAGE{"Westminstpalace.jpg" align="none" size="70"}% (shown above).

size px
Westminstpalace.jpg This option renders a version of the image that's [size] pixels wide (e.g. %IMAGE{"Westminstpalace.jpg|right|50px|"}% shown on the right). Height is computed to keep aspect ratio (image)|aspect ratio (i.e. the shape of the image).

Specifying a size does not just change the apparent image size using HTML; it actually generates a resized version of the image on the fly and links to it appropriately. This happens whether or not you use size in conjunction with thumb.
If you specify a "frame" option the image will not be scaled, and no size specifiers will be in the HTML. The image will be rendered at full size

thumbnail, thumb
The thumbnail (thumb) option generates a thumbnail|thumbnail image. It is automatically resized when the "size" attribute is not specified. Without the options left, center, and none, the image is normally on the right. If the image has a caption text, it is displayed in the lower margin. E.g. %IMAGE{"Westminstpalace.jpg" type="thumbnail" align="left" size="100"}% (shown on the left) and %IMAGE{"Westminstpalace.jpg" type="thumb" caption="The Palace of Westminster"}% (shown on the right).

An "enlarge"-icon is put also in the lower margin of the thumbnail. Both the image itself and the icon link to the image description page with the image in its actual size. The icon shows the link title "Enlarge" in its hoverbox, even in cases where this term does not apply, because it leads from the enlarged image to the one with the actual size. E.g. %IMAGE{"Tst.png" align="right" type="thumb" size="100" caption="This is a globe, and take a look at it in nested"}% (shown on the right).

The Palace of Westminster
With this option, the embedded image is shown with its actual size enclosed by a frame, regardless of the "thumb" or "size" attribute, and the caption, if any, is visible in the frame. Without the options left, center, and none, the image is normally on the right %IMAGE{"Westminstpalace.jpg" type="frame" size="50" caption="The Palace of Westminster"}%.

With none of the options other than size px and __alternate (caption) text__, an embedded image is rendered inline.

text text text text text text
=%IMAGE{"Westminstpalace.jpg" size="150" caption="The Palace of Westminster"}%=
text text text text text
=%IMAGE{"Tst.png" size="100" caption="This is a globe."}%=
text text text text


text text text text text text Westminstpalace.jpg text text text text text Tst.png text text text text

Cancelling floating-around-image mode

After having had an image floating next to text, putting further text below it and again using the full width can be done with the following markup. This blocks an image from appearing next to the material following this markup, possibly due to aesthetic reasons or a change in topics.

<br style="clear:both" />

For legacy align="right" (etc.) floating this isn't good enough, legacy browsers would ignore inline CSS. To cancel floating under all conditions the following markup (valid XHTML 1.0 transitional) works

<br clear="all" />

The same code can be issued by using template %IMAGE{"clear"}%

Linking to the image description page

If you want to make a link to the description page for an image, use a leading colon before "image" in an intra-wiki link, like this %IMAGE{":STS-32_crew.jpg|STS-32 crew"}% which yields STS-32_crew.jpg

Topic attachments
I Attachment Action Size Date Who Comment
STS-32_crew.jpgjpg STS-32_crew.jpg manage 48.4 K 06 Jul 2013 - 16:34 Admin User  
Tst.pngpng Tst.png manage 0.5 K 06 Jul 2013 - 16:34 Admin User  
Westminstpalace.jpgjpg Westminstpalace.jpg manage 19.3 K 06 Jul 2013 - 16:34 Admin User  
igp_4b1ec49fb496b0ce4e8bfdca570a56a1_Westminstpalace.jpgjpg igp_4b1ec49fb496b0ce4e8bfdca570a56a1_Westminstpalace.jpg manage 5.5 K 08 Mar 2013 - 02:10 Unknown User  
igp_546edabf9587143d138cc0978335aae3_Tst.pngpng igp_546edabf9587143d138cc0978335aae3_Tst.png manage 0.6 K 08 Mar 2013 - 02:10 Unknown User  
igp_546edabf9587143d138cc0978335aae3_Westminstpalace.jpgjpg igp_546edabf9587143d138cc0978335aae3_Westminstpalace.jpg manage 2.3 K 08 Mar 2013 - 02:10 Unknown User  
igp_559bda9fa0d920977185f05d9a121cd1_Westminstpalace.jpgjpg igp_559bda9fa0d920977185f05d9a121cd1_Westminstpalace.jpg manage 1.4 K 08 Mar 2013 - 02:10 Unknown User  
igp_5a08b601bc2745e7740f26bcdcaf79c3_Tst.pngpng igp_5a08b601bc2745e7740f26bcdcaf79c3_Tst.png manage 0.7 K 10 Jul 2013 - 03:01 Unknown User  
igp_60a3c5c0b6895073f43046b8e026bc73_Westminstpalace.jpgjpg igp_60a3c5c0b6895073f43046b8e026bc73_Westminstpalace.jpg manage 6.4 K 10 Jul 2013 - 03:01 Unknown User  
igp_6636a19c9e0939c0e21a65d6c69676a7_Westminstpalace.jpgjpg igp_6636a19c9e0939c0e21a65d6c69676a7_Westminstpalace.jpg manage 6.4 K 08 Mar 2013 - 02:10 Unknown User  
igp_8c5a26f963916b8f94e08083661218dd_Westminstpalace.jpgjpg igp_8c5a26f963916b8f94e08083661218dd_Westminstpalace.jpg manage 4.1 K 10 Jul 2013 - 03:01 Unknown User  
igp_99b7a5db3dd3de20b40275ba8c16058d_Westminstpalace.jpgjpg igp_99b7a5db3dd3de20b40275ba8c16058d_Westminstpalace.jpg manage 4.1 K 08 Mar 2013 - 02:10 Unknown User  
igp_a423965cba3014aa897acbabc0449d38_Westminstpalace.jpgjpg igp_a423965cba3014aa897acbabc0449d38_Westminstpalace.jpg manage 1.0 K 10 Jul 2013 - 03:01 Unknown User  
igp_a560a61893e3e7be131fdc15615b86b4_Westminstpalace.jpgjpg igp_a560a61893e3e7be131fdc15615b86b4_Westminstpalace.jpg manage 5.5 K 10 Jul 2013 - 03:01 Unknown User  
igp_c32f5b00385611ebd42ac43a48c250e8_Westminstpalace.jpgjpg igp_c32f5b00385611ebd42ac43a48c250e8_Westminstpalace.jpg manage 1.0 K 08 Mar 2013 - 02:10 Unknown User  
igp_c47975d07b769525e82a8bcdcc994bf5_Westminstpalace.jpgjpg igp_c47975d07b769525e82a8bcdcc994bf5_Westminstpalace.jpg manage 2.3 K 10 Jul 2013 - 03:01 Unknown User  
igp_da9ae5cafdcf481202cf82a079b0c2f8_Westminstpalace.jpgjpg igp_da9ae5cafdcf481202cf82a079b0c2f8_Westminstpalace.jpg manage 1.4 K 10 Jul 2013 - 03:01 Unknown User  
Topic revision: r8 - 06 Jul 2013, AdminUser
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Telem? Send feedback