„Vorlage:Annotiertes Bild“ – Versionsunterschied
Zur Navigation springen
Zur Suche springen
[gesichtete Version] | [gesichtete Version] |
Inhalt gelöscht Inhalt hinzugefügt
Hgzh (Diskussion | Beiträge) wird im Minerva-Skin per !important überschrieben und führt zu overflow, daher hier eins drüber |
K body? Markierung: Zurückgesetzt |
||
Zeile 7: | Zeile 7: | ||
<div {{#if: {{#invoke:TemplUtl|faculty|{{{noframe|}}}|0}}| |class="thumbinner"}} style="overflow:hidden;width:{{#expr:{{{width|{{{image-width|300}}}}}}+2}}px;"> |
<div {{#if: {{#invoke:TemplUtl|faculty|{{{noframe|}}}|0}}| |class="thumbinner"}} style="overflow:hidden;width:{{#expr:{{{width|{{{image-width|300}}}}}}+2}}px;"> |
||
<div class="thumbimage" style="{{#if:{{{height|}}}|height:{{#expr:{{{height}}}+2}}px;}} overflow:hidden; position:relative; {{{inner-css|}}};"> |
<div class="thumbimage" style="{{#if:{{{height|}}}|height:{{#expr:{{{height}}}+2}}px;}} overflow:hidden; position:relative; {{{inner-css|}}};"> |
||
<div style="{{{image-css|}}};left:{{{image-left|0}}}px; top:{{{image-top|0}}}px; width:{{{image-width|300}}}px; position:absolute; |
<div style="{{{image-css|}}};left:{{{image-left|0}}}px; top:{{{image-top|0}}}px; width:{{{image-width|300}}}px; position:absolute; backgroundr:{{{image-bg-color|white}}}; color:#{{Standardfarbe|text|body}};"> {{#if:{{{imagemap|}}}|{{{imagemap}}}|[[Datei:{{#if: {{{image|}}}|{{{image}}}|No image available-de.svg}}|page={{{page}}}|{{{image-width|300}}}px|alt={{{alt|alternative Beschreibung}}}|{{{caption|Bildlegende}}}]]}}</div> |
||
<div style="text-align:{{{annot-text-align|left}}}; background |
<div style="text-align:{{{annot-text-align|left}}}; background:{{{annot-background-color|transparent}}}; color:#{{Standardfarbe|text|body}}; {{#if:{{{annot-font-family|}}}|font-family:{{{annot-font-family}}};|}} {{#if:{{{annot-font-size|}}}|font-size:{{{annot-font-size}}}px;|}} {{#if:{{{annot-font-weight|}}}|font-weight:{{{annot-font-weight}}};|}} {{#if:{{{annot-font-style|}}}|font-style:{{{annot-font-style}}};|}} {{#if:{{{annot-color|}}}|color:{{{annot-color}}};|}} {{#if:{{{annot-line-height|}}}|line-height:{{{annot-line-height}}};|{{#if:{{{annot-font-size|}}}|line-height:{{#expr:{{{annot-font-size|}}}+2}}px; |line-height:110%;}}}}"> |
||
<!--annotation|left|top--> |
<!--annotation|left|top--> |
||
{{{annotations|}}} |
{{{annotations|}}} |
Version vom 3. August 2024, 16:57 Uhr
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
| Datei | erforderlich |
Imagemapcode | imagemap |
| Wikitext | vorgeschlagen |
Ausrichtung | float | Ausrichtung im Seitenlayout; right / left / center / none
| Einzeiliger Text | vorgeschlagen |
ohne Rahmen | noframe | Bild ohne Rahmen ausgeben
| Wahrheitswert | optional |
Beschriftung | caption | Bildbeschriftung, die in der Bildlegende angezeigt werden soll
| Einzeiliger Text | vorgeschlagen |
Alternativtext | alt | Alternative Bildbeschreibung für Sehbehinderte
| 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
| Wikitext | vorgeschlagen |
Schriftgröße Anmerkung | annot-font-size | Schriftgröße in Pixeln (ohne “ px ”) der auf dem Bild platzierten Anmerkungen verändern.
| Zahlenwert | optional |
Schriftfarbe Anmerkung | annot-color | Farbattribute der auf dem Bild platzierten Anmerkungen ändern Farbname white oder hexadezimaler Farbwert#FFFFFF .
| Einzeiliger Text | optional |
Schriftart Anmerkung | annot-font-family | Schriftart der auf dem Bild platzierten Anmerkungen ändern.
| Einzeiliger Text | optional |
Schriftstyle Anmerkung | annot-font-style | Schriftstyle der auf dem Bild platzierten Anmerkungen ändern.
| Einzeiliger Text | optional |
Textausrichtung Anmerkung | annot-text-align | Textausrichtung der auf dem Bild platzierten Anmerkungen ändern.
| Einzeiliger Text | optional |
Schrifthintergrund Anmerkung | annot-background-color | Farbattribute der auf dem Bild platzierten Anmerkungen ändern Farbname white oder hexadezimaler Farbwert#FFFFFF .
| 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.
| Einzeiliger Text | optional |
Bildbreite | image-width | Angabe als natürliche Zahl in Pixeln (ohne “ px ”)
| Zahlenwert | erforderlich |
Ausschnittsbreite | width | Angabe als natürliche Zahl in Pixeln (ohne “ px ”)Nicht größer als das Bild image-width selbst.
| Zahlenwert | vorgeschlagen |
Ausschnittshöhe | height | Angabe als natürliche Zahl in Pixeln (ohne “ px ”)Nicht größer als das Bild image-width selbst.
| 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.
| 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.
| Zahlenwert | vorgeschlagen |
Außenrahmen | outer-css | CSS-Attribute wie Rahmenfarbe
| Mehrzeiliger Text | optional |
Innenrahmen | inner-css | CSS-Attribute wie Rahmenfarbe
| 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 = }}
{{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 = }}
{{Annotiertes Bild | image = | imagemap = | float = | noframe = | caption = | alt = | page = | image-width = | image-left = | image-top = | width = | height = | outer-css = | inner-css = }}
Annotation
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:
Durch folgende Vorlage wird der Ausschnitt erzeugt:
{{Annotiertes Bild | image = Mona Lisa color restoration2.jpg | image-width = 2000 | image-left = -850 | image-top = -800 | width = 250 | height = 250 | caption = Bildausschnitt }} Das Ergebnis ist ein Bild von 250 x 250 Pixeln aus dem Originalbild von 2000 Pixeln Breite: |
Bildvergrößerung im Bild
{{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 = Nasemundpartie der Mona Lisa }}
Anderes Bild im Bild
Mit doppeltem Rahmen
Ohne den Parameter noframe
, mit inner-css
.
{{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.
{{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.
{{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
.
{{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
Lua
Verwendetes Modul: TemplUtl #faculty