Vorlage:Annotiertes Bild

Diese Vorlage ermöglicht es, Texte auf Bildern zu platzieren (auch mit Link), Bildausschnitte zu erstellen oder ein zweites Bild mit und ohne Rahmen in einem Bild darzustellen.

⧼templatedata-doc-params⧽

⧼templatedata-doc-param-name⧽		⧼templatedata-doc-param-desc⧽	⧼templatedata-doc-param-type⧽	⧼templatedata-doc-param-status⧽
Dateiname	`image`	Name der Datei, die als Hintergrundbild dient ⧼templatedata-doc-param-example⧽ Mona Lisa color restoration2.jpg	⧼templatedata-doc-param-type-wiki-file-name⧽	⧼templatedata-doc-param-status-required⧽
Imagemapcode	`imagemap`	Imagemap in X/HTML-Format, die als Hintergrundbild dient nicht gleichzeitig mit `image` angeben. ⧼templatedata-doc-param-default⧽ image	⧼templatedata-doc-param-type-content⧽	⧼templatedata-doc-param-status-suggested⧽
Ausrichtung	`float`	Ausrichtung im Seitenlayout; right / left / center / none ⧼templatedata-doc-param-default⧽ right ⧼templatedata-doc-param-example⧽ left	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-suggested⧽
ohne Rahmen	`noframe`	Bild ohne Rahmen ausgeben ⧼templatedata-doc-param-default⧽ `0` ⧼templatedata-doc-param-example⧽ `1`	⧼templatedata-doc-param-type-boolean⧽	⧼templatedata-doc-param-status-optional⧽
Beschriftung	`caption`	Bildbeschriftung, die in der Bildlegende angezeigt werden soll ⧼templatedata-doc-param-example⧽ Mund-Nasenpartie der Mona Lisa	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-suggested⧽
Alternativtext	`alt`	Alternative Bildbeschreibung für Sehbehinderte ⧼templatedata-doc-param-example⧽ Ausschnitt aus dem Gemälde der Mona Lisa, der nur die Mund-Nasenpartie zeigt	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Seitenzahl	`page`	Angabe der gewünschten Seite, wenn die verwendete Datei im Parameter `image` ein PDF ist.	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Bildanmerkungen	`annotations`	Auf dem Bild platzierte Anmerkungen eingebunden über die Vorlage:Annotation ⧼templatedata-doc-param-example⧽ [[:Vorlage:Zeichen]]Annotation\|left=120\|top=50\|text=Nase\|font-size=16\|font-weight=bold\|color=#000000[[:Vorlage:Zeichen]]	⧼templatedata-doc-param-type-content⧽	⧼templatedata-doc-param-status-suggested⧽
Schriftgröße Anmerkung	`annot-font-size`	Schriftgröße in Pixeln (ohne “`px`”) der auf dem Bild platzierten Anmerkungen verändern. ⧼templatedata-doc-param-example⧽ 12	⧼templatedata-doc-param-type-number⧽	⧼templatedata-doc-param-status-optional⧽
Schriftfarbe Anmerkung	`annot-color`	Farbattribute der auf dem Bild platzierten Anmerkungen ändern Farbname `white` oder hexadezimaler Farbwert`#FFFFFF`. ⧼templatedata-doc-param-example⧽ #DFDFDF	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Schriftart Anmerkung	`annot-font-family`	Schriftart der auf dem Bild platzierten Anmerkungen ändern. ⧼templatedata-doc-param-example⧽ monospace	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Schriftstyle Anmerkung	`annot-font-style`	Schriftstyle der auf dem Bild platzierten Anmerkungen ändern. ⧼templatedata-doc-param-example⧽ italic	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Textausrichtung Anmerkung	`annot-text-align`	Textausrichtung der auf dem Bild platzierten Anmerkungen ändern. ⧼templatedata-doc-param-default⧽ left ⧼templatedata-doc-param-example⧽ right	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Schrifthintergrund Anmerkung	`annot-background-color`	Farbattribute der auf dem Bild platzierten Anmerkungen ändern Farbname `white` oder hexadezimaler Farbwert`#FFFFFF`. ⧼templatedata-doc-param-example⧽ #DFDFDF	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Zeilenabstand Anmerkung	`annot-line-height`	Zeilenhöhe der auf dem Bild platzierten Anmerkungen ändern und auf Abstand setzen Falls mehrere Anmerkungen direkt untereinander stehen. ⧼templatedata-doc-param-example⧽ 12	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Bildbreite	`image-width`	Angabe als natürliche Zahl in Pixeln (ohne “`px`”) ⧼templatedata-doc-param-example⧽ 2000	⧼templatedata-doc-param-type-number⧽	⧼templatedata-doc-param-status-required⧽
Ausschnittsbreite	`width`	Angabe als natürliche Zahl in Pixeln (ohne “`px`”) Nicht größer als das Bild `image-width` selbst. ⧼templatedata-doc-param-example⧽ 250	⧼templatedata-doc-param-type-number⧽	⧼templatedata-doc-param-status-suggested⧽
Ausschnittshöhe	`height`	Angabe als natürliche Zahl in Pixeln (ohne “`px`”) Nicht größer als das Bild `image-width` selbst. ⧼templatedata-doc-param-example⧽ 250	⧼templatedata-doc-param-type-number⧽	⧼templatedata-doc-param-status-suggested⧽
Abstand links	`image-left`	Angabe als ganze Zahl in Pixeln (ohne “`px`”) X-Koordinate relativ zum linken Rand des Kastens, negative Werte schneiden das Bild zu. ⧼templatedata-doc-param-default⧽ 0 ⧼templatedata-doc-param-example⧽ -850	⧼templatedata-doc-param-type-number⧽	⧼templatedata-doc-param-status-suggested⧽
Abstand oben	`image-top`	Angabe als negative ganze Zahl in Pixeln (ohne “`px`”)Y-Koordinate relativ zum oberen Rand des Kastens, negative Werte schneiden das Bild zu. ⧼templatedata-doc-param-default⧽ 0 ⧼templatedata-doc-param-example⧽ -850	⧼templatedata-doc-param-type-number⧽	⧼templatedata-doc-param-status-suggested⧽
Außenrahmen	`outer-css`	CSS-Attribute wie Rahmenfarbe ⧼templatedata-doc-param-example⧽ border: 1px solid #00FFFF	⧼templatedata-doc-param-type-string⧽	⧼templatedata-doc-param-status-optional⧽
Innenrahmen	`inner-css`	CSS-Attribute wie Rahmenfarbe ⧼templatedata-doc-param-example⧽ border: 1px solid #00FFFF	⧼templatedata-doc-param-type-string⧽	⧼templatedata-doc-param-status-optional⧽

<templatedata>{"format":"\n{{_\n| _ = _\n}}\n","description":"Diese Vorlage ermöglicht es, Texte auf Bildern zu platzieren (auch mit Link), Bildausschnitte zu erstellen oder ein zweites Bild mit und ohne Rahmen in einem Bild darzustellen.","paramOrder":["image","imagemap","float","noframe","caption","alt","page","annotations","annot-font-size","annot-color","annot-font-family","annot-font-style","annot-text-align","annot-background-color","annot-line-height","image-width","width","height","image-left","image-top","outer-css","inner-css"],

"params":{ "image":{"type":"wiki-file-name","description":"Name der Datei, die als Hintergrundbild dient","label":"Dateiname","example":"Mona Lisa color restoration2.jpg","required":true},

"imagemap":{"suggested":true,"type":"content","description":"Imagemap in X/HTML-Format, die als Hintergrundbild dient\r\n.","label":"Imagemapcode","default":"image"},

"float":{"suggested":true,"type":"line","description":"Ausrichtung im Seitenlayout; right / left / center / none","label":"Ausrichtung","example":"left","default":"right"},

"noframe":{"suggested":false,"type":"boolean","description":"Bild ohne Rahmen ausgeben","label":"ohne Rahmen","example":"1","default":"0"},

"caption":{"suggested":true,"type":"line","description":"Bildbeschriftung, die in der Bildlegende angezeigt werden soll","label":"Beschriftung","example":"Mund-Nasenpartie der Mona Lisa"},

"alt":{"suggested":false,"type":"line","description":"Alternative Bildbeschreibung für Sehbehinderte","label":"Alternativtext","example":"Ausschnitt aus dem Gemälde der Mona Lisa, der nur die Mund-Nasenpartie zeigt"},

"page":{"suggested":false,"type":"line","description":"Angabe der gewünschten Seite, wenn die verwendete Datei im Parameter image ein PDF ist.","label":"Seitenzahl"},

"annotations":{"suggested":true,"type":"content","description":"Auf dem Bild platzierte Anmerkungen eingebunden über die Vorlage:Annotation","label":"Bildanmerkungen","example":"Vorlage:Zeichen*Annotation|left=120|top=50|text=Nase|font-size=16|font-weight=bold|color=#000000Vorlage:Zeichen*"},

"annot-font-size":{"suggested":false,"type":"number","description":"Schriftgröße in Pixeln (ohne “px”) der auf dem Bild platzierten Anmerkungen verändern.","label":"Schriftgröße Anmerkung","example":"12"},

"annot-color":{"suggested":false,"type":"line","description":"Farbattribute der auf dem Bild platzierten Anmerkungen ändern\r\n.","label":"Schriftfarbe Anmerkung","example":"#DFDFDF"},

"annot-font-family":{"suggested":false,"type":"line","description":"Schriftart der auf dem Bild platzierten Anmerkungen ändern.","label":"Schriftart Anmerkung","example":"monospace"},

"annot-font-style":{"suggested":false,"type":"line","description":"Schriftstyle der auf dem Bild platzierten Anmerkungen ändern.","label":"Schriftstyle Anmerkung","example":"italic"},

"annot-text-align":{"suggested":false,"type":"line","description":"Textausrichtung der auf dem Bild platzierten Anmerkungen ändern.","label":"Textausrichtung Anmerkung","example":"right","default":"left"},

"annot-background-color":{"suggested":false,"type":"line","description":"Farbattribute der auf dem Bild platzierten Anmerkungen ändern\r\n.","label":"Schrifthintergrund Anmerkung","example":"#DFDFDF"},

"annot-line-height":{"suggested":false,"type":"line","description":"Zeilenhöhe der auf dem Bild platzierten Anmerkungen ändern und auf Abstand setzen\r\n.","label":"Zeilenabstand Anmerkung","example":"12"},

"image-width":{"type":"number","description":"Angabe als natürliche Zahl in Pixeln (ohne “px”)","label":"Bildbreite","example":"2000","required":true},

"width":{"suggested":true,"type":"number","description":"Angabe als natürliche Zahl in Pixeln (ohne “px”)\r\n","label":"Ausschnittsbreite","example":"250"},

"height":{"suggested":true,"type":"number","description":"Angabe als natürliche Zahl in Pixeln (ohne “px”)\r\n","label":"Ausschnittshöhe","example":"250"},

"image-left":{"suggested":true,"type":"number","description":"Angabe als ganze Zahl in Pixeln (ohne “px”)\r\n","label":"Abstand links","example":"-850","default":"0"},

"image-top":{"suggested":true,"type":"number","description":"Angabe als negative ganze Zahl in Pixeln (ohne “px”)","label":"Abstand oben","example":"-850","default":"0"},

"outer-css":{"type":"string","description":"CSS-Attribute wie Rahmenfarbe","label":"Außenrahmen","example":"border: 1px solid #00FFFF","required":false},

"inner-css":{"type":"string","description":"CSS-Attribute wie Rahmenfarbe","label":"Innenrahmen","example":"border: 1px solid #00FFFF","required":false} }

}</templatedata>

Kopiervorlagen

Alle Parameter sind mit Namen versehen. Zwei der Parameter schließen sich gegenseitig aus, image und imagemap.

Alle Parameter

Datei:No image available-de.svg

</syntaxhighlight>

Annotation

Datei:No image available-de.svg

</syntaxhighlight>

Bildausschnitt

Datei:No image available-de.svg

</syntaxhighlight>

Annotation

alternative Beschreibung

Himmel

Horizont

Meer

Datei:Pacific Ocean - panoramio - ---=XEON=--- (1).jpg

Ein annotiertes Bild

Zusammen mit der Vorlage:Annotation, die für die Darstellung der einzelnen Textlabels zuständig ist, lassen sich so beliebige Texte und Links auf einem Bild positionieren:

alternative Beschreibung

Himmel

Horizont

Meer

Datei:Pacific Ocean - panoramio - ---=XEON=--- (1).jpg

Ein annotiertes Bild

</syntaxhighlight>

Bildzuschnitt

Beim Beispielbild Datei:Mona Lisa color restoration2.jpg sollen nur Nase und Mundwinkel gezeigt werden:

Datei:Mona Lisa color restoration2.jpg

Die Ursprungsbreite des Bildes von 300 Pixeln ist bei Verwendung dieser Vorlage die wichtigste Größe.

Datei:Monalisa.svg

Die fünf Größen, die den Bildausschnitt auswählen: image-width legt den Skalierungsfaktor des Bildes fest. Steht dort die originale Bildgröße, wird das Bild nicht skaliert. Steht dort die doppelte Größe, wird die Bildgröße verdoppelt u.s.w.
image-left ist meist eine negative Zahl und schneidet Pixel links im (ggf. skalierten) Bild ab.
image-top ist meist eine negative Zahl und schneidet Pixel oben im (ggf. skalierten) Bild ab.
width und height beschreiben die finale Bildgröße durch Abschneiden (oder Hinzufügen von weißen) Pixeln am rechten und unteren Rand.

Durch folgende Vorlage wird der Ausschnitt erzeugt:

alternative Beschreibung

Datei:Mona Lisa color restoration2.jpg

Bildausschnitt Pixel 128...167 x 120...159

alternative Beschreibung

Datei:Mona Lisa color restoration2.jpg

Bildausschnitt der Pixel 128...167 × 120...159

</syntaxhighlight>

<syntaxhighlight lang="wikitext">image = Mona Lisa color restoration2.jpg</syntaxhighlight>

Der Name des Bildes ohne Protokoll (https://), Hostname (commons.wikimedia.org) und Pfad (/wiki/File:)

https://commons.wikimedia.org/wiki/File:Mona Lisa color restoration2.jpg ⟶ Mona Lisa color restoration2.jpg

<syntaxhighlight lang="wikitext">image-width = 1800</syntaxhighlight>

Die neue Breite des Bildes: Da das alte Bild im Original 300 Pixel breit war, wird das Bild erst einmal um den Faktor <math>1800/300 = 6</math> skaliert also vergrößert.

Alle folgenden Werte beziehen sich auf den Skalierungsfaktor 6 für dieses um den Faktor 6 vergrößerte neue Bild! Von diesem wird oben und links was abgeschnitten und dann das Bild ausgewählt.

<syntaxhighlight lang="wikitext">image-left = -768</syntaxhighlight>

Es werden 768 Pixel vom linken Rand des vergrößerten neuen Bildes abgeschnitten.

Das entspricht <math>768/6 = 128</math> Pixel im originalen Bild, dieser Wert würde also um den Skalierungsfaktor 6 geteilt.

<syntaxhighlight lang="wikitext">image-top = -720</syntaxhighlight>

Es werden 720 Pixel vom oberen Rand des vergrößerten neuen Bildes abgeschnitten.

Das entspricht <math>720/6 = 120</math> Pixel des originalen Bildes, dieser Wert würde also um den Skalierungsfaktor 6 geteilt.

<syntaxhighlight lang="wikitext">width = 240</syntaxhighlight>

Es werden horizontal 240 Pixel des vergrößerten neuen Bildes dargestellt.

Das entspricht <math>240/6 = 40</math> horizontale Pixel des originalen Bildes, der Wert würde gleichfalls um den Skalierungsfaktor 6 geteilt.

<syntaxhighlight lang="wikitext">height = 240</syntaxhighlight>

Es werden vertikal 240 Pixel des vergrößerten neuen Bildes dargestellt.

Das entspricht <math>240/6 = 40</math> vertikale Pixel des originalen Bildes, auch dieser Wert würde gleichfalls um den Skalierungsfaktor 6 geteilt.

Ergebnis

Im Endeffekt werden aus dem 300 × 260 Pixel großen Originalbild horizontal die Pixel 128...167 (also die unter width genannten 40 Pixel) und vertikal die Pixel 120...159 (also die unter heigth genannten 40 Pixel) dargestellt.