Warning: jsMath requires JavaScript to process the mathematics on this page.
If your browser supports JavaScript, be sure it is enabled.
View source

From QED

for QED:Image
Jump to: navigation, search
You can view and copy the source of this page:
The '''<nowiki><image></nowiki>''' tag is a {{SITENAME}} extension allowing the display of images to be handled within a uniform framework, whether they have been uploaded to {{SITENAME}} 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 &lt;image> tag and should be used on image description pages that rely on transcluded images.

The &lt;image> tag relies on the browser to rescale the image on the page in which the tag is used; by contrast, the MediaWiki <nowiki>[[Image:....]]</nowiki> form will usually generate a higher quality reduction of still images. 

==Syntax==

The basic form is as follows:

<pre>
 <image 
   src=SOURCE_SPECIFICATION
 >CAPTION</image>
</pre>

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 [[Help:Hyperlinks|hyperlink]] specifications.

To float the image to the left or right, or to center it, the following form is recommended:
<pre>
 <image
   src=SOURCE_SPECIFICATION
   auto=FLOAT_SPECIFICATION 
   width=WIDTH_IN_PIXELS
 >CAPTION</image>
</pre>

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:

<pre>
 <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>
</pre>

To associate a thumbnail with the page on which the <nowiki><image></nowiki> tag is used (if it is an Image: page that would not otherwise have a thumbnail), add the specification:
<pre>
   thumb=page
</pre>

This thumbnail can then be accessed in a variety of ways:
* using [[Template:Transcluded image thumbnail]] 
* using the &lt;[[Help:flyover|flyover]]&gt; tag
* using the &lt;image&gt; 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 [http://www.w3.org/TR/html4/struct/objects.html#h-13.2 &lt;img>] tag. 
# If ''href'' is an internal reference, it should be specified as in the example above.

If you wish to add an HTML &lt;map>, then it must be enclosed within &lt;html> .... &lt;/html> tags. For this and other reasons, for uploaded images, we suggest you consider using the [[Help:imagemap|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 &lt;div> to constrain long captions====

To constrain long captions to the width of the image, you can use the HTML &lt;div> tag along the lines of the following example:
<pre width=80%>
 &lt;div style="width:450px; text-align:center">Long caption here&lt;/div>
</pre>

===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>If float=right is specified, then a left margin around the image may be advisable. This in turn may necessitate a left margin for the caption, as illustrated here:

<pre width=80%>
  &lt;image
   float=right
   width=200
   src=http://www.mountainguides.com/photos/tibet-trek/lhasa-jokhang1.jpg
   title="Jokhang Temple"
   style="margin-left:10px"
  >&lt;div style="width:200px; margin-left:10px; text-align:center"
  >The Jokhang Temple in Lhasa.&lt;/div>&lt;/image>
</pre>

==Examples==
===float=center===
<pre>
<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>
</pre> produces <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>

===auto=right===
<pre>
<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>
</pre>
produces
<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>
{{clr}}

==See also==
* [[Help:Images]]
* [[Help:imagemap]]
* [[Template:Click]] &mdash; use an image as an anchor for a hyperlink<!--keywords: help how link images link links -->
* [[Template:Transclude]] &mdash; standard way to invoke the &lt;image> tag when transcluding an image
* [[Template:TranscludeArchivedImage]] &mdash; standard way to invoke the &lt;image> tag when transcluding an archived image

[[Category:MediaWiki Extensions]]
Templates used on this page: