Vorlage:Mehrere Bilder
<templatestyles src="Mehrere Bilder/styles.css" />
<templatestyles src="TOC nonum/styles.css"></templatestyles>
⧼templatedata-doc-params⧽
| ⧼templatedata-doc-param-name⧽ | ⧼templatedata-doc-param-desc⧽ | ⧼templatedata-doc-param-type⧽ | ⧼templatedata-doc-param-status⧽ | |
|---|---|---|---|---|
| Ausrichtung | align | Ausrichtung im Seitenlayout; right / left / center
| ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Richtung | Richtung | Einzelbilder horizontal oder vertikal anordnen
| ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Kopfzeilentext | Kopfzeile | Text in der Kopfzeile, falls eine solche gewünscht
| ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Kopfzeilenhintergrund | Kopfzeile_Hintergrund | Farbcode für die Hintergrundfarbe der Kopfzeile
| ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Kopfzeilenausrichtung | Kopfzeile_align | Ausrichtung der Kopfzeile zu den Bildern; center / left / right
| ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Fußzeilentext | Fußzeile | Text in der Fußzeile, falls eine solche gewünscht
| ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Fußzeilenhintergrund | Fußzeile_Hintergrund | Farbcode für die Hintergrundfarbe der Fußzeile
| ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Fußzeilenausrichtung | Fußzeile_align | Ausrichtung der Fußzeile zu den Bildern; center / left / right
| ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Standardbreite | Breite | Feste Breite für alle Bilder; in Pixeln (ohne “px”)
| ⧼templatedata-doc-param-type-number⧽ | ⧼templatedata-doc-param-status-suggested⧽ |
| Hintergrundfarbe | Hintergrund | Farbcode für die Hintergrundfarbe (alles)
| ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Legende nach unten | unten | Bildlegenden (Untertitel) unten bündig oder zentriert ausrichten, nur für horizontale Anordnung
| ⧼templatedata-doc-param-type-boolean⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Untertitel zentrieren | center | Bildlegenden zentriert setzen, nur für vertikale Anordnung
| ⧼templatedata-doc-param-type-boolean⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Bilddatei1 | Bild1 | Seitenname des ersten Bildes (ohne “Datei:”)
| ⧼templatedata-doc-param-type-wiki-file-name⧽ | ⧼templatedata-doc-param-status-required⧽ |
| Untertitel1 | Untertitel1 | Legende dieses Bildes | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Breite1 | Breite1 | individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung
| ⧼templatedata-doc-param-type-number⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Beschreibung1 | Beschreibung1 | Zusätzliche Beschreibung dieses Bildes (Tooltip) | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Alt1 | Alt1 | Alternativtext zu diesem Bild | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Class1 | Class1 | CSS-Klassen zu diesem Bild | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Bilddatei2 | Bild2 | Seitenname des zweiten Bildes (ohne “Datei:”) | ⧼templatedata-doc-param-type-wiki-file-name⧽ | ⧼templatedata-doc-param-status-required⧽ |
| Untertitel2 | Untertitel2 | Legende dieses Bildes | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Breite2 | Breite2 | individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung
| ⧼templatedata-doc-param-type-number⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Beschreibung2 | Beschreibung2 | Zusätzliche Beschreibung dieses Bildes (Tooltip) | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Alt2 | Alt2 | Alternativtext zu diesem Bild | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Class2 | Class2 | CSS-Klassen zu diesem Bild | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Bilddatei3 | Bild3 | Seitenname eines weiteren Bildes | ⧼templatedata-doc-param-type-wiki-file-name⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Untertitel3 | Untertitel3 | Legende dieses Bildes | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Breite3 | Breite3 | individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung
| ⧼templatedata-doc-param-type-number⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Beschreibung3 | Beschreibung3 | Zusätzliche Beschreibung dieses Bildes (Tooltip) | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Alt3 | Alt3 | Alternativtext zu diesem Bild | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Class3 | Class3 | CSS-Klassen zu diesem Bild | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Bilddatei4 | Bild4 | Seitenname eines weiteren Bildes | ⧼templatedata-doc-param-type-wiki-file-name⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Untertitel4 | Untertitel4 | Legende dieses Bildes | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Breite4 | Breite4 | individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung
| ⧼templatedata-doc-param-type-number⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Beschreibung4 | Beschreibung4 | Zusätzliche Beschreibung dieses Bildes (Tooltip) | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Alt4 | Alt4 | Alternativtext zu diesem Bild | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Class4 | Class4 | CSS-Klassen zu diesem Bild | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Bilddatei5 | Bild5 | Seitenname eines weiteren Bildes | ⧼templatedata-doc-param-type-wiki-file-name⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Untertitel5 | Untertitel5 | Legende dieses Bildes | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Breite5 | Breite5 | individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung
| ⧼templatedata-doc-param-type-number⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Beschreibung5 | Beschreibung5 | Zusätzliche Beschreibung dieses Bildes (Tooltip) | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Alt5 | Alt5 | Alternativtext zu diesem Bild | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
| Class5 | Class5 | CSS-Klassen zu diesem Bild | ⧼templatedata-doc-param-type-line⧽ | ⧼templatedata-doc-param-status-optional⧽ |
Kopiervorlage
<syntaxhighlight lang="wikitext" copy>
<templatestyles src="Mehrere Bilder/styles.css" />
</syntaxhighlight>
Hinweise
- Anzahl der Bilder
- Die Anzahl der Bilder ist beschränkt auf fünf. Was über die Anzahl von fünf hinaus codiert ist, wird einfach nicht dargestellt, wobei der rechte Rahmen u. U. etwas dicker ausfällt.
- Breite
- Der Parameter
Breiteüberschreibt die ParameterBreite1,Breite2,Breite3,Breite4, undBreite5. Voreingestellt ist ein Wert von 150 px. - Sinnvoll ist dies, um bei vertikaler Ausrichtung der Bilder eine einheitliche Darstellung zu erreichen.
- Wenn bei „horizontaler“ Ausrichtung die Breite der Bilder individuell angepasst werden soll, um einheitliche Bildhöhen zu erreichen, muss der Parameter
Breitefrei bleiben. - Aus technischen Gründen (durch die Verwendung als Attribut von
<div></div>-Tags für die Festlegung der Größen) ist es derzeit leider nicht möglich, wie bei herkömmlichen Bildeinbindungen neben der Breite auch die Höhe der Bilder festzulegen (etwa durch ein vorgestelltesx).
Probleme
Diese Vorlage sollte sparsam eingesetzt werden. Eine Galerie wäre zu bevorzugen. Zu den mit der Vorlage verbundenen Problemen gehören:
- Es ist eine feste Bildgröße erforderlich. Hierdurch wird dem angemeldeten Nutzer die Möglichkeit genommen, die Größe der Bilddarstellung in seinen Voreinstellungen nach seinen Wünschen anzupassen. Wenn die Bilder größer als ein Miniaturbild sind, muss der Leser bei einer langsamen Internetverbindung gegebenenfalls auf das Herunterladen der Bilder warten, auch wenn sie ihn gar nicht interessieren. In einer gewöhnlichen Galerie wird hingegen die Miniaturbild-Eigenschaft ausgenutzt, die auch individuell konfigurierbar ist.
- Festes Layout; die Darstellung „nebeneinander“ ist bei größeren Bildern oder größerer Anzahl auf Smartphones (zurzeit die Mehrzahl unserer Abrufe) nicht sinnvoll möglich. Eine Galerie passt sich dynamisch den Verhältnissen auf dem aktuellen Endgerät an. 2008, als die Vorlage entstand, gab es noch kein Wiki auf Smartphone.
- Um Bilder, die kein einheitliches Format haben, in der Darstellung "nebeneinander" mit einheitlicher Bildhöhe darzustellen, muss für jedes einzelne Bild eine passende Bildbreite ermittelt werden.
Beispiele
Beispiel mit zwei Bildern nebeneinander am rechten Rand
<templatestyles src="Mehrere Bilder/styles.css" />
<syntaxhighlight lang="wikitext">
<templatestyles src="Mehrere Bilder/styles.css" />
</syntaxhighlight>
Beispiel mit zwei Bildern übereinander am linken Rand
(Untertitel zentriert)
<templatestyles src="Mehrere Bilder/styles.css" />
<syntaxhighlight lang="wikitext">
<templatestyles src="Mehrere Bilder/styles.css" />
</syntaxhighlight>
Beispiel mit separaten Untertiteln
<templatestyles src="Mehrere Bilder/styles.css" />
<syntaxhighlight lang="wikitext">
<templatestyles src="Mehrere Bilder/styles.css" />
</syntaxhighlight>
Beispiel mit unterschiedlicher Höhe
<templatestyles src="Mehrere Bilder/styles.css" />
<syntaxhighlight lang="wikitext">
<templatestyles src="Mehrere Bilder/styles.css" />
</syntaxhighlight>
Untertitel unten und zentriert
<templatestyles src="Mehrere Bilder/styles.css" />
<syntaxhighlight lang="wikitext">
<templatestyles src="Mehrere Bilder/styles.css" />
</syntaxhighlight>
Beispiel mit Hintergrundfarbe
<templatestyles src="Mehrere Bilder/styles.css" />
<syntaxhighlight lang="wikitext">
<templatestyles src="Mehrere Bilder/styles.css" />
</syntaxhighlight>
Vorlage:Dokumentation/Siehe auch