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
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).
alt text
New syntax for images
The Palace of Westminster
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_
.
From the Thames
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).
- right
- The image is right-aligned, and text floats to the left of the image
%IMAGE{"Westminstpalace.jpg" align="right" size="70"}%
(shown on the right).
- left
- The image is left aligned, and text floats to the right of the image
%IMAGE{"Westminstpalace.jpg" align="left" size="70"}%
(shown on the left).
- center
- The image is centered, and...the text following the image starts below it
%IMAGE{"Westminstpalace.jpg" align="center" size="70"}%
(shown above).
- none
- The image is put at the left, and...the 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
- 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).
-
- Notes
- 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 Palace of Westminster
The thumbnail (thumb) option generates a 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 left. If the image has a caption text, it is displayed in the lower margin. E.g. %IMAGE{"Westminstpalace.jpg" type="thumbnail" align="right" size="100"}%
(shown on the right) and %IMAGE{"Westminstpalace.jpg" type="thumb" caption="The Palace of Westminster"}%
(shown on the right).
- frame
-
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="150" 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
gives
text text text text text text
The Palace of Westminster
text text text text text
This is a globe.
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
%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