Vorlage:ScreenshotKachel: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
<div style=" | <noinclude> | ||
[[category:Vorlage]][[category:Vorlage für Anleitungen]][[category:Screenshot]] | |||
Vorlage für die Verwendung in einem responsiven Grid wie in der Anleitung zum [[Schnelleinstieg#Startseite|Schnelleinstieg im Kapitel Startseite]]. Die Vorlage muss in ein <div> mit der Eigenschaft display: grid; eingebettet werden. Es können bis zu drei bis vier Parameter eingegeben werden. | |||
<code><nowiki>{{AnleitungScreenshot|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. | |||
* '''Beschreibung''': Anleitungstext. Kann 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}}} | grid-column: span {{{4|1}}} | ||
"> | "> | ||
| Zeile 11: | Zeile 23: | ||
| Datei = | | Datei = | ||
| #default = File:}}{{{1|PdfCollector Vorauswahl.png}}}|center|frameless|x70px|alt={{{2| }}}]] | | #default = File:}}{{{1|PdfCollector Vorauswahl.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=" | ||
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| }}}|{{AnleitungAbsatz|{{{3| }}}}}|}} | {{#if: {{{3| }}}|{{AnleitungAbsatz|{{{3| }}}}}|}} | ||
</div> | </div> | ||
Version vom 6. September 2022, 14:46 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. Es können bis zu drei bis vier Parameter eingegeben werden.
{{AnleitungScreenshot|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.
- Beschreibung: Anleitungstext. Kann 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:
