Vorlage:ScreenshotKachel: Unterschied zwischen den Versionen

Aktuelle Version vom 25. Oktober 2022, 12:10 Uhr

Vorlage für die Verwendung in einem responsiven Grid wie in der Anleitung zum Schnelleinstieg im Kapitel Startseite. Die Vorlage muss in ein

mit der Eigenschaft display: grid; eingebettet werden oder im Rahmen der Vorlage {{ScreenshotRaster}}. Es können drei bis vier Parameter eingegeben werden.

{{AnleitungScreenshotKachel|Dateiname|Alternativtext|Beschreibung|Optional:relative Breite}}

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: Kann normal formatiert werden und wird als Absatz unterhalb des Screenshots gezeigt.
relative Breite: In Relation zu anderen Elementen im Grid kann angegeben werden, ob die Kachel breiter als die übrigen Kacheln angezeigt werden soll.

Vorschau:

Bitte fügen Sie dem Bild einen Alternativtext hinzu. Hier finden Sie die Beschreibung der Vorlage.

@@ Zeile 1: / Zeile 1: @@
-<div style="
+<noinclude>
+[[category:Vorlage]][[category:Vorlage für Anleitungen]][[category:Screenshot]][[category:ScreenshotRaster]]
+Vorlage für die Verwendung in einem responsiven Grid wie in der Anleitung zum [[Schnelleinstieg in DMS/eAkte#Startseite|Schnelleinstieg im Kapitel Startseite]]. Die Vorlage muss in ein <div> mit der Eigenschaft display: grid; eingebettet werden oder im Rahmen der Vorlage <code><nowiki>{{ScreenshotRaster}}</nowiki></code>. Es können drei bis vier Parameter eingegeben werden.
+<code><nowiki>{{AnleitungScreenshotKachel|Dateiname|Alternativtext|Beschreibung|Optional:relative Breite}}</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 unterhalb des Bildes ein roter Warnhinweis.
+* '''Bildunterschrift''': Kann normal formatiert werden und wird als Absatz unterhalb des Screenshots gezeigt.
+* '''relative Breite''': In Relation zu anderen Elementen im Grid kann angegeben werden, ob die Kachel breiter als die übrigen Kacheln angezeigt werden soll.
+'''Vorschau''':
+</noinclude><div style="
     grid-column: span {{{4|1}}}
 ">
-<div class="screenshotrahmen" style="
+<div class="screenshotrahmen">
-   padding: 5px;
-">
 [[{{#switch: {{#explode:{{{1|PdfCollector Vorauswahl.png}}}|:|0}}
   | File
@@ Zeile 10: / Zeile 20: @@
   | datei
   | Datei =
-  | #default = File:}}{{{1|PdfCollector Vorauswahl.png}}}|center|frameless|x70px|alt={{{2|  }}}]]
+  | #default = File:}}{{{1|Schnelleinstieg Person.png}}}|center|frameless|x70px|alt={{{2|  }}}]]
-</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>}}
+</div>{{#if: {{{2|  }}}| |<div class=barrierefrei style="
-{{#if: {{{3|  }}}|{{AnleitungAbsatz|{{{3|  }}}}}|}}
+   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: {{{3|  }}}|<small>{{AnleitungAbsatz|{{{3|  }}}}}</small>|}}
 </div>