Benutzer:Peter-K/Meine Hilfeseite/Galerie & Bilder

1. Mehrere Bilder nebeneinander werden im Textkörper mit dem Galerie-Tag <gallery> eingefügt

Text & Tipps aus der WP

Um mehrere Bilder nebeneinander in einen Textkörper einzubinden, verwendet man das Galerie-Tag <gallery> zu Beginn. Es werden automatisch so viele Bilder in der Größe eines Wikipedia-Vorschaubildes (mit 220px Bildbreite für nicht angemeldete Benutzer) dynamisch nebeneinandergesetzt, wie es die horizontale Bildschirmbreite zulässt. Die Anweisung jedes Bildes muss jeweils in einer eigenen Zeile stehen. Im Anschluß an den Galerie-Tag <gallery> werden die Bilder eingefügt.

2. Grundsätzliche Schreibweise (Syntax) des Galerie-Elementes

Die grundsätzliche Syntax des Galerie-Elements lautet:

<gallery>
    Bildseitentitel.ext|Bildlegende
    Bildseitentitel anders.ext|Andere Bildlegende
</gallery>

Beispiel:

1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.

Schreibweise:

<gallery>
File:LA2-Blitz-0009_1.jpg|1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
File:LA2-Blitz-0009_2.jpg|2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
File:LA2-Blitz-0009_3.jpg|3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.
</gallery>

Sowohl das umschließende <gallery></gallery>-Tag wie auch jede Zeile, die ein einzelnes Bild beschreibt, haben eine spezifische Syntax mit weiteren Möglichkeiten.

Wie die meisten Tags akzeptiert auch <gallery> Attribute. Sie haben die Form

attributname="Wertangabe"

2.1 Die wichtigsten Tags

Unterstützt werden folgende Tags: caption; widths; heights; perrow; style; mode.

2.1.1 Das Tag caption (Überschrift)

caption=

Überschrift, die zentriert über der Galerie angeordnet wird; siehe Überschrift in der WP.

Einfache Wiki-Syntax wie ein Wikilink ist in der Überschrift möglich, nicht aber eigene Elemente. Mit dem optionalen Schlüsselwort caption lässt sich eine Überschrift einfügen: <gallery caption="Auto-Modelle">

Wird keine Anzahl der Bilder pro Seite festgelegt, wird die Überschrift in der Mitte der Seite platziert und nicht mittig über den Bildern

Beispiel:

Auto-Modelle
1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.

Schreibweise:

<gallery caption="Auto-Modelle">
File:LA2-Blitz-0009_1.jpg|1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
File:LA2-Blitz-0009_2.jpg|2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
File:LA2-Blitz-0009_3.jpg|3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.
</gallery>

Soll nun die Überschrift der Bildergalerie mittig über den Bildern gesetzt werden, muss das Attribut perrow="x" (x = Anzahl der Bilder) im Anschluß an das Überschrift-Tag eingesetzt werden.

Beispiel:

Auto-Modelle
1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.

Schreibweise:

<gallery caption="Auto-Modelle" perrow="3">
File:LA2-Blitz-0009_1.jpg|1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
File:LA2-Blitz-0009_2.jpg|2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
File:LA2-Blitz-0009_3.jpg|3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.
</gallery>

Soll eine Galerie mit nur wenigen Bildern unter der seitenmittig stehenden Überschrift platziert werden, kann class="center" verwendet werden; das Attribut „class“ steht vor dem Attribut „caption“. Hierbei kann auf das Attribut „perrow“ verzichtet werden.

Beispiel:

Auto-Modelle
1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.

Schreibweise:

<gallery class="center" caption="Auto-Modelle">
File:LA2-Blitz-0009_1.jpg|1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
File:LA2-Blitz-0009_2.jpg|2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
File:LA2-Blitz-0009_3.jpg|3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.
</gallery>

2.1.2 Die Tag widths (Bildbreite) und heights (Bildhöhe)

widths=: Zahlenwert in Pixeln, der eine abweichende Bildbreite angibt.; wird immer mit dem Tag hights verwendet.
heights=: Zahlenwert in Pixeln, der die maximale Bildhöhe angibt; siehe Skalierung in der WP.

Durch Änderung der Werte für Bildbreite und Bildhöhe kann man die Größen für aller Bilder dieser Galerie nahezu unabhängig von der Originalgröße darstellen (auch sinnlose Kombinationen, führen zu Verzerrungen).

Schreibweise der Tags in der ersten Zeile: <gallery widths="150" heights="300" perrow="3" caption="Auto-Modelle">

Es bedeuten:

widths="150": Breite des Bildes in Pixel
heights="300": Höhe des Bildes in Pixel
perrow="3": Anzahl der Bilder pro Reihe
caption="Auto-Modelle": Überschrift der Bildergalerie

Beispiel mit den oben verwendeten Bildern:

Auto-Modelle
1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.

Schreibweise:

<gallery widths="150" hights="300" perrow ="3" caption="Auto-Modelle">
File:LA2-Blitz-0009_1.jpg|1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
File:LA2-Blitz-0009_2.jpg|2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
File:LA2-Blitz-0009_3.jpg|3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.
</gallery>

Nun kann man die Größe der Bilder variieren, indem man die Pixel-Werte vergrößert oder verkleinert.

Beispiel für Werte widths="90" und hights="180":

Auto-Modelle
1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.

2.1.3 Das Tag perrow (Anzahl der Bilder in einer Reihe)

perrow=: Anzahl der Bilder pro Zeile; siehe Bilder pro Reihe in der WP.; perrow="0" ist die Vorgabe und nutzt die momentane Bildschirmbreite aus.; durch das Tag „perrow“ wird die Überschrift der Galerie mittig über die Galerie gesetzt.

Die Bezeichnung perrow kommt von englisch per-row, pro Zeile.

2.1.4 Das Tag style (Formatierung der Beschriftung)

style=: Mit Hilfe dieses Tags kann die Beschriftung der Bilder einheitlich definiert werden.; Möglich sind u. a.: Schriftausrichtung (links, zentriert, rechts), fett, kursiv, Schriftgröße

Die häufigsten Anwendungen des Tags „style“ sind Textausrichtung und die Ausrichtung der Bilder.

Folgende Tags Attribute kommen dabei zur Anwendung:

style="text-align:center": Die Beschriftung der Bilder wird zentriert ausgerichtet.
style="font-style:italic"; Die Beschriftung der Bilder bleibt linksbündig, Schriftart ist kursiv.
style="font-size:150%"; Die Beschriftung wird vergrößert.

Beispiel für rechtsbündige Bildunterschrift, kursive und etwas verkleinerte Schrift:

Auto-Modelle
1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.

Schreibweise:

<gallery style="text-align: right; font-style: italic; font-size:80%;" widths="150"; hights="300"; perrow="3"; caption="Auto-Modelle">
File:LA2-Blitz-0009_1.jpg|1. NAG-Protos 12/60 PS Sechszylinder-Phaeton.
File:LA2-Blitz-0009_2.jpg|2. Horch 20/100 PS Achtzylinder-Pullmann-Limousine.
File:LA2-Blitz-0009_3.jpg|3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.
</gallery>

Dabei ist zu beachten:

Tag "style" wird nur einmal verwendet.
Alle Attribute und ihre Werte werden innerhalb von einem Anführungszeichen " " eingetragen.
Die Attribute und ihre dazugehörigen Werte werden durch ein Semikolon ; getrennt.
Die Schreibweise sieht folgendermaßen: style="Eigenschaft1: Wert1; Eigenschaft2: Wert2; …;"

2.1.5 Das Tag showfilename (Anzeige des Dateinamens des Bildes)

showfilename: showfilename="1" oder einfach nur showfilename – zeigt in der Bildlegende den jeweiligen Medienbezeichner an; siehe Stichwort „Überschrift“ in der WP.; Vorgesehen für Wartungsseiten und Diskussionen über eine Zusammenstellung, nicht für enzyklopädische Artikel.; Beispiel dafür die Bildergalerie von THEbotIT für das Blitzlexicon vom Meyer.

Beispiel:

LA2-Blitz-0184 kautschuk.jpg Zapfen des Kautschuksaftes durch Fischgrätenschnitt.
LA2-Blitz-0187 kirgise.jpg Kirgise vor seiner Jurte melkend; im Hintergrund das Alaigebirge.
LA2-Blitz-0186 kiew.jpg Kiew: Sankt-Andreas-Kathedrale.

2.1.6 Das Tag mode (weitere Darstellungsmethoden)

mode=

Experimenteller Parameter für zusätzliche Darstellungsmethoden.

Einer der nachfolgenden Parameter kann als Wert dem Tag "mode" beigefügt werden.

"traditional" – Vorgabe; entspricht keiner Angabe (wird nicht verwendet).
"nolines"
"packed"
"packed-hover" – siehe Darstellungsvarianten von Galerien in der WP
"packed-overlay" – siehe Darstellungsvarianten von Galerien in der WP

In der Wikisource sind nur die Tags mode="nolines" und mode="packed" von Interesse.

mode= "nolines" bewirkt, dass keine sichtbaren Rahmen um die Einzelbilder gezeigt werden. Dadurch werden die Bilder an ihrem oberen Rand so ausgerichtet dass sie eine Linie bilden. Das Erscheinungsbild der Galerie wird hier bei unterschiedlich hohen / großen Bildern an der unteren Seite der Bilder zu nicht einheitlicher Linie führen.
mode="packed" bewirkt, dass die Bildergalerie zentriert auf der Seite (mittig) ausgerichtet wird. Die Gesamthöhe der Bildergalerie richtet sich nach dem größten Bild und die anderen (kleineren) Bilder werden nun dementsprechend vergrößert. Das Ergebnis ist eine Bildergalerie die sowohl oben als auch unten eine einheitliche Linie darstellt.

Beispiel mit drei unterschiedlichen Bildergrößen:

zuerst mit mode="nolines" und anschließend mit mode="packed".

2.1.7 Bilder pro Reihe – Ausrichtung

Noch ergänzen mit mittig, zentrieren, Bild und Text

3. Einbinden von Einzelbildern bzw. Symbole im Textkörper

3.1 Grundsätzliches

Werden einzelne Bilder im Text eingefügt, so verwendet man die Vorlag BRU.

Kopiervorlage:

{{BRU| | | | | | | }}

3.2 Die erforderlichen und möglichen Parameter

Die Parameter sind hier aufgeführt mit Erläuterungen:

{{BRU|Parameter 1|Parameter 2|Parameter 3|Parameter 4|Parameter 5|Parameter 6|Parameter 7}}

Parameter 1 (m): Dateiname des Bildes ohne „Datei:“ bzw. „File:“
Parameter 2 (m): Die Position des Bildes im Artikel, zulässige Werte sind left für links, right für rechts oder center für mittig
Parameter 3 (m): Breite des Bildes in Pixel ohne Einheit der Größe in px
Parameter 4 (o): Die Beschreibung des Bildes wird unterhalb vom Bild gesetzt
Parameter 5 (o): Die Beschreibung des Bildes wird über das Bild gesetzt
Parameter 6 (o): Die horizontale Textposition, zulässige Werte sind left für linksbündig (Voreinstellung), right für rechtsbündig, center für mittig (zentriert) oder justify für Blocksatz
Parameter 7 (o): Schriftgröße in Prozent ohne Einheit (Voreinstellung: 94)

Mit m (= mandatory) gekennzeichnete Parameter sind erforderlich (Parameter 1 – 3).

Mit o (= optional) gekennzeichnete Parameter können entfallen (Parameter 4 – 7).

Beispiele:

Bild nur mit den erforderlichen Parametern ({{BRU|LA2-Blitz-0009_3.jpg|left|150||||}}):

Bild mit allen Parametern ({{BRU|LA2-Blitz-0009_3.jpg|left|150|3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.|Aus: Meyers Blitz-Lexikon|center|80}}):

Aus: Meyers Blitz-Lexikon

3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.

Bild mit Parametern, die nicht voreingestellt sind ({{BRU|LA2-Blitz-0009_3.jpg|left|150|3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.|Aus: Meyers Blitz-Lexikon||}}):

Aus: Meyers Blitz-Lexikon

3. Maybach 29/150 PS Zwölfzylinder-Cabriolet.

3.3 Einfügen von Symbole innerhalb des Textes

Manchmal ist es erforderlich, kleine Symbole in den Text einzufügen, die nicht als Sonderzeichen zur Verfügung stehen, sondern kleine Bilder sind. Oftmals sind es die Symbole für Planeten, Sternzeichen / Tierkreiszeichen, Symbole in der Musik (jedoch keine Noten), und anderes. Fotografien oder ähnliches (Zeichnungen, ausgeschnittene Bilder etc.) machen keinen Sinn, weil sie dann zu klein sind.

Zu beachten ist hier, dass vor dem Dateinamen Datei: stehen muss. Des weiteren ist es erforderlich, die Größe des Symbols in px mit anzugeben, da ansonsten die Originalgröße eingefügt wird. Unten ein Beispiel mit dem Symbol des Jupiter.

Hier sind drei Beispiele, ihre Symbole und die dazugehörigen Schreibweisen:
Name	Symbol	Schreibweise
Taurus Stier		[[Datei:Taurus.svg\|20px]]
Fermate oder Haltezeichen		[[Datei:Fermata.svg\|20px]]
Jupiter		[[Datei:Jupiter symbol.svg\|20px]]

Hier noch einmal zum Vergleich am Symbol des Jupiter, zuerst das Symbol ohne Größenangabe und dann mit Größenangabe (20px):