Our website is made possible by displaying online advertisements to our visitors.
Please consider supporting us by disabling your ad blocker.

Responsive image


Vorlage:Mehrere Bilder

Anzeigen von zwei bis fünf Bildern in einem Kasten, wobei die Bilder nebeneinander oder übereinander platziert werden können, falls keine Galerie möglich oder sinnvoll ist.

Vorlagenparameter

Ausrichtungalign
Ausrichtung im Seitenlayout; right / left / center
Standard
right
Beispiel
left
RichtungRichtung
Einzelbilder horizontal oder vertikal anordnen
Standard
horizontal
Beispiel
vertical
KopfzeilentextKopfzeile
Text in der Kopfzeile, falls eine solche gewünscht
Beispiel
Alpenpanorama
KopfzeilenhintergrundKopfzeile_Hintergrund
Farbcode für die Hintergrundfarbe der Kopfzeile
Standard
transparent
Beispiel
#DA70D6
KopfzeilenausrichtungKopfzeile_align
Ausrichtung der Kopfzeile zu den Bildern; center / left / right
Standard
center
Beispiel
left
FußzeilentextFußzeile
Text in der Fußzeile, falls eine solche gewünscht
Beispiel
Im Vordergrund der See, im Hintergrund die Berge
FußzeilenhintergrundFußzeile_Hintergrund
Farbcode für die Hintergrundfarbe der Fußzeile
Standard
transparent
Beispiel
#00FA9A
FußzeilenausrichtungFußzeile_align
Ausrichtung der Fußzeile zu den Bildern; center / left / right
Standard
left
Beispiel
center
StandardbreiteBreite
Feste Breite für alle Bilder; in Pixeln (ohne “px”)
Standard
150
Beispiel
250
HintergrundfarbeHintergrund
Farbcode für die Hintergrundfarbe (alles)
Standard
transparent
Beispiel
#FFE4B5
Legende nach untenunten
Bildlegenden (Untertitel) unten bündig oder zentriert ausrichten, nur für horizontale Anordnung
Beispiel
1
Untertitel zentrierencenter
Bildlegenden zentriert setzen, nur für vertikale Anordnung
Beispiel
1
Bilddatei1Bild1
Seitenname des ersten Bildes (ohne “Datei:”)
Beispiel
Beispiel.jpg
Untertitel1Untertitel1
Legende dieses Bildes
Breite1Breite1
individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung
Beispiel
100
Beschreibung1Beschreibung1
Zusätzliche Beschreibung dieses Bildes (Tooltip)
Alt1Alt1
Alternativtext zu diesem Bild
Class1Class1
CSS-Klassen zu diesem Bild
Bilddatei2Bild2
Seitenname des zweiten Bildes (ohne “Datei:”)
Untertitel2Untertitel2
Legende dieses Bildes
Breite2Breite2
individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung
Beispiel
100
Beschreibung2Beschreibung2
Zusätzliche Beschreibung dieses Bildes (Tooltip)
Alt2Alt2
Alternativtext zu diesem Bild
Class2Class2
CSS-Klassen zu diesem Bild
Bilddatei3Bild3
Seitenname eines weiteren Bildes
Untertitel3Untertitel3
Legende dieses Bildes
Breite3Breite3
individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung
Beispiel
100
Beschreibung3Beschreibung3
Zusätzliche Beschreibung dieses Bildes (Tooltip)
Alt3Alt3
Alternativtext zu diesem Bild
Class3Class3
CSS-Klassen zu diesem Bild
Bilddatei4Bild4
Seitenname eines weiteren Bildes
Untertitel4Untertitel4
Legende dieses Bildes
Breite4Breite4
individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung
Beispiel
100
Beschreibung4Beschreibung4
Zusätzliche Beschreibung dieses Bildes (Tooltip)
Alt4Alt4
Alternativtext zu diesem Bild
Class4Class4
CSS-Klassen zu diesem Bild
Bilddatei5Bild5
Seitenname eines weiteren Bildes
Untertitel5Untertitel5
Legende dieses Bildes
Breite5Breite5
individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung
Beispiel
100
Beschreibung5Beschreibung5
Zusätzliche Beschreibung dieses Bildes (Tooltip)
Alt5Alt5
Alternativtext zu diesem Bild
Class5Class5
CSS-Klassen zu diesem Bild

Anzeigen von zwei bis fünf Bildern in einem Kasten, wobei die Bilder nebeneinander oder übereinander platziert werden können, falls keine Galerie möglich oder sinnvoll ist.

Vorlagenparameter[Vorlagendaten bearbeiten]

Diese Vorlage hat eine benutzerdefinierte Formatierung.

ParameterBeschreibungTypStatus
Ausrichtungalign

Ausrichtung im Seitenlayout; right / left / center

Standard
right
Beispiel
left
Einzeiliger Textoptional
RichtungRichtung

Einzelbilder horizontal oder vertikal anordnen

Standard
horizontal
Beispiel
vertical
Einzeiliger Textoptional
KopfzeilentextKopfzeile

Text in der Kopfzeile, falls eine solche gewünscht

Beispiel
Alpenpanorama
Einzeiliger Textoptional
KopfzeilenhintergrundKopfzeile_Hintergrund

Farbcode für die Hintergrundfarbe der Kopfzeile

Standard
transparent
Beispiel
#DA70D6
Einzeiliger Textoptional
KopfzeilenausrichtungKopfzeile_align

Ausrichtung der Kopfzeile zu den Bildern; center / left / right

Standard
center
Beispiel
left
Einzeiliger Textoptional
FußzeilentextFußzeile

Text in der Fußzeile, falls eine solche gewünscht

Beispiel
Im Vordergrund der See, im Hintergrund die Berge
Einzeiliger Textoptional
FußzeilenhintergrundFußzeile_Hintergrund

Farbcode für die Hintergrundfarbe der Fußzeile

Standard
transparent
Beispiel
#00FA9A
Einzeiliger Textoptional
FußzeilenausrichtungFußzeile_align

Ausrichtung der Fußzeile zu den Bildern; center / left / right

Standard
left
Beispiel
center
Einzeiliger Textoptional
StandardbreiteBreite

Feste Breite für alle Bilder; in Pixeln (ohne “px”)

Standard
150
Beispiel
250
Zahlenwertvorgeschlagen
HintergrundfarbeHintergrund

Farbcode für die Hintergrundfarbe (alles)

Standard
transparent
Beispiel
#FFE4B5
Einzeiliger Textoptional
Legende nach untenunten

Bildlegenden (Untertitel) unten bündig oder zentriert ausrichten, nur für horizontale Anordnung

Beispiel
1
Wahrheitswertoptional
Untertitel zentrierencenter

Bildlegenden zentriert setzen, nur für vertikale Anordnung

Beispiel
1
Wahrheitswertoptional
Bilddatei1Bild1

Seitenname des ersten Bildes (ohne “Datei:”)

Beispiel
Beispiel.jpg
Dateierforderlich
Untertitel1Untertitel1

Legende dieses Bildes

Einzeiliger Textoptional
Breite1Breite1

individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung

Beispiel
100
Zahlenwertoptional
Beschreibung1Beschreibung1

Zusätzliche Beschreibung dieses Bildes (Tooltip)

Einzeiliger Textoptional
Alt1Alt1

Alternativtext zu diesem Bild

Einzeiliger Textoptional
Class1Class1

CSS-Klassen zu diesem Bild

Einzeiliger Textoptional
Bilddatei2Bild2

Seitenname des zweiten Bildes (ohne “Datei:”)

Dateierforderlich
Untertitel2Untertitel2

Legende dieses Bildes

Einzeiliger Textoptional
Breite2Breite2

individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung

Beispiel
100
Zahlenwertoptional
Beschreibung2Beschreibung2

Zusätzliche Beschreibung dieses Bildes (Tooltip)

Einzeiliger Textoptional
Alt2Alt2

Alternativtext zu diesem Bild

Einzeiliger Textoptional
Class2Class2

CSS-Klassen zu diesem Bild

Einzeiliger Textoptional
Bilddatei3Bild3

Seitenname eines weiteren Bildes

Dateioptional
Untertitel3Untertitel3

Legende dieses Bildes

Einzeiliger Textoptional
Breite3Breite3

individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung

Beispiel
100
Zahlenwertoptional
Beschreibung3Beschreibung3

Zusätzliche Beschreibung dieses Bildes (Tooltip)

Einzeiliger Textoptional
Alt3Alt3

Alternativtext zu diesem Bild

Einzeiliger Textoptional
Class3Class3

CSS-Klassen zu diesem Bild

Einzeiliger Textoptional
Bilddatei4Bild4

Seitenname eines weiteren Bildes

Dateioptional
Untertitel4Untertitel4

Legende dieses Bildes

Einzeiliger Textoptional
Breite4Breite4

individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung

Beispiel
100
Zahlenwertoptional
Beschreibung4Beschreibung4

Zusätzliche Beschreibung dieses Bildes (Tooltip)

Einzeiliger Textoptional
Alt4Alt4

Alternativtext zu diesem Bild

Einzeiliger Textoptional
Class4Class4

CSS-Klassen zu diesem Bild

Einzeiliger Textoptional
Bilddatei5Bild5

Seitenname eines weiteren Bildes

Dateioptional
Untertitel5Untertitel5

Legende dieses Bildes

Einzeiliger Textoptional
Breite5Breite5

individuelle Breite dieses Bildes; in Pixeln, für horizontale Anordnung

Beispiel
100
Zahlenwertoptional
Beschreibung5Beschreibung5

Zusätzliche Beschreibung dieses Bildes (Tooltip)

Einzeiliger Textoptional
Alt5Alt5

Alternativtext zu diesem Bild

Einzeiliger Textoptional
Class5Class5

CSS-Klassen zu diesem Bild

Einzeiliger Textoptional

Kopiervorlage

[Quelltext bearbeiten]
{{Mehrere Bilder
| align       = left/right/center
| Richtung    = horizontal/vertical
| Kopfzeile   = 
| Kopfzeile_align = left/right/center
| Kopfzeile_Hintergrund = 
| Fußzeile    = 
| Fußzeile_align = left/right/center
| Fußzeile_Hintergrund = 
| Breite      = 
| Hintergrund = 
| unten       = 
| center      = 

| Bild1       = 
| Untertitel1 = 
| Breite1     = 

| Bild2       = 
| Untertitel2 = 
| Breite2     = 

| Bild3       = 
| Untertitel3 = 
| Breite3     = 

| Bild4       = 
| Untertitel4 = 
| Breite4     = 

| Bild5       = 
| Untertitel5 = 
| Breite5     = 
}}
Breite
Überschreibt die Parameter Breite1, Breite2, Breite3, Breite4, und Breite5. Voreingestellt ist ein Wert von 150 px.
Wenn du bei „horizontaler“ Ausrichtung jedem Bild eine andere Breite geben möchtest, lass daher bitte den Parameter Breite frei.
Für die vertikale Ausrichtung ist nur der Parameter Breite für eine einheitliche Darstellung erforderlich.
Aus technischen Gründen (durch die Verwendung als Attribut von <div></div>-Tags für die Festlegung der Größen) ist es derzeit leider bei keinem der Breite-Parameter möglich, der Größenangabe wie bei herkömmlichen Bildeinbindungen ein x für die Höhenformatierung der Bilder anzugeben.

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; das bedeutet, dass alle Bilder immer mit allen vorgegebenen Pixeln geladen werden müssen, auch wenn sie die Leser nicht interessieren. Das belastet sie bei langsamen oder teuren Internetverbindungen, wenn die Bilder größer als ein Miniaturbild sind. In einer 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 etwa 50 % unserer Abrufe) nicht mehr 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.

Beispiel mit zwei Bildern nebeneinander am rechten Rand

[Quelltext bearbeiten]
Spieler erhalten als Verwarnung eine gelbe Karte und werden mit einer roten Karte des Feldes verwiesen.
{{Mehrere Bilder
| Fußzeile    = Spieler erhalten als Verwarnung eine gelbe Karte und werden mit einer roten Karte des Feldes verwiesen.
| Breite      = 60
| Bild1       = Yellow card.svg
| Bild2       = Red card.svg
}}

Beispiel mit zwei Bildern übereinander am linken Rand

[Quelltext bearbeiten]

(Untertitel zentriert)

Füße im Vergleich
gesunder Fuß mit Längsgewölbe
Plattfuß
{{Mehrere Bilder
| align       = left
| Richtung    = vertical
| Kopfzeile   = Füße im Vergleich
| Breite      = 200
| center      = 1
| Bild1       = Foot Arche (PSF).png
| Untertitel1 = gesunder Fuß mit Längsgewölbe
| Bild2       = Flatfoot.jpg
| Untertitel2 = Plattfuß
}}

Beispiel mit separaten Untertiteln

[Quelltext bearbeiten]
Nr. 2
Nr. 3
Nr. 4
Bilder werden von links nach rechts angeordnet.
{{Mehrere Bilder
| Fußzeile    = Bilder werden von links nach rechts angeordnet.
| Breite      = 60
| Bild1       = Ribbon numeral 2.png
| Untertitel1 = Nr. 2
| Bild2       = Ribbon numeral 3.png
| Untertitel2 = Nr. 3
| Bild3       = Ribbon numeral 4.png
| Untertitel3 = Nr. 4
}}

Beispiel mit unterschiedlicher Höhe

[Quelltext bearbeiten]
Gelbe Karte
Flagge der Schottischen Könige
Braunschweiger Löwe
Bilder werden von links nach rechts angeordnet.
{{Mehrere Bilder
| Fußzeile    = Bilder werden von links nach rechts angeordnet.
| Breite      = 120
| Bild1       = Yellow card.svg
| Untertitel1 = Gelbe Karte
| Bild2       = Royal Banner of Scotland (4-5).svg
| Untertitel2 = Flagge der Schottischen Könige
| Bild3       = Braunschweig Löwe.svg
| Untertitel3 = Braunschweiger Löwe
}}

Untertitel unten und zentriert

Bildlegenden unten angeordnet
Gelbe Karte
Flagge der Schottischen Könige
Braunschweiger Löwe
{{Mehrere Bilder
| Kopfzeile   = Bildlegenden unten angeordnet
| unten       = 1
| Breite      = 120
| Bild1       = Yellow card.svg
| Untertitel1 = Gelbe Karte
| Bild2       = Royal Banner of Scotland (4-5).svg
| Untertitel2 = Flagge der Schottischen Könige
| Bild3       = Braunschweig Löwe.svg
| Untertitel3 = Braunschweiger Löwe
}}

Beispiel mit Hintergrundfarbe

[Quelltext bearbeiten]
Moschuskraut (Adoxa moschatellina)
{{Mehrere Bilder
| Bild1       = Adoxa_moschatellina_210406.jpg
| Bild2       = Adoxa_moschatellina_210406a.jpg
| Bild3       = adoxa_moschatellina_blatt.jpeg
| Fußzeile    = [[Moschuskraut]] (''Adoxa moschatellina'')
| Fußzeile_Hintergrund=#BBDD99
| Hintergrund = #BBDD99
| Fußzeile_align=center
| Breite      = 160
}}

Previous Page Next Page