QED:Image
From QED
The <image> tag is a QED extension allowing the display of images to be handled within a uniform framework, whether they have been uploaded to QED or not. This tag is especially appropriate if you wish to specify hover text or a single hyperlink without using HTML.
For pages in the Image: namespace that would not otherwise have an associated thumbnail, the tag can also be used to create a thumbnail that will be used in search results. The templates Template:Transclude and Template:transcludeArchivedImage are implemented using the <image> tag and should be used on image description pages that rely on transcluded images.
The <image> tag relies on the browser to rescale the image on the page in which the tag is used; by contrast, the MediaWiki [[Image:....]] form will usually generate a higher quality reduction of still images.
Contents |
Syntax
The basic form is as follows:
<image src=SOURCE_SPECIFICATION >CAPTION</image>
where:
- SOURCE_SPECIFICATION may be the name of an uploaded file (e.g. uploaded_file.jpg), or an http or https specification.
- CAPTION is the text to be used for a caption and is optional. It may contain hyperlink specifications.
To float the image to the left or right, or to center it, the following form is recommended:
<image src=SOURCE_SPECIFICATION auto=FLOAT_SPECIFICATION width=WIDTH_IN_PIXELS >CAPTION</image>
where:
- FLOAT_SPECIFICATION may be one of the keywords: left, center, or right.
- The width specification is optional. WIDTH_IN_PIXELS is an integer.
The general syntax is illustrated by the following example:
<image border=1 float=right height=100 href=Hawaii src=uploadedImage.jpg title="hover text" width=100 usemap=MAPNAME alt="alternative text" style="border:1px solid #CCCCCC;" >Caption goes here</image>
To associate a thumbnail with the page on which the <image> tag is used (if it is an Image: page that would not otherwise have a thumbnail), add the specification:
thumb=page
This thumbnail can then be accessed in a variety of ways:
- using Template:Transcluded image thumbnail
- using the <flyover> tag
- using the <image> tag or HTML with src=/images/transcluded/PAGE.jpg where "PAGE" is the page name with spaces replaced by underscores.
Notes
- All parameters except src are optional.
- If src is specified with a leading "/" or with ":/", then it is processed literally, otherwise it is assumed to refer to an uploaded file of the specified name.
- If auto is specified, then float is ignored
- The only recognized values for auto and float are: left, center and right
- If a value for href is not given, it is set to the Image: page or to src as appropriate.
- One must specify thumb=page exactly as shown for a thumbnail to be created.
- All other options are as for the HTML <img> tag.
- If href is an internal reference, it should be specified as in the example above.
If you wish to add an HTML <map>, then it must be enclosed within <html> .... </html> tags. For this and other reasons, for uploaded images, we suggest you consider using the imagemap tag instead.
Long Captions
To ensure that long captions do not stretch beyond the image width, the two parameters width and auto should be specified explicitly.
A more complex alternative is explained in the following subsection.
Using <div> to constrain long captions
To constrain long captions to the width of the image, you can use the HTML <div> tag along the lines of the following example:
<div style="width:450px; text-align:center">Long caption here</div>
Margins
The auto parameter will ensure suitable margins are added.
For more control over the margins, you may wish to use the float parameter in conjunction with style specifications as illustrated by this example:
<image float=right width=200 src=http://www.mountainguides.com/photos/tibet-trek/lhasa-jokhang1.jpg title="Jokhang Temple" style="margin-left:10px" ><div style="width:200px; margin-left:10px; text-align:center" >The Jokhang Temple in Lhasa.</div></image>
Examples
float=center
<image src=NetMap.JPG width=10% title="Go to Hawaii" float=center href=http://en.wikipedia.com/wiki/Hawaii style="border:1px solid #CCCCCC;" >Hot Spot</image>produces
Hot Spot
auto=right
<image src=NetMap.JPG title="Go to Hawaii" auto=right href=http://en.wikipedia.com/wiki/Hawaii style="border:1px solid #CCCCCC;" >Another Hot Spot</image>
produces
See also
- Help:Images
- Help:imagemap
- Template:Click — use an image as an anchor for a hyperlink
- Template:Transclude — standard way to invoke the <image> tag when transcluding an image
- Template:TranscludeArchivedImage — standard way to invoke the <image> tag when transcluding an archived image
