Vorlage:AnleitungScreenshotImText: Unterschied zwischen den Versionen

Aktuelle Version vom 3. Juli 2024, 12:22 Uhr

Diese Vorlage ist für sehr kleine Screenshots gedacht. Sie bindet den Screenshot direkt in einen Absatz ein. Der Screenshot wird linksbündig im Absatz eingefügt und der Text umfließt den Screenshot auf der rechten Seite.

{{AnleitungScreenshotImText|Dateiname|Alternativtext|Beschreibung}}

Dateiname: Nur der Dateiname mit Endung. Es wird kein vorangestelltes File: oder Datei: benötigt(, kann aber auch mit interpretiert werden). Kann bspw. aus dem Seitentitel in der Vorschau kopiert werden.
Alternativtext: Wird für Screenreader benötigt und soll eine Beschreibung des Bildinhalts sein. Formatierungen sind nicht notwendig. Wenn kein Alternativtext angegeben wurde, erscheint zur Erinnerung unterhalb des Bildes ein roter Warnhinweis.
Beschreibung: Anleitungstext. Dieser Text umfließt den Screenshot auf der rechten Seite.

Vorschau:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Diese Vorlage ist für sehr kleine Screenshots gedacht. Sie bindet den Screenshot direkt in einen Absatz ein. Der Screenshot wird linksbündig im Absatz eingefügt und der Text umfließt den Screenshot auf der rechten Seite.

Vorlagenparameter
Diese Vorlage bevorzugt Blockformatierung von Parametern.
Parameter		Beschreibung	Typ	Status
Dateiname	`1`	Dateiname des Screenshots	Datei	erforderlich
Alternativtext	`2`	Der Alternativtext kann mit Screenreadern vorgelesen werden und soll möglichst genau beschreiben, was auf dem Bild zu sehen ist.	Zeichenfolge	erforderlich
Absatz	`3`	Der Absatz in dessen linker oberer Ecke das möglichst kleine Bild angezeigt werden soll.	Inhalt	erforderlich

@@ Zeile 1: / Zeile 1: @@
-<includeonly>
+<noinclude>[[category:Vorlage]][[category:Vorlage für Anleitungen]][[category:Screenshot]]
-{{AnleitungAbsatz|<div class="screenshotrahmen screenshotImText">
+Diese Vorlage ist für sehr kleine Screenshots gedacht. Sie bindet den Screenshot direkt in einen Absatz ein. Der Screenshot wird linksbündig im Absatz eingefügt und der Text umfließt den Screenshot auf der rechten Seite.
+<code><nowiki>{{AnleitungScreenshotImText|Dateiname|Alternativtext|Beschreibung}}</nowiki></code>
+* '''Dateiname''': Nur der Dateiname mit Endung. Es wird kein vorangestelltes '''File:''' oder '''Datei:''' benötigt(, kann aber auch mit interpretiert werden).  Kann bspw. aus dem Seitentitel in der Vorschau kopiert werden.
+* '''Alternativtext''': Wird für Screenreader benötigt und soll eine Beschreibung des Bildinhalts sein. Formatierungen sind nicht notwendig. Wenn '''kein Alternativtext''' angegeben wurde, erscheint zur Erinnerung unterhalb des Bildes ein roter Warnhinweis.
+* '''Beschreibung''': Anleitungstext. Dieser Text umfließt den Screenshot auf der rechten Seite.
+'''Vorschau''':
+<div class="barrierefrei absatz screenshotImText"><div class="screenshotrahmen">
+[[Datei:Schnelleinstieg Features filtern.png|center|frameless|50x50px|alt=Ein Lupensymbol]]
+</div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</noinclude><!--
+--><includeonly><div class="barrierefrei absatz screenshotImText">
+<div class="screenshotrahmen">
 [[{{#switch: {{#explode:{{{1|}}}|:|0}}
   | File
@@ Zeile 6: / Zeile 22: @@
   | datei
   | Datei =
-  | #default = File:}}{{{1}}}|center|frameless|50x50px|alt={{{2|  }}}]]
+  | #default = File:}}{{{1|}}}|center|frameless|50x50px|alt={{{2|}}}]]
-</div>{{{3|  }}}<!--
+</div>{{{3|}}}<!--
--->{{#if: {{{2|  }}}| |<div class=barrierefrei style="text-align: center; padding: 0 5px; margin-left 5px; border: solid 1px red;">Bitte fügen Sie dem Bild einen Alternativtext hinzu. [[Vorlage:AnleitungScreenshot|Hier finden Sie die Beschreibung der Vorlage.]]</div>}}<!--
+-->{{#if: {{{2|}}}| |<div class=barrierefrei style="text-align: center; padding: 0 5px; margin-left 5px; border: solid 1px red;">Bitte fügen Sie dem Bild einen Alternativtext hinzu. [[Vorlage:AnleitungScreenshot|Hier finden Sie die Beschreibung der Vorlage.]]</div>}}<!--
--->}}</includeonly>
+--></div></includeonly><noinclude>
+<templatedata>
+{
+	"params": {
+		"1": {
+			"label": "Dateiname",
+			"description": "Dateiname des Screenshots",
+			"type": "wiki-file-name",
+			"required": true
+		},
+		"2": {
+			"label": "Alternativtext",
+			"description": "Der Alternativtext kann mit Screenreadern vorgelesen werden und soll möglichst genau beschreiben, was auf dem Bild zu sehen ist.",
+			"type": "string",
+			"required": true
+		},
+		"3": {
+			"label": "Absatz",
+			"description": "Der Absatz in dessen linker oberer Ecke das möglichst kleine Bild angezeigt werden soll.",
+			"type": "content",
+			"required": true
+		}
+	},
+	"format": "block",
+	"description": "Diese Vorlage ist für sehr kleine Screenshots gedacht. Sie bindet den Screenshot direkt in einen Absatz ein. Der Screenshot wird linksbündig im Absatz eingefügt und der Text umfließt den Screenshot auf der rechten Seite."
+}
+</templatedata>
+</noinclude>