Template:Annotated image 4: Difference between revisions

From Open Source Ecology
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 1: Line 1:
{{Annotated image 4
<includeonly><div class="thumb {{#switch: {{{align|}}} | left = tleft|center = center|centre = center| right|#default = tright}}" {{#ifeq: {{{align|}}}|center|style="margin: 1em auto;"}}>
| caption = This is a barnstar from [[WP:MED]] that uses this template.
<div class="thumbinner" style="width:{{#expr:{{{width|300}}}+2}}px;{{#if:{{{frameless|}}}|border:0px;background-color:#fff}} ">
| alt = Quack!
{{#if:{{{header|}}}|
| header = {{font color|#0000CC|[[Wikipedia:WikiProject Medicine/Quackstar|The WikiProject Medicine QuackStar]]}}
<div style="clear: both; font-weight: bold; font-size: 106.4%; text-align: {{{header_align|center}}}; background-color: {{{header_background|transparent}}};margin-bottom:3px">{{{header}}}</div>
| header_align = center
| header_background = #dee
| align = right
| image-left = 0
| image-top = 0
| annot-font-size = 16
| annot-text-align = center
| image = The Quackstar.png
| image-width = 300
| width = 300
| height = 300
| annotations =
{{Annotation|190|45|'''''[[Quackery|{{font color|white|Quack!}}]]'''''}}
{{Annotation|190|15|'''''[[wikt:quack|Quack!]]'''''}}
}}
}}
This template was made for annotating generic images (like the thumbnail to the right) and page-spanning diagrams (see [[#Examples]]) with a more normal appearance and more alignment options than [[Template:Annotated image]].
<!--Start image wrapper-->
__TOC__
<div style="position:relative; width:{{{width|300}}}px; height:{{{height}}}px; overflow:hidden; border:solid #ccc 1px; {{#if:{{{frameless|}}}|border:0px;}} background-color:{{{image-bg-color|white}}};">
{{clear}}
<!--Start annotated image-->
 
<div style="left:{{{image-left|0}}}px; top:{{{image-top|0}}}px; width:{{{image-width|300}}}px; position:absolute"> [[Image:{{{image}}}|{{{image-width|300}}}px|alt={{{alt|}}}|{{#ifeq:{{{nolink|}}}|yes|link=|link={{{link|COMMONS:File:{{{image}}}}}}}}]]
== Parameters ==
</div> <!-- end image -->
{{template shortcut|AI4}}
<!--Start annotations-->
 
<div style="text-align:{{{annot-text-align|center}}}; {{ifeq|{{{annot-font-size|}}}||line-height:110%;|font-size:{{{annot-font-size|}}}px; line-height:{{{annot-line-height|110%}}};}}">
 
<span style="background-color:{{{annot-background-color|transparent}}}; color:{{{annot-color|black}}}">{{{annotations}}}</span>
'''Standard set'''
<!--annotations has syntax: {{annotations|fromLeft|fromTop|text}}-->
<pre>
</div><!-- end annotations -->
{{Annotated image 4
</div><!-- end image wrapper -->
| caption =
{{#if:{{{caption|}}}|<div class="thumbcaption" style="clear:left">{{#ifeq:{{{icon|}}}|none||[[File:interactive icon.svg|left|18px|link=|The image above contains clickable links|alt=The image above contains clickable links]]}}{{{caption}}}{{#ifeq:{{{nolink|}}}|yes|&nbsp;[[Image:Desc-20.png|15px|link=COMMONS:File:{{{image}}}]]}}</div>}}
| header =
</div><!-- end thumbinner -->
| alt =
</div><!-- end thumb --></includeonly><noinclude>
| image =
{{Documentation}}
| align =
</noinclude>
| image-width =
| width =
| height =
| annot-font-size =
| annotations =
{{Annotation|<!--X-->|<!--Y-->|<!--Wikilink-->}}
{{Annotation|<!--X-->|<!--Y-->|<!--Wikilink-->}}
{{Annotation|<!--X-->|<!--Y-->|<!--Wikilink-->}}
}}
</pre>
 
'''Extended set'''
<pre>
{{Annotated image 4
| caption =
| header =
| header_align =
| header_background =
| alt =
| image =
| align =
| image-width =
| image-left =
| image-top =
| width =
| height =
| annot-font-size =
| annot-text-align =
| icon = <!--none-->
| frameless = <!--true-->
| annotations =
{{Annotation|<!--X-->|<!--Y-->|<!--Wikilink-->}}
{{Annotation|<!--X-->|<!--Y-->|<!--Wikilink-->}}
{{Annotation|<!--X-->|<!--Y-->|<!--Wikilink-->}}
}}
</pre>
 
===Definitions===
{{center|{{big|{{highlight|'''Bolded parameters''' are new, while ''italicized parameters'' are defined differently from [[Template:Annotated image]]|cyan}}}}}}
{| class="wikitable sortable"
! Name !! Allowed values !! Default value !!class="unsortable" | Function & notes
|-
| image || valid image file name || (required) || [[Raster graphics]] (jpg, png, etc.) and [[Scalable Vector Graphics|SVG]] images are allowed.<br />'''There must be a file page for the image on [[Wikimedia Commons]], or the image will lead to a file page that doesn't exist when it is clicked.''' In other words, local images (those located only on en.wiki or other language wikis) without a commons page shouldn't be used in this template.
|-
| image-width|| positive integer || (required) || Desired width of the image (in pixels).
|-
| width || positive integer || (required) || Same as [[template:Annotated image]] definition.  For simplicity, set this equal to image-width.
|-
| height|| positive integer || (required) || Ensure that (Width x Height) maintains the same aspect-ratio as the default size of the image you want to use for proper display. <br />E.g., a 500x600 default image should be scaled to 250x300 or similar for proper appearance.
|-
| annotations|| {{tl|Annotation}} || (required) || May be left empty if you only want to crop an image&nbsp;– for that, use "{{para|annotation|{{pipe}}}}" (without quotes)
|-
| image-left || integer  || (optional; defaults to 0) || 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.<br />'''Unnecessary when cropping isn't desired'''
|-
| image-top || integer  || (optional; defaults to 0) || 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.<br />'''Unnecessary when cropping isn't desired'''
|-
| image-bg-color || valid [[web colors]] <br />(e.g., html color names & hex codes)|| (optional, white) || Background of the box in which the image is displayed.
|-
| ''caption'' || wikitext || (optional) || Caption of the image with the typical appearance '''(different appearance from [[Template:Annotated image]])'''
|-
| alt || plain text || (optional) || Alt text of image, for readers who cannot see it; see [[WP:ALT]] for the MOS entry
|-
| '''header''' || wikitext || (optional) || Adds an image header like those in the examples on this page
|-
| '''header_align''' || right, left, or center || (optional, center) || Sets the header alignment to left, center, or right.
|-
| '''header_background''' || valid [[web colors]] <br />(e.g., html color names & hex codes) || (optional, transparent) || Sets the header background color
|-
| '''align''' || right, left, or center || (optional, right) || Sets the template to align to the left or right, or at the center of the page.
|-
| ''annot-text-align'' || right, left, or center || (optional, ''center'') || Sets a default text-alignment for all annotations.
|-
| annot-background-color || valid [[web colors]] <br />(e.g., html color names & hex codes) || (optional, transparent) || Sets a default background-color for all annotations.
|-
| annot-font-size || positive integer || (optional) || Sets a default font-size (in pixels) for all annotations.
|-
| annot-color || valid [[web colors]] <br />(e.g., html color names & hex codes) || (optional, black) || Sets a default color for all annotations.
|-
| '''frameless''' || plain text || (optional) || If this parameter contains any value (e.g., {{para|frameless|true}} or {{para|frameless|hi}}), the image is rendered without a thumbnail frame.<br />If the parameter is omitted altogether or remains empty (i.e., {{para|frameless}}), the image will render with a thumbnail frame.
|-
| icon || plain text || [[File:interactive icon.svg|left|20px|link=|The image above contains clickable links|alt=The image above contains clickable links]] icon || To remove the icon, use {{para|icon|none}}<br />If this parameter is omitted or is set to any value other than "none" (such as {{para|icon|hi}}), the default icon is used.<br />
|}
 
== Examples ==
 
===Image-insertion templates that use Template:Annotated image 4===
{{col-begin}}
{{col-break}}
* [[Template:Amphetamine pharmacodynamics]]
* [[Template:Amphetamine pharmacokinetics]]
* [[Template:Bicalutamide metabolism]]
* [[Template:Catecholamine and trace amine biosynthesis]]
* [[Template:Methamphetamine pharmacokinetics]]
{{col-break}}
* [[Template:Psychostimulant addiction]]
* [[Template:Chromosome]]
* [[Template:Glycolysis summary]]
* [[Template:Prokaryote gene structure]]
* [[Template:Eukaryote gene structure]]
{{col-break}}
* [[Template:Metabolic metro]]
* [[Wikipedia:WikiProject Medicine/Quackstar]] + [[Wikipedia:WikiProject Medicine/Quackstar2|Quackstar 2]]
* [[Template:Rugby Union Regions of Wales]]
* [[Template:Kraina FM]]
*
{{col-end}}
 
===Example 1 (left-aligned)===
{{cot|Template code for this example|bg=white}}
<pre>
{{Annotated image 4
|caption = See also:{{tlx|P|22}}
|header = The result of
|header_align=right
|header_background=yellow
|image = 718smiley.svg
|align = left
|image-width = 300
|width = 300
|height = 300
|annot-font-size = 20
|annot-text-align = center
|annotations =
{{Annotation|110|30|'''[[boredom]]'''}}
{{Annotation|16|140|and '''''[[Template:Annotated image 4|this annotation template]]'''''}}
}}
</pre>
{{cob}}
{{Annotated image 4
|caption = See also:{{tlx|P|22}}
|header = The result of
|header_align=right
|header_background=yellow
|image = 718smiley.svg
|align = left
|image-width = 300
|width = 300
|height = 300
|annot-font-size = 20
|annot-text-align = center
|annotations =
{{Annotation|110|30|'''[[boredom]]'''}}
{{Annotation|16|140|and '''''[[Template:Annotated image 4|this annotation template]]'''''}}
}}
{{clear}}
 
===Example 2 (centered)===
{{see also|Template:Amphetamine pharmacokinetics}}
{{cot|Template code for this example|bg=white}}
<pre>
{{Annotated image 4
| caption = {{{caption|Example.}}}
| header = {{{header|Metabolic pathways of amphetamine in humans}}}
| alt = Graphic of several routes of amphetamine metabolism
| image = Amph Pathway.png
| image-width = 700
| image-left = -10
| image-top = 3
| align = {{{align|center}}}
| width = 690
| height = 375
| annot-font-size = 16
| annot-text-align = center
| annotations =
 
{{Annotation|2|350|[[4-Hydroxyphenylacetone]]}}
{{Annotation|210|350|[[Phenylacetone]]}}
{{Annotation|380|350|[[Benzoic acid]]}}
{{Annotation|560|350|[[Hippuric acid]]}}
 
{{Annotation|45|220|{{if pagename |Amphetamine=Amphetamine |other=[[Amphetamine]]}} }}
{{Annotation|300|220|[[Phenylpropanolamine|Norephedrine]]}}
 
{{Annotation|255|90|[[4-Hydroxyamphetamine]]}}
{{Annotation|490|90|[[p-Hydroxynorephedrine|4-Hydroxynorephedrine]]}}
 
{{annotation|145|115|Para-<br/>Hydroxylation|font-size=10}}
{{annotation|384|115|Para-<br/>Hydroxylation|font-size=10}}
{{annotation|150|294|Para-<br/>Hydroxylation|font-size=10}}
{{annotation|151|138|[[CYP2D6]]|font-size=12}}
{{annotation|390|138|[[CYP2D6]]|font-size=12}}
{{annotation|150|330|unidentified|font-size=12}}
 
{{annotation|190|165|Beta-<br/>Hydroxylation|font-size=10}}
{{annotation|415|25|Beta-<br/>Hydroxylation|font-size=10}}
{{annotation|206|195|[[Dopamine beta-hydroxylase|DBH]]|font-size=12}}
{{annotation|431|55|[[Dopamine beta-hydroxylase|DBH]]|font-size=12}}
 
{{annotation|210|220|Oxidative<br/>Deamination|font-size=10}}
{{annotation|220|242|[[Flavin-containing monooxygenase 3|FMO3]]|font-size=12}}
 
{{annotation|330|307|Oxidation|font-size=10}}
{{annotation|323|330|unidentified|font-size=12}}
{{annotation|478|293|Glycine<br/>Conjugation|font-size=10}}
{{annotation|480|330|[[Butyrate—CoA ligase|XM-ligase]]<br />[[Glycine N-acyltransferase|GLYAT]]|font-size=12}}
 
}}
</pre>
{{cob}}
{{Annotated image 4
| caption = {{{caption|Example.}}}
| header = {{{header|Metabolic pathways of amphetamine in humans}}}
| alt = Graphic of several routes of amphetamine metabolism
| image = Amph Pathway.png
| image-width = 700
| image-left = -10
| image-top = 3
| align = {{{align|center}}}
| width = 690
| height = 375
| annot-font-size = 16
| annot-text-align = center
| annotations =
 
{{Annotation|2|350|[[4-Hydroxyphenylacetone]]}}
{{Annotation|210|350|[[Phenylacetone]]}}
{{Annotation|380|350|[[Benzoic acid]]}}
{{Annotation|560|350|[[Hippuric acid]]}}
 
{{Annotation|45|220|{{if pagename |Amphetamine=Amphetamine |other=[[Amphetamine]]}} }}
{{Annotation|300|220|[[Phenylpropanolamine|Norephedrine]]}}
 
{{Annotation|255|90|[[4-Hydroxyamphetamine]]}}
{{Annotation|490|90|[[p-Hydroxynorephedrine|4-Hydroxynorephedrine]]}}
 
{{annotation|145|115|Para-<br/>Hydroxylation|font-size=10}}
{{annotation|384|115|Para-<br/>Hydroxylation|font-size=10}}
{{annotation|150|294|Para-<br/>Hydroxylation|font-size=10}}
{{annotation|151|138|[[CYP2D6]]|font-size=12}}
{{annotation|390|138|[[CYP2D6]]|font-size=12}}
{{annotation|150|330|unidentified|font-size=12}}
 
{{annotation|190|165|Beta-<br/>Hydroxylation|font-size=10}}
{{annotation|415|25|Beta-<br/>Hydroxylation|font-size=10}}
{{annotation|206|195|[[Dopamine beta-hydroxylase|DBH]]|font-size=12}}
{{annotation|431|55|[[Dopamine beta-hydroxylase|DBH]]|font-size=12}}
 
{{annotation|210|220|Oxidative<br/>Deamination|font-size=10}}
{{annotation|220|242|[[Flavin-containing monooxygenase 3|FMO3]]|font-size=12}}
 
{{annotation|330|307|Oxidation|font-size=10}}
{{annotation|323|330|unidentified|font-size=12}}
{{annotation|478|293|Glycine<br/>Conjugation|font-size=10}}
{{annotation|480|330|[[Butyrate—CoA ligase|XM-ligase]]<br />[[Glycine N-acyltransferase|GLYAT]]|font-size=12}}
 
}}
{{clear}}
 
== Template:Annotation parameters ==
 
[[Template:Annotation]] requires three [[Help:Template#Usage syntax|unnamed parameters]] in order to function correctly. For explanatory purposes, the parameter definitions that follow will refer to these unnamed parameters as displayed in the example template below.
;Required parameters
<pre>
{{Annotation|<!--PX FROM LEFT-->|<!--PX FROM TOP-->| <!--Wikitext--> }}
</pre>
 
;Full parameter set
<pre>
{{Annotation|<!--PX FROM LEFT-->|<!--PX FROM TOP-->| <!--Wikitext-->
| text-align= | font-size= | background-color= | color= }}
</pre>
 
;Required parameter definitions
# '''<code><nowiki><!--PX FROM LEFT--></nowiki></code>''' (first unnamed parameter) - this field should be a replaced with a numerical value <u>without spaces between the vertical bars</u>. <br />This field specifies the horizontal distance (measured in pixels) from the left side of the image that the annotation text will be placed. Higher values will move an annotation further to the right.<br /><br />
# '''<code><nowiki><!--PX FROM TOP--></nowiki></code>''' (second unnamed parameter) - this field should be a replaced with a numerical value <u>without spaces between the vertical bars</u>. <br />This field specifies the vertical distance (measured in pixels) from the top of the image that the annotation text will be placed. Higher values will move an annotation downward.<br /><br />
# '''<code><nowiki> <!--Wikitext--> </nowiki></code>''' (third unnamed parameter) - add your [[wikitext]] (e.g., plain text, wikilinks, references, other templates, etc.) in this field.<br />
{{a note}} For the first two unnamed parameters (i.e., <code>|<nowiki><!--PX FROM LEFT--></nowiki>|<nowiki><!--PX FROM TOP--></nowiki>|</code> from the example above), including spaces between the vertical bars will result in a parsing error which will make you sad. As an example, to specify 200 by 300 pixels here, you should only use |200|300| instead of |&nbsp;200&nbsp;|&nbsp;300| or similar.
 
===[[Template:Annotation]] examples===
{{Annotated image 4
| image = Amph Pathway.png
| header=A 200 by 300 pixel image
| image-width = 200
| image-left = -200
| image-top = -300
| align = right
| width = 200
| height = 300
| annot-font-size = 16
| annot-text-align = center
| annotations =
{{Annotation|55|10| [[Example wikitext 1]] | text-align=right | font-size=16 | background-color=#32CD32 | color=black}}
{{Annotation|20|100| Example<br />[[wikitext]]<br />2 | text-align=left | font-size=20 | background-color=#ffcccee | color=orange}}
{{Annotation|100|200| Example<br />wikitext 3 | text-align=center | font-size=14 | background-color=black | color=white}}
{{Annotation|30|250|[[WP:Annotated image]]}}
}}
The following annotation templates are examples that will parse correctly for a 200x300px image. Using [[Template:Annotated image 4]] and a white 200x300px image, they will render as displayed in the thumbnail to the right of this text.
 
<code><nowiki>{{Annotation|55|10| [[Example wikitext 1]] | text-align=right | font-size=16 | background-color=#32CD32 | color=black}}</nowiki></code><br />
<code><nowiki>{{Annotation|20|100| Example<br />[[wikitext]]<br />2 | text-align=left | font-size=20 | background-color=#ffcccee | color=orange}}</nowiki></code><br />
<code><nowiki>{{Annotation|100|200| Example<br />wikitext 3 | text-align=center | font-size=14 | background-color=black | color=white}}</nowiki></code><br />
<code><nowiki>{{Annotation|30|250|[[WP:Annotated image]]}}</nowiki></code>
 
<includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox |
| <!-- Categories below this line, please; interwikis at Wikidata -->
[[Category:Annotated image templates]]
}}</includeonly>

Latest revision as of 19:21, 12 July 2017

[create] Template documentation
Retrieved from "https://wiki.opensourceecology.org/index.php?title=Template:Annotated_image_4&oldid=155420"