DCCWiki: Extended image syntax
- 1 Syntax to use an image in uploaded size, with a caption
- 2 Syntax for images with no automatic caption or formatting
- 3 New syntax for images
- 4 Thumbnail with caption text underneath that has one or more links
- 5 Cancelling floating-around-image mode
- 6 Linking to the image description page
- 7 Image galleries
- 8 See also
To use an image as uploaded with a caption use
[[Image:DCCWikiTutorialPicture.jpg|frame|none|caption text]]. This is the syntax you should use to update images that used the original image markup of the form
The old syntax for images without captions is [[Image:DCCWikiTutorialPicture.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).
See DCCWiki:Image markup with HTML for an old, deprecated, way of putting a caption under the image using HTML code. Please use the new way of associating captions with images, as described on this page.
See DCCWiki:Captions for discussion of appropriate caption text. See DCCWiki:Alternative text for images for discussion of appropriate alt text. Unfortunately, it is not possible to specify different text for these two purposes.
New syntax for images
The new syntax is backward compatible, so articles don't have to be changed.
In the syntax [[Image:filename|options]] (e.g. [[Image:DCCWikiTutorialPicture.jpg|thumb|100px|left|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, sizepx, thumbnail (thumb), frame, and alternate (caption) text.Template:Clr
The options can be combined, and vertical bars ("|") are used to separate options from each other. The options can be put in any order. An unknown option is taken as the caption text. If there are two or more unknown options, the last one upstages the rest: [[Image:DCCWikiTutorialPicture.jpg|thumb|The Palace of Westminster|200px|right|From the Thames]] (shown on the right).Template:Clr
Here is the description of the options other than the caption text:
- The image is centered, and...Template:Clr
- The image is put at the left, and...Template:Clr
- 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 sizeTemplate:Clr
- thumbnail, thumb
- 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:DCCWikiTutorialPicture.jpg|thumbnail|left|100px|]] (shown on the left) and [[Image:DCCWikiTutorialPicture.jpg|thumb|The Palace of Westminster]] (shown on the right). Template:Clr
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|right|thumb|100px|This is a globe, and take a look at it in [[Media:tst.png|the actual size]].]] (shown on the right).Template:Clr
With none of the options other than sizepx and alternate (caption) text, an embedded image is rendered inline.
text text text text text text [[Image:DCCWikiTutorialPicture.jpg|150px|The Palace of Westminster]] text text text text text [[Image:tst.png|100px|This is a globe.]] text text text text
The option none can be used to have thumbnails without left- or right-alignment. This is probably most useful for tables. This is an example:
|How to use none|
|Palace of Westminster||[[Image:DCCWikiTutorialPicture.jpg|thumb|none|100px|From the Thames]]|
|Buckingham Palace||[[Image:Buckingham palace Copyright2003KaihsuTai.jpg|thumb|none|100px|Queen's home]]|
From MediaWiki 1.3, it is also possible to include links in the caption text, e.g.:
[[Image:DCCWikiTutorialPicture.jpg|right|thumbnail|This is the [[Palace of Westminster]] in London]]
Just make sure the number of opening and closing square brackets are right. One extra/missing would mean the entire image syntax line not working.
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" />
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
New syntax allows for
easy production of