Vorlage:Anleitung2Screenshots: Unterschied zwischen den Versionen

Aktuelle Version vom 30. August 2022, 10:56 Uhr

Vorlage für die Integration von zwei kleineren Bildern in einer Anleitung, die nebeneinander stehen sollen. Die Vorlage nutzt die gleiche Vorlage für Absätze in Anleitungen. Es werden bis zu sieben Parameter benötigt:

{{Anleitung2Screenshots
  |DateinameLinks
  |AlternativtextLinks
  |BildunterschriftLinks
  |DateinameRechts
  |AlternativtextRechts
  |BildunterschriftRechts
  |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 unterhalb des Bildes ein roter Warnhinweis.
Bildunterschrift: Jedes der beiden Bilder kann mit einer Bildunterschrift versehen werden.
Beschreibung: Anleitungstext. Kann Formatiert werden und wird als Absatz oberhalb der Screenshots gezeigt.

Vorschau:

BeispielAbsatz

Bildunterschrift links

Bildunterschrift rechts

@@ Zeile 1: / Zeile 1: @@
-{{#if: {{{7|  }}}|{{AnleitungAbsatz|{{{7|  }}}}}|}}
+<noinclude>[[category:Vorlage]][[category:Vorlage für Anleitungen]][[category:Screenshot]]
-<div class="barrierefrei" style="display: grid; grid-template-columns: auto auto;">
+Vorlage für die Integration von zwei kleineren Bildern in einer Anleitung, die nebeneinander stehen sollen. Die Vorlage nutzt die gleiche Vorlage für Absätze in Anleitungen. Es werden bis zu sieben Parameter benötigt:
-<div style="grid-column: 1 / span 1; grid-row: 1 / span 1; whitesmoke; border: solid 1px lightgray; padding: 5px; margin-right: 5em;">
+<pre><nowiki>{{Anleitung2Screenshots
+  |DateinameLinks
+  |AlternativtextLinks
+  |BildunterschriftLinks
+  |DateinameRechts
+  |AlternativtextRechts
+  |BildunterschriftRechts
+  |Beschreibung
+}}</nowiki></pre>
+* '''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 unterhalb des Bildes ein roter Warnhinweis.
+* '''Bildunterschrift''': Jedes der beiden Bilder kann mit einer Bildunterschrift versehen werden.
+* '''Beschreibung''': Anleitungstext. Kann Formatiert werden und wird als Absatz oberhalb der Screenshots gezeigt.
+'''Vorschau''':
+{{AnleitungAbsatz|BeispielAbsatz}}
+<div class="barrierefrei screenshot" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1em;">
+<div class="screenshotrahmen" style="grid-column: 1 / span 1; grid-row: 1 / span 1;">
+[[File:PdfCollector Vorauswahl.png|center|frameless|340x340px|alt=Beispielscreenshot1]]
+</div>
+<div class="screenshotrahmen" style="grid-column: 2 / span 1; grid-row: 1 / span 1;">
+[[File:PdfCollector Vorauswahl.png|center|frameless|340x340px|alt=Beispielscreenshot2]]
+</div>
+<div style="grid-column: 1 / span 1; grid-row: 2 / span 1; margin-top: -0.5em;">
+<small>Bildunterschrift links</small>
+</div>
+<div style="grid-column: 2 / span 1; grid-row: 2 / span 1; margin-top: -0.5em;">
+<small>Bildunterschrift rechts</small>
+</div>
+</div>
+</noinclude><includeonly>{{#if: {{{7|  }}}|{{AnleitungAbsatz|{{{7|  }}}}}|}}
+<div class="barrierefrei screenshot" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1em;">
+<div class="screenshotrahmen" style="grid-column: 1 / span 1; grid-row: 1 / span 1;">
 [[{{#switch: {{#explode:{{{1|PdfCollector Vorauswahl.png}}}|:|0}}
   | File
@@ Zeile 9: / Zeile 43: @@
   | #default = File:}}{{{1|PdfCollector Vorauswahl.png}}}|center|frameless|340x340px|alt={{{2|  }}}]]
 </div>
-<div style="grid-column: 2 / span 1; grid-row: 1 / span 1; background-color: whitesmoke; border: solid 1px lightgray; padding: 5px">
+<div class="screenshotrahmen" style="grid-column: 2 / span 1; grid-row: 1 / span 1;">
 [[{{#switch: {{#explode:{{{4|PdfCollector Vorauswahl.png}}}|:|0}}
   | File
@@ Zeile 16: / Zeile 50: @@
   | Datei =
   | #default = File:}}{{{4|PdfCollector Vorauswahl.png}}}|center|frameless|340x340px|alt={{{5|  }}}]]
+</div>{{#if: {{{2|  }}}| |<div style="grid-column: 1 / span 1; grid-row: 2 / span 1; text-align: center; padding: 0 5px; border: solid 1px red;">Bitte fügen Sie dem Bild einen Alternativtext hinzu. [[Vorlage:Anleitung2Screenshots|Hier finden Sie die Beschreibung der Vorlage.]]</div>}}{{#if: {{{5|  }}}| |<div style="grid-column: 2 / span 1; grid-row: 2 / span 1; text-align: center; padding: 0 5px; border: solid 1px red;">Bitte fügen Sie dem Bild einen Alternativtext hinzu. [[Vorlage:Anleitung2Screenshots|Hier finden Sie die Beschreibung der Vorlage.]]</div>}}<div style="grid-column: 1 / span 1; grid-row: {{#if: {{{2|  }}}|2|3}} / span 1; margin-top: -0.5em;">
+<small>{{{3|Bild 1: Icon „Details zur Akte anzeigen“}}}</small>
 </div>
-{{#if: {{{2|  }}}| |<div style="grid-column: 1 / span 1; grid-row: 2 / span 1; 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>}}
+<div style="grid-column: 2 / span 1; grid-row: {{#if: {{{5|  }}}|2|3}} / span 1; margin-top: -0.5em;">
-{{#if: {{{5|  }}}| |<div style="grid-column: 2 / span 1; grid-row: 2 / span 1; 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>}}
+<small>{{{6|Bild 2: Icon „Workflow starten“}}}</small>
-<div style="grid-column: 1 / span 1; grid-row: 3 / span 1;">
-{{{3|Bild 1: Icon „Details zur Akte anzeigen“}}}
-</div>
-<div style="grid-column: 2 / span 1; grid-row: 3 / span 1;">
-{{{6|Bild 2: Icon „Workflow starten“}}}
-</div>
-</div>
 </div>
+</div></includeonly>