Majestix at 13:45, 16 June 2026

2026-06-16T13:45:58Z

← Older revision		Revision as of 15:45, 16 June 2026
Line 106:		Line 106:

	===Internationalisation===		===Internationalisation===
	This template makes internationalisation easy; the text is already separate from the image, so it is easy to translate the text and, if necessary, move pieces of text, as the lengths of the same text in different languages can vary a lot. For example, [[:nl:Sjabloon:Zijbalk mariene extincties]], the Dutch version of [[Template:Annotated ~~image~~/Extinction]], is widely used.		This template makes internationalisation easy; the text is already separate from the image, so it is easy to translate the text and, if necessary, move pieces of text, as the lengths of the same text in different languages can vary a lot. For example, [[:nl:Sjabloon:Zijbalk mariene extincties]], the Dutch version of [[Template:Annotated Image/Extinction]], is widely used.

	===Examples===		===Examples===
	[[Template:Annotated ~~image~~/Extinction]]		[[Template:Annotated Image/Extinction]]

	====Adding explanatory notes====		====Adding explanatory notes====

Majestix at 13:44, 16 June 2026

2026-06-16T13:44:54Z

← Older revision		Revision as of 15:44, 16 June 2026
Line 112:		Line 112:

	====Adding explanatory notes====		====Adding explanatory notes====
	See [[Template:Annotated ~~image~~/doc/Samples]].		See [[Template:Annotated Image/doc/Samples]].

	====Cropping====		====Cropping====
Line 122:		Line 122:

	<syntaxhighlight lang="wikitext" style="overflow:auto;">		<syntaxhighlight lang="wikitext" style="overflow:auto;">
	{{Annotated ~~image~~		{{Annotated Image
	\| image = Mona Lisa color restoration2.jpg		\| image = Mona Lisa color restoration2.jpg
	\| image-width = 1000 <!-- This number does not affect the image's display – it simply serves to provide a [[lowest common denominator\|denominator]] for the numbers in the following 4 lines, resulting in four [[fraction]]s. It has no connection with the actual number of pixels in the image. -->		\| image-width = 1000 <!-- This number does not affect the image's display – it simply serves to provide a [[lowest common denominator\|denominator]] for the numbers in the following 4 lines, resulting in four [[fraction]]s. It has no connection with the actual number of pixels in the image. -->
Line 136:		Line 136:
	The result is a 250 pixels x 250 pixels area from the 1000 pixels-wide image (remember, the actual width of the image in Commons is irrelevant). Masking has been applied to 400 pixels at the top, 425 pixels at the left side, 125 pixels at the bottom and 125 pixels at the right side.		The result is a 250 pixels x 250 pixels area from the 1000 pixels-wide image (remember, the actual width of the image in Commons is irrelevant). Masking has been applied to 400 pixels at the top, 425 pixels at the left side, 125 pixels at the bottom and 125 pixels at the right side.
	<div style="clear: all;"></div>		<div style="clear: all;"></div>
	{{Annotated ~~image~~		{{Annotated Image
	\| image = Mona Lisa color restoration2.jpg		\| image = Mona Lisa color restoration2.jpg
	\| image-width = 1000		\| image-width = 1000
Line 153:		Line 153:
	===Subpages (templates based on this template)===		===Subpages (templates based on this template)===
	This list is automatically generated and updated. Redirects are shown in ''italics''.		This list is automatically generated and updated. Redirects are shown in ''italics''.
	{{Special:Prefixindex/Template:Annotated ~~image~~/}}		{{Special:Prefixindex/Template:Annotated Image/}}

	===See also===		===See also===

Majestix: Created page with "{{Documentation subpage}} This template allows the addition of explanatory notes to images in the form of actual text (which can also contain links), which is usually more legible than text built into the image – especially if the image is reduced to thumbnail size. Other uses include cropping an image to exclude unimportant parts and perhaps enlarge important parts, and internationalisation, as the annota..."

2026-06-16T13:04:17Z

Created page with "{{Documentation subpage}}  This template allows the addition of explanatory notes to images in the form of actual text (which can also contain links), which is usually more legible than text built into the image – especially if the image is reduced to thumbnail size. Other uses include cropping an image to exclude unimportant parts and perhaps enlarge important parts, and internationalisation, as the annota..."

New page

{{Documentation subpage}}


This template allows the addition of explanatory notes to images in the form of actual text (which can also contain links), which is usually more legible than text built into the image – especially if the image is reduced to thumbnail size.

Other uses include cropping an image to exclude unimportant parts and perhaps enlarge important parts, and internationalisation, as the annotations can be changed without changing the image.

This template and {{tl|annotated image 4}} are the only two annotated image templates that utilize {{tl|annotation}} to superimpose [[wikitext]] onto images.

===Syntax===
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{Annotated image
| image =
| image-width =
| image-left =
| image-top =
| width =
| height =
| float =
| annotations =
{{Annotation | left (in px)| top (in px) | text | text-align=left | font-size=12 | font-weight=bold | font-family=Times New Roman | background-color=#ffcccee | color=blue}}
| caption =
}}
</syntaxhighlight>

===Parameters===
All parameters have names; there are no nameless "numbered" parameters.

Two of the parameters, ''image'' and ''imagemap'', are mutually exclusive: use one of them, not both.

In the following list, those parameters required by the template are shown in '''bold'''.

{| class="wikitable sortable"
! Parameter 
! Allowed values 
! Default value 
! Function and notes 
|-
| '''caption''' || [[Wikipedia:Cheatsheet|wikitext]] ||
| Caption accompanying image.
|-
| alt || text || {{free|empty}}
| Alt text for people whose vision of the image is impaired (see [[WP:ALT]]).
|-
| ''Either''  {{mono|image}}<br/>''or''  {{mono|imagemap}}
| valid image filename{{sup|a}} ''or''<br/>valid X/HTML [[Image map|imagemap]] ||
| Specify either {{mono|image}} or {{mono|imagemap}}, but not both.
|-
| width || positive integer || {{sdash}}
| Total width (in pixels) of the box containing the image and annotations. Must be at least as large as the image's displayed width (which can be set using ''image-width'').
|-
| height || positive integer || {{sdash}}
| Total height (in pixels) of the box containing the image and annotations. Must be at least as large as the image's displayed height. If the displayed width of the image is changed by specifying ''image-width'', the image's displayed height and any additional "margins" for annotations will need to be calculated.
|-
| image-left || integer || {{CNone|''(zero)''}}
| X-coordinate of the image's top left corner (in pixels), relative to the top left corner of the box containing the image and annotations. Negative values crop the image.
|-
| image-top || integer || {{CNone|''(zero)''}}
| Y-coordinate of the image's top left corner (in pixels), relative to the top left corner of the box containing the image and annotations. Negative values crop the image.
|-
| '''image-width''' || positive integer ||
| Width of the original image (in pixels). (Look on the file's page and use the second number in the image size.)
|-
| '''annotations''' || ||
| Annotations for the image. May be left empty (i.e. {{mono|<nowiki>|... |annotations= |...</nowiki>}}) to crop an image only.
|-
| link || ||
| To set the link of image. May be left empty (i.e. {{mono|<nowiki>|... |link= |...</nowiki>}}) for [[MOS:PDI|purely decorative images]].
|-
| float || {{hlist|right|left|center|none}} || style="text-align: right" | right
| To specify whether or not the template floats to the right or left of adjacent content.
|-
| outer-css || any valid [[Cascading Stylesheets|CSS]] || {{sdash}}
| Additional CSS applied to the outermost box. Does not override any other parameters specified for the outer box (i.e. best used only as "a last resort").
|-
| image-bg-color || any valid CSS color || {{vacant|white}}
| Background of the box in which the image is displayed. For example, a dark background for a relatively dark image on which relatively lightly colored annotations are placed.
|-
| image-css || any valid CSS || {{sdash}}
| Additional CSS applied to the (inner box carrying the) image. Does not override any other parameters specified for this box (i.e. best used only as "a last resort").
|-
| annot-text-align || {{hlist|left|right|center}} || style="text-align: left" |left
| Sets a default text-alignment for all the contained annotations. Can be overridden per annotation.
|-
| annot-background-color || any valid CSS color || {{vacant|transparent}}
| Sets a default background-color for all the contained annotations. Can be overridden per annotation.
|-
| annot-font-family || any valid CSS [[Font family (HTML)|font-family]] || {{sdash}}
| Sets a default font-family for all the contained annotations. Can be overridden per annotation.
|-
| annot-font-size || positive integer || {{sdash}}
| Sets a default font-size (in pixels) for all the contained annotations. Can be overridden per annotation.
|-
| annot-font-weight || any valid CSS font-weight || {{sdash}}
| Sets a default font-weight for all the contained annotations. Can be overridden per annotation.
|-
| annot-font-style || any valid CSS font-style || {{sdash}}
| Sets a default font-style (e.g. "italic") for all the contained annotations. Can be overridden per annotation.
|-
| annot-line-height || any valid CSS line-height || {{sdash}}
| Sets a default line-height (line spacing) for all the contained annotations.  Can be overridden per annotation.
|-
| annot-color || any valid CSS color || {{sdash}}
| Sets a default color for all the contained annotations. Can be overridden per annotation.
|}<span style="font-size:95%;padding-left:0.7em;">{{sup|a}} [[Scalable Vector Graphics|SVG]] images allowed.</span>

===Internationalisation===
This template makes internationalisation easy; the text is already separate from the image, so it is easy to translate the text and, if necessary, move pieces of text, as the lengths of the same text in different languages can vary a lot. For example, [[:nl:Sjabloon:Zijbalk mariene extincties]], the Dutch version of [[Template:Annotated image/Extinction]], is widely used.

===Examples===
[[Template:Annotated image/Extinction]]

====Adding explanatory notes====
See [[Template:Annotated image/doc/Samples]].

====Cropping====
When a suitable image is available in Wikimedia Commons, such as [[:commons:File:Mona Lisa color restoration2.jpg|Mona Lisa]], it can be linked and coded to show only a part of the image in a Wikipedia article:
[[File:Mona Lisa color restoration2.jpg|thumb|left|300px|As stored in Commons, this image has an actual width of 3000 pixels, but that is irrelevant for the purposes of this template.]]
[[File:Monalisa.svg|thumb|right|300px|Names of the values provided for masking specified parts of the image]]
{{Clear}}
The code is:

<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{Annotated image
| image = Mona Lisa color restoration2.jpg
| image-width = 1000 
| image-left = -425
| image-top = -400
| width = 125 
| height = 125 
| float = left
| annotations = 
| caption = (Caption)
}}
</syntaxhighlight>
The result is a 250 pixels x 250 pixels area from the 1000 pixels-wide image (remember, the actual width of the image in Commons is irrelevant). Masking has been applied to 400 pixels at the top, 425 pixels at the left side, 125 pixels at the bottom and 125 pixels at the right side.
<div style="clear: all;"></div>
{{Annotated image
| image = Mona Lisa color restoration2.jpg
| image-width = 1000
| image-left = -425
| image-top = -400
| width = 125
| height = 125
| float = left
| annotations =
| caption = (Caption)
}}
<div style="clear: all;"></div>

{{clear}}

===Subpages (templates based on this template)===
This list is automatically generated and updated. Redirects are shown in ''italics''.
{{Special:Prefixindex/Template:Annotated image/}}

===See also===
* {{tl|Annotation}}, for creating annotations.
* {{tl|Annotated image 4}}, for annotating left/right/center-aligned images with a normal caption background color.
* {{tl|Image label}}, an alternative to this template.
* {{tl|Overlay}}, which labels an image, automatically constructs a column-balanced legend, with, if desired, sub-legends; allows separate control of labels' pop-up tips; assists in determining corordinates for labels' position; etc.
* {{tl|Location map+}}, for maps featuring "pin"-style location icons.
* {{tl|Superimpose}} to superimpose images.
* [https://www.mediawiki.org/wiki/Extension:ImageMap ImageMap (MediaWiki extension) - adding links to areas of an image]

<includeonly>{{Sandbox other|
| 
[[Category:Annotated image templates]]
}}</includeonly>

Template:Annotated Image/doc - Revision history

Majestix at 13:45, 16 June 2026

Majestix at 13:44, 16 June 2026