Bilder beschreiben¶

Es können auch Angaben gemacht werden, die ein Bild beschreiben. Dies ist insbesondere für die Darstellung in Textbrowsern oder für die Barrierefreiheit nützlich.

[[Bild(menu_grafik.png, alt="Grafik-Sektion", title="Alle Programme zum Thema Grafik")]]
[[Bild(bullet.png, alt=" * ")]]
[[Bild(bild.png, title="Frau mit Kind", longdesc="Frau hält in ihren dünnen mageren Armen ein glücklich dreinschauendes Kind")]]
[[Bild(menu_grafik.png, alt="Grafik-Sektion", title="Alle Programme zum Thema Grafik")]]

Das alt-Attribut ist eine Pflichtangabe. Lässt man das alt-Attribut in der Syntax aus, wird automatisch der Bildname als Text verwendet. Dies entspräche der Syntax

[[Bild(bullet.png, alt="bullet.png")]]

Links zum Thema:

• Warum ALT-Attribute Pflicht sind 🇩🇪

• img-Element

Externe Bilder¶

Tux, das Linux-Maskottchen

Darstellung in Tabellen¶

Die Bilderstrecke wird in einer Tabellen-Syntax dargestellt, die allerdings nicht automatisch umgebrochen werden kann. Daher sollten längere Strecken in mehrere Tabellen-Zeilen aufgeteilt werden (siehe z.B. Galerie).

Die allgemeine Syntax ist

{{{#!vorlage Tabelle
<:>[[Bild(Bild1.jpg, xHÖHE)]]
<:>[[Bild(Bild2.png, xHÖHE)]]
<:>[[Bild(Wiki/Icons/Bild3.png, xHÖHE)]]
+++
<:>Beschreibung 1
<:>Beschreibung 2
<:>Beschreibung 3
}}}

P.U.R.E.	Expand&Exterminate	Complete Annihilation	Kernel Panic	Eternal Struggle	Evolution RTS

Verwendet wurde folgender Code:

{{{#!vorlage Tabelle
<:>[[Bild(Spiele/Spring_Engine/pure1.jpg, x150)]]
<:>[[Bild(Spiele/Spring_Engine/ee1.jpg, x150)]]
<:>[[Bild(Spiele/Spring_Engine/CA1.jpg, x150)]]
<:>[[Bild(Spiele/Spring_Engine/kernel1.jpg, x150)]]
<:>[[Bild(Spiele/Spring_Engine/eternal1.jpg, x150)]]
<:>[[Bild(Spiele/Spring_Engine/evo1.jpg, x150)]]
+++
<:>P.U.R.E.
<:>Expand&Exterminate
<:>Complete Annihilation
<:>Kernel Panic
<:>Eternal Struggle
<:>Evolution RTS
}}}

Die Höhe der Bilder wird mit hier mit x150 für alle Bilder gleich angegeben, <:> zentriert die Bild/Textausgabe.

Tabelle mit umfließendem Text¶

Auch hier erfolgt eine bessere Einbettung an das neue Webseiten-Design über die Verwendung einer Tabellen-Syntax. Die Darstellung ergibt einen besser sichtbarem Abstand zum Text, und verzichtet auf die nicht mehr Design-gemäße Farbgebung der unten beschriebenen Version.

Commanderansicht	Spieleransicht	Waffenansicht

Verwendet wurde folgender Code:

{{{#!vorlage Tabelle
<tablestyle="float:right; clear:right" :>[[Bild(Archiv/Spiele/Savage_2/ss129.jpg, x100,)]]
<:>[[Bild(Archiv/Spiele/Savage_2/ss117.jpg, x100,)]]
<:>[[Bild(Archiv/Spiele/Savage_2/ss115.jpg, x100,)]]
+++
<:>Commanderansicht
<:>Spieleransicht
<:>Waffenansicht
}}}

Mit Umbruch¶

Es gibt es die Vorlage "Bildersammlung", die allerdings nur noch in einigen Archiv-Artikeln Verwendung findet.Die Darstellung ist mit dem neuen Design nicht sonderlich vorteilhaft. Es können wie folgt beliebig viele Bilder übergeben werden. Abhängig von der Breite des Browserfensters wird die Tabelle wie normaler Fließtext umgebrochen.

[[Vorlage(Bildersammlung, BILDHÖHE
Bild1.jpg, "Beschreibung 1"
Bild2.png, "Beschreibung 2"
Wiki/Icons/Bild3.png, "Beschreibung 3"
)]]

Wird keine Bildhöhe angegeben, so werden die Bilder automatisch auf 140 Pixel Höhe skaliert.

Beispiel¶

Quelltext:

[[Vorlage(Bildersammlung, 150
Spiele/Spring_Engine/pure1.jpg, "P.U.R.E."
Spiele/Spring_Engine/ee1.jpg, "Expand&Exterminate"
Spiele/Spring_Engine/CA1.jpg, "Complete Annihilation"
Spiele/Spring_Engine/kernel1.jpg, "Kernel Panic"
Spiele/Spring_Engine/eternal1.jpg, "Eternal Struggle"
Spiele/Spring_Engine/evo1.jpg, "Evolution RTS"
)]]

Resultat:

P.U.R.E.

Expand&Exterminate

Complete Annihilation

Kernel Panic

Eternal Struggle

Evolution RTS

Im Fließtext¶

Commanderansicht	Spieleransicht	Waffenansicht

Möchte man, das der Text wie bei einfachen Bildern um die Bildertabelle herum fließt, kann man der Bildhöhenangabe left oder right voranstellen. Da diese Tabellen starr sind (also nicht umbrechen können) sollten hier maximal drei Bilder und eine Breite von 200 Pixeln pro Bild nicht überschritten werden.

Die allgemeine Syntax ist

[[Vorlage(Bildersammlung, left|right, BILDHÖHE
Bild1.jpg, "Beschreibung 1"
Bild2.png, "Beschreibung 2"
Wiki/Icons/Bild3.png, "Beschreibung 3"
)]]

Lässt man hier die Höhenangabe weg, werden die Bilder nicht skaliert, sondern in ihrer tatsächlichen Auflösung dargestellt.

Die oben angezeigte Biderstrecke wurde mit folgendem Code erzeugt:

[[Vorlage(Bildersammlung, right, 100,
Archiv/Spiele/Savage_2/ss129.jpg, "Commanderansicht"
Archiv/Spiele/Savage_2/ss117.jpg, "Spieleransicht"
Archiv/Spiele/Savage_2/ss115.jpg, "Waffenansicht"
)]]