Vorlage:Annotiertes Bild

[Werkzeuge][Bearbeiten]

Dokumentation

TemplateData

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.

Vorlagenparameter

Parameter		Beschreibung	Typ	Status
Dateiname	image	Name der Datei, die als Hintergrundbild dient Beispiel Mona Lisa color restoration2.jpg	Datei	erforderlich
Imagemapcode	imagemap	Imagemap in X/HTML-Format, die als Hintergrundbild dient nicht gleichzeitig mit image angeben. Standard image	Wikitext	vorgeschlagen
Ausrichtung	float	Ausrichtung im Seitenlayout; right / left / center / none Standard right Beispiel left	Einzeiliger Text	vorgeschlagen
ohne Rahmen	noframe	Bild ohne Rahmen ausgeben Standard 0 ☐ Beispiel 1 ☑	Wahrheitswert	optional
Beschriftung	caption	Bildbeschriftung, die in der Bildlegende angezeigt werden soll Beispiel Mund-Nasenpartie der Mona Lisa	Einzeiliger Text	vorgeschlagen
Alternativtext	alt	Alternative Bildbeschreibung für Sehbehinderte Beispiel Ausschnitt aus dem Gemälde der Mona Lisa, der nur die Mund-Nasenpartie zeigt	Einzeiliger Text	optional
Seitenzahl	page	Angabe der gewünschten Seite, wenn die verwendete Datei im Parameter image ein PDF ist.	Einzeiliger Text	optional
Bildanmerkungen	annotations	Auf dem Bild platzierte Anmerkungen eingebunden über die Vorlage:Annotation Beispiel {{Annotation|left=120|top=50|text=Nase|font-size=16|font-weight=bold|color=#000000}}	Wikitext	vorgeschlagen
Schriftgröße Anmerkung	annot-font-size	Schriftgröße in Pixeln (ohne “px”) der auf dem Bild platzierten Anmerkungen verändern. Beispiel 12	Zahlenwert	optional
Schriftfarbe Anmerkung	annot-color	Farbattribute der auf dem Bild platzierten Anmerkungen ändern Farbname white oder hexadezimaler Farbwert#FFFFFF. Beispiel #DFDFDF	Einzeiliger Text	optional
Schriftart Anmerkung	annot-font-family	Schriftart der auf dem Bild platzierten Anmerkungen ändern. Beispiel monospace	Einzeiliger Text	optional
Schriftstyle Anmerkung	annot-font-style	Schriftstyle der auf dem Bild platzierten Anmerkungen ändern. Beispiel italic	Einzeiliger Text	optional
Textausrichtung Anmerkung	annot-text-align	Textausrichtung der auf dem Bild platzierten Anmerkungen ändern. Standard left Beispiel right	Einzeiliger Text	optional
Schrifthintergrund Anmerkung	annot-background-color	Farbattribute der auf dem Bild platzierten Anmerkungen ändern Farbname white oder hexadezimaler Farbwert#FFFFFF. Beispiel #DFDFDF	Einzeiliger Text	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. Beispiel 12	Einzeiliger Text	optional
Bildbreite	image-width	Angabe als natürliche Zahl in Pixeln (ohne “px”) Beispiel 2000	Zahlenwert	erforderlich
Ausschnittsbreite	width	Angabe als natürliche Zahl in Pixeln (ohne “px”) Nicht größer als das Bild image-width selbst. Beispiel 250	Zahlenwert	vorgeschlagen
Ausschnittshöhe	height	Angabe als natürliche Zahl in Pixeln (ohne “px”) Nicht größer als das Bild image-width selbst. Beispiel 250	Zahlenwert	vorgeschlagen
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. Standard 0 Beispiel -850	Zahlenwert	vorgeschlagen
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. Standard 0 Beispiel -850	Zahlenwert	vorgeschlagen
Außenrahmen	outer-css	CSS-Attribute wie Rahmenfarbe Beispiel border: 1px solid #00FFFF	Mehrzeiliger Text	optional
Innenrahmen	inner-css	CSS-Attribute wie Rahmenfarbe Beispiel border: 1px solid #00FFFF	Mehrzeiliger Text	optional

Format: block lead\n{{_\n| _ = _\n}}\n

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.

Vorlagenparameter[Vorlagendaten bearbeiten]

Diese Vorlage hat eine benutzerdefinierte Formatierung.

Parameter		Beschreibung	Typ	Status
Dateiname	image	Name der Datei, die als Hintergrundbild dient Beispiel Mona Lisa color restoration2.jpg	Datei	erforderlich
Imagemapcode	imagemap	Imagemap in X/HTML-Format, die als Hintergrundbild dient . Standard image	Wikitext	vorgeschlagen
Ausrichtung	float	Ausrichtung im Seitenlayout; right / left / center / none Standard right Beispiel left	Einzeiliger Text	vorgeschlagen
ohne Rahmen	noframe	Bild ohne Rahmen ausgeben Standard 0 Beispiel 1	Wahrheitswert	optional
Beschriftung	caption	Bildbeschriftung, die in der Bildlegende angezeigt werden soll Beispiel Mund-Nasenpartie der Mona Lisa	Einzeiliger Text	vorgeschlagen
Alternativtext	alt	Alternative Bildbeschreibung für Sehbehinderte Beispiel Ausschnitt aus dem Gemälde der Mona Lisa, der nur die Mund-Nasenpartie zeigt	Einzeiliger Text	optional
Seitenzahl	page	Angabe der gewünschten Seite, wenn die verwendete Datei im Parameter image ein PDF ist.	Einzeiliger Text	optional
Bildanmerkungen	annotations	Auf dem Bild platzierte Anmerkungen eingebunden über die Vorlage:Annotation Beispiel {{Annotation|left=120|top=50|text=Nase|font-size=16|font-weight=bold|color=#000000}}	Wikitext	vorgeschlagen
Schriftgröße Anmerkung	annot-font-size	Schriftgröße in Pixeln (ohne “px”) der auf dem Bild platzierten Anmerkungen verändern. Beispiel 12	Zahlenwert	optional
Schriftfarbe Anmerkung	annot-color	Farbattribute der auf dem Bild platzierten Anmerkungen ändern . Beispiel #DFDFDF	Einzeiliger Text	optional
Schriftart Anmerkung	annot-font-family	Schriftart der auf dem Bild platzierten Anmerkungen ändern. Beispiel monospace	Einzeiliger Text	optional
Schriftstyle Anmerkung	annot-font-style	Schriftstyle der auf dem Bild platzierten Anmerkungen ändern. Beispiel italic	Einzeiliger Text	optional
Textausrichtung Anmerkung	annot-text-align	Textausrichtung der auf dem Bild platzierten Anmerkungen ändern. Standard left Beispiel right	Einzeiliger Text	optional
Schrifthintergrund Anmerkung	annot-background-color	Farbattribute der auf dem Bild platzierten Anmerkungen ändern . Beispiel #DFDFDF	Einzeiliger Text	optional
Zeilenabstand Anmerkung	annot-line-height	Zeilenhöhe der auf dem Bild platzierten Anmerkungen ändern und auf Abstand setzen . Beispiel 12	Einzeiliger Text	optional
Bildbreite	image-width	Angabe als natürliche Zahl in Pixeln (ohne “px”) Beispiel 2000	Zahlenwert	erforderlich
Ausschnittsbreite	width	Angabe als natürliche Zahl in Pixeln (ohne “px”) Beispiel 250	Zahlenwert	vorgeschlagen
Ausschnittshöhe	height	Angabe als natürliche Zahl in Pixeln (ohne “px”) Beispiel 250	Zahlenwert	vorgeschlagen
Abstand links	image-left	Angabe als ganze Zahl in Pixeln (ohne “px”) Standard 0 Beispiel -850	Zahlenwert	vorgeschlagen
Abstand oben	image-top	Angabe als negative ganze Zahl in Pixeln (ohne “px”) Standard 0 Beispiel -850	Zahlenwert	vorgeschlagen
Außenrahmen	outer-css	CSS-Attribute wie Rahmenfarbe Beispiel border: 1px solid #00FFFF	Mehrzeiliger Text	optional
Innenrahmen	inner-css	CSS-Attribute wie Rahmenfarbe Beispiel border: 1px solid #00FFFF	Mehrzeiliger Text	optional

Kopiervorlagen

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

Alle Parameter

{{Annotiertes Bild
| image = 
| imagemap = 
| float = 
| noframe = 
| caption = 
| alt = 
| page = 

| annot-font-size = 
| annot-color = 
| annot-font-family = 
| annot-text-align = 
| annot-background-color= 
| annot-font-weight = 
| annot-font-style = 
| annot-line-height = 
| annotations =

| image-width = 
| image-left = 
| image-top = 
| width = 
| height = 
| outer-css = 
| inner-css = 
}}

Annotation

{{Annotiertes Bild
| image = 
| imagemap = 
| float = 
| noframe = 
| caption = 
| alt = 
| page = 

| annot-color = 
| annot-background-color= 
| annot-font-family = 
| annot-font-size =
| annot-font-weight = 
| annot-font-style = 
| annot-text-align = 
| annot-line-height = 
| annotations =

| image-width = 
| outer-css = 
| inner-css = 
}}

Bildausschnitt

{{Annotiertes Bild
| image = 
| imagemap = 
| float = 
| noframe = 
| caption = 
| alt = 
| page = 

| image-width = 
| image-left = 
| image-top = 
| width = 
| height = 
| outer-css = 
| inner-css = 
}}

Annotation

Himmel

Horizont

Meer

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:

{{Annotiertes Bild
| image = Pacific_Ocean_-_panoramio_-_---%3DXEON%3D---_(1).jpg
| image-width = 400
| annot-color = #000000
| annot-font-weight = normal
| annot-font-size = 18
| annotations = 
{{Annotation|left=290|top=66 |text=Himmel}}
{{Annotation|left=167|top=147|text=Horizont| font-size=16 | font-weight=bold | color=#FFFFFF}}
{{Annotation|left=56 |top=233|text=Meer| font-size=16 | font-weight=bold | color=#FFFFFF}}
| caption = Ein annotiertes Bild
}}

Bildzuschnitt

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

Die Ursprungsbreite des Bildes von 300 Pixeln ist bei Verwendung dieser Vorlage die wichtigste Größe.	Die fünf Größen, die den Bildausschnitt auswählen: image-width legt den Skalierungsbild 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. reskalierten) Bild ab. image-top ist meist eine negative Zahl und schneidet Pixel oben im (ggf. reskalierten) 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: Bildausschnitt Pixel 128...167 x 120...159 {{Annotiertes Bild | image = Mona Lisa color restoration2.jpg | image-width = 1800 | image-left = -768 | image-top = -720 | width = 240 | height = 240 | caption = Bildausschnitt der Pixel 128...167 × 120...159 }}
image = Mona Lisa color restoration2.jpg 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 image-width = 1800 Die neue Breite des Bildes: Da das alte Bild im Original 300 Pixel breit war, wird das Bild erst einmal um den Faktor $1800/300=6$ vergrößert. Alle folgenden Werte beziehen sich auf dieses um den Faktor 6 vergrößerte neue Bild! Von diesem wird oben und links was abgeschnitten und dann das Bild ausgewählt. image-left = -768 Es werden +768 Pixel vom linken Rand des vergrößerten neuen Bildes abgeschnitten. Das entspricht $768/6=128$ Pixel im originalen Bildes. image-top = -720 Es werden +720 Pixel vom oberen Rand des vergrößerten neuen Bildes abgeschnitten. Das entspricht $720/6=120$ Pixel des originalen Bildes. width = 240 Es werden horizontal 240 Pixel des vergrößerten neuen Bildes dargestellt. Das entspricht $240/6=40$ horizontale Pixel des originalen Bildes. height = 240 Es werden vertikal 240 Pixel des vergrößerten neuen Bildes dargestellt. Das entspricht $240/6=40$ vertikale Pixel des originalen Bildes. Ergebnis Im Endeffekt werden aus dem 300 × 260 Pixel großen Originalbild horizontal die Pixel 128...167 (40 Stück) und vertikal die Pixel 120...159 (40 Stück) dargestellt.

Bildvergrößerung im Bild

Nase-Mund-Partie der Mona Lisa

{{Annotiertes Bild
| image = Mona Lisa color restoration2.jpg
| image-width = 300
| outer-css = border: 8px outset #FFA500
| annotations =
{{Annotation|left=150|top=120|text=
{{Annotiertes Bild
| noframe = 1
| inner-css = border: 1px dashed
| image = Mona Lisa color restoration2.jpg
| image-width = 1000
| image-left = -425
| image-top = -400
| width = 110
| height = 110
}}
}}
| caption = Nase-Mund-Partie der Mona Lisa
}}

Anderes Bild im Bild

Mit doppeltem Rahmen

Ohne den Parameter noframe, mit inner-css.

Ludwigsdorfer Friedenseiche

{{Annotiertes Bild
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (13).jpg
| image-width = 400
| float = right
| annotations = {{Annotation|left=280|top=170|text={{Annotiertes Bild
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (08).jpg
| image-width = 150
| image-left = -47
| image-top = -5
| width = 100
| height = 100
| float = left
| inner-css = border:5px; border-color:#00ff00; border-style:solid;
| caption =
}}
}}
| caption = Ludwigsdorfer Friedenseiche
}}

Mit Rahmen

Mit den Parametern noframe und inner-css für einen grünen Rand.

Ludwigsdorfer Friedenseiche

{{Annotiertes Bild
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (13).jpg
| image-width = 400
| float = right
| annotations = {{Annotation|left=280|top=170|text={{Annotiertes Bild
| noframe = 1
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (08).jpg
| image-width = 150
| image-left = -47
| image-top = -5
| width = 100
| height = 100
| float = left
| inner-css = border:5px; border-color:#00ff00; border-style:solid;
| caption =
}}
}}
| caption = Ludwigsdorfer Friedenseiche
}}

Ohne Rahmen

Mit den Parametern noframe und inner-css border:none.

Ludwigsdorfer Friedenseiche

{{Annotiertes Bild
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (13).jpg
| image-width = 400
| float = right
| annotations = {{Annotation|left=280|top=170|text={{Annotiertes Bild
| noframe = 1
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (08).jpg
| image-width = 150
| image-left = -47
| image-top = -5
| width = 100
| height = 100
| float = left
| inner-css = border:none;
| caption =
}}
}}
| caption = Ludwigsdorfer Friedenseiche
}}

Mit dünnem weißem Rahmen

Mit den Parametern noframe, ohne inner-css.

Ludwigsdorfer Friedenseiche

{{Annotiertes Bild
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (13).jpg
| image-width = 400
| float = right
| annotations = {{Annotation|left=280|top=170|text={{Annotiertes Bild
| noframe = 1
| image = Ludwigsdorf, Friedenseiche und Gedenkstein 1870-71 (08).jpg
| image-width = 150
| image-left = -47
| image-top = -5
| width = 100
| height = 100
| float = left
| caption =
}}
}}
| caption = Ludwigsdorfer Friedenseiche
}}
|}

Siehe auch

• Vorlage:Annotation
• Vorlage:Große Imagemap

Lua

Diese Vorlage wurde ganz oder teilweise mit Hilfe der Programmiersprache Lua erstellt.

Die Module sind mit #invoke eingebunden. In der Dokumentation der einzelnen Module finden sich auch weitere Hinweise zu Rückfragen.

Verwendetes Modul: TemplUtl #faculty

Werkzeuge

Bei technischen Fragen zu dieser Vorlage kannst du dich auch an die Vorlagenwerkstatt wenden. Inhaltliche Fragen und Vorschläge gehören zunächst auf die Diskussionsseite. Sie können ggf. auch an eine passende Redaktion, Portal usw. gerichtet werden.

• Verwendungen dieser Vorlage
• Cirrus-Suche zu Einbindungen dieser Vorlage (zunächst nur ANR) mit weiteren Möglichkeiten
• Anzahl der Einbindungen
• Liste der Unterseiten.
• Diese Dokumentation befindet sich auf einer eingebundenen Unterseite [Bearbeiten].
• Test-/Beispielseite erstellen.