Knuddels-Wiki:Handbuch08/8/2: Unterschied zwischen den Versionen

< Knuddels-Wiki:Handbuch08‎ | 8
(Knuddels-Wiki:Tutorial08/8/2 Galerien erstellt.)
 
 
(8 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{KWTut}}
{{Handbuch}}
==Galerie==
==Galerie==
Da wir zuvor allgemein über Bilder geredet haben, wenden wir uns nun dem speziellen Thema '''Galerien''' zu. Nachfolgend klären wir, wie du Bilder, Grafiken  als übersichtliche Galerie in einen Artikel einfügst und platzierst. Auf einen separaten Abschnitt ''Bilder'', ''Fotos'' oder ''Galerie'' sollte in den meisten Fällen verzichtet werden. Der Leser erkennt auch ohne die Überschrift, dass es sich um eine Galerie von Bildern handelt. Galerien sollten sich in der Regel auf bis zu vier Bilder beschränken. Ausnahme dieser Regel bildet in manchen Artikeln des Knuddels-Wiki die Teilüberschrift ''Vorschau''. Neben der gewählten Überschrift, darf auch die Anzahl der Bilder überschritten werden, wenn dies nicht die Übersichtlichkeit des Artikels beinträchtigt.
Da wir zuvor allgemein über Bilder geredet haben, wenden wir uns nun dem speziellen Thema '''Galerien''' zu. Nachfolgend klären wir, wie du Bilder, Grafiken  als übersichtliche Galerie in einen Artikel einfügst und platzierst. Auf einen separaten Abschnitt ''Bilder'', ''Fotos'' oder ''Galerie'' sollte in den meisten Fällen verzichtet werden. Der Leser erkennt auch ohne die Überschrift, dass es sich um eine Galerie von Bildern handelt. Galerien sollten sich in der Regel auf bis zu vier Bilder beschränken. Ausnahme dieser Regel bildet in manchen Artikeln des Knuddels-Wiki die Teilüberschrift ''Vorschau''. Neben der gewählten Überschrift, darf auch die Anzahl der Bilder überschritten werden, wenn dies nicht die Übersichtlichkeit des Artikels beinträchtigt.
Zeile 7: Zeile 7:
<br />
<br />
<br />
<br />
<nowiki><gallery></nowiki>
<tt><nowiki><gallery></nowiki>
<br />
<br />
Datei:(Free) Hugs 1.gif
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
<br />
<br />
Datei:(Free) Hugs 2.gif
Datei:(Free) Hugs (Multismiley)|(Free) Hugs (Multismiley)
<br />
<br />
Datei:100 goldene Schlüssel.png
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
<br />
<br />
Datei:1000 goldene Schlüssel.png
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
<br />
<br />
<nowiki></gallery></nowiki>
<nowiki></gallery></nowiki></tt>
<br />
<br />
<br />
<br />
Zeile 24: Zeile 24:
<br />
<br />
<gallery>
<gallery>
Datei:(Free) Hugs 1.gif
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
Datei:(Free) Hugs 2.gif
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
Datei:100 goldene Schlüssel.png
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
Datei:1000 goldene Schlüssel.png
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
</gallery>
</gallery>
<br />
<br />
Zeile 37: Zeile 37:
<br />
<br />
<br />
<br />
<nowiki><gallery></nowiki>
<tt><nowiki><gallery></nowiki>
<br />
<br />
Bildseitentitel.ext|Bildlegende
Bildseitentitel.ext|Bildlegende
Zeile 43: Zeile 43:
Bildseitentitel anders.ext|Andere Bildlegende
Bildseitentitel anders.ext|Andere Bildlegende
<br />
<br />
<nowiki></gallery></nowiki>
<nowiki></gallery></nowiki></tt>
<br />
<br />
<br />
<br />
Sowohl das umschließende <nowiki><gallery></nowiki>-[[Knuddels-Wiki:Tutorial08/6|Tag]] wie auch jede Zeile, die ein einzelnes Bild beschreibt, haben eine spezifische Syntax mit weiteren Möglichkeiten.
Sowohl das umschließende <tt><nowiki><gallery></nowiki></tt>-[[Knuddels-Wiki:Handbuch08/6|Tag]] wie auch jede Zeile, die ein einzelnes Bild beschreibt, haben eine spezifische Syntax mit weiteren Möglichkeiten.


=== gallery-Tag ===
=== gallery-Tag ===
Wie die meisten Tags akzeptiert auch <nowiki><gallery></nowiki> Attribute. Sie haben die Form
Wie die meisten Tags akzeptiert auch <tt><nowiki><gallery></nowiki></tt> Attribute. Sie haben die Form
* ''attributname''<nowiki>="</nowiki>''Wertangabe''<nowiki>"</nowiki>
* ''attributname''<nowiki>="</nowiki>''Wertangabe''<nowiki>"</nowiki>
Unterstützt werden:
Unterstützt werden:
; caption=
; <tt>'''caption='''</tt>
: Überschrift, die zentriert über der Galerie angeordnet wird.
: Überschrift, die zentriert über der Galerie angeordnet wird.
: Einfache Wiki-Syntax wie ein Wikilink ist möglich, nicht aber eigene Elemente.
: Einfache Wiki-Syntax wie ein Wikilink ist möglich, nicht aber eigene Elemente.
; widths=
; <tt>'''widths='''</tt>
: Zahlenwert in Pixeln, der eine abweichende Bildbreite angibt.
: Zahlenwert in Pixeln, der eine abweichende Bildbreite angibt.
; heights=
; <tt>'''heights='''</tt>
: Zahlenwert in Pixeln, der die maximale Bildhöhe angibt.
: Zahlenwert in Pixeln, der die maximale Bildhöhe angibt.
; perrow=
; <tt>'''perrow='''</tt>
: Anzahl der Bilder pro Zeile
: Anzahl der Bilder pro Zeile
: <nowiki>perrow="0"</nowiki> ist die Vorgabe und nutzt die momentane Bildschirmbreite aus.
: <tt><nowiki>perrow="0"</nowiki></tt> ist die Vorgabe und nutzt die momentane Bildschirmbreite aus.
: Die Bezeichnung ''perrow'' kommt von englisch ''per-row'', pro Zeile.
: Die Bezeichnung ''perrow'' kommt von englisch ''per-row'', pro Zeile.
; showfilename
; <tt>'''showfilename'''</tt>
: <nowiki>showfilename="1"</nowiki> oder einfach nur <nowiki>showfilename</nowiki> – zeigt in der Bildlegende den jeweiligen Medienbezeichner an.
: <tt><nowiki>showfilename="1"</nowiki></tt> oder einfach nur <tt><nowiki>showfilename</nowiki></tt> – zeigt in der Bildlegende den jeweiligen Medienbezeichner an.
: Vorgesehen für Wartungsseiten und Diskussionen über eine Zusammenstellung, nicht für enzyklopädische Artikel.
: Vorgesehen für Wartungsseiten und Diskussionen über eine Zusammenstellung, nicht für enzyklopädische Artikel.
; mode=
; <tt>'''mode='''</tt>
: Experimenteller Parameter für zusätzliche Darstellungsmethoden.
: Experimenteller Parameter für zusätzliche Darstellungsmethoden.
: Einer von:
: Einer von:
:* <nowiki>"traditional"</nowiki> – Vorgabe; entspricht keiner Angabe
:* <tt><nowiki>"traditional"</nowiki></tt> – Vorgabe; entspricht keiner Angabe
:* <nowiki>"nolines"</nowiki>
:* <tt><nowiki>"nolines"</nowiki></tt>
:* <nowiki>"packed"</nowiki>  
:* <tt><nowiki>"packed"</nowiki></tt>  
:* <nowiki>"packed-hover"</nowiki>
:* <tt><nowiki>"packed-hover"</nowiki></tt>
:* <nowiki>"packed-overlay"</nowiki>
:* <tt><nowiki>"packed-overlay"</nowiki></tt>
; style=
; <tt>'''style='''</tt>
: Universalattribut für dekorative Eigenschaften
: Universalattribut für dekorative Eigenschaften
; class=
; <tt>'''class='''</tt>
: Universalattribut– Projektorganisation und projektweite dekorative Eigenschaften
: Universalattribut– Projektorganisation und projektweite dekorative Eigenschaften


Zeile 89: Zeile 89:
<br />
<br />
Für jeden Eintrag gilt eine der nachstehenden Syntaxvarianten:
Für jeden Eintrag gilt eine der nachstehenden Syntaxvarianten:
    Bildseitentitel.ext
<tt>Bildseitentitel.ext
    Bildseitentitel.ext|Bildlegende
      Bildseitentitel.ext|Bildlegende
    Bildseitentitel.ext|Zusatzparameter|Bildlegende
      Bildseitentitel.ext|Zusatzparameter|Bildlegende
    Bildseitentitel.ext|Bildlegende|alt=Alternative Bildbeschreibung
      Bildseitentitel.ext|Bildlegende|alt=Alternative Bildbeschreibung</tt>
<br />
<br />
<br />
<br />
Zu den einzelnen Komponenten:
Zu den einzelnen Komponenten:
*<nowiki>Bildseitentitel.ext</nowiki>
*<tt><nowiki>Bildseitentitel.ext</nowiki></tt>
** Das ist der Bezeichner der Mediendatei, etwa: <nowiki>[[:Datei:Beispiel.jpg|Beispiel.jpg]]</nowiki>
** Das ist der Bezeichner der Mediendatei, etwa: <tt><nowiki>[[:Datei:Beispiel.jpg|Beispiel.jpg]]</nowiki></tt>
** Früher war es erforderlich gewesen, den [[Knuddels-Wiki:Tutorial09/2/5|Namensraumbezeichner]] voranzustellen (also <nowiki>Datei:</nowiki> oder auch <nowiki>Bild:</ nowiki oder <nowiki>File:</nowiki> oder <nowiki>Image:</nowiki>).
** Früher war es erforderlich gewesen, den [[Knuddels-Wiki:Handbuch09/2/4|Namensraumbezeichner]] voranzustellen (also <tt><nowiki>Datei:</nowiki></tt> oder auch <tt><nowiki>Bild:</nowiki></tt> oder <tt><nowiki>File:</nowiki></tt> oder <tt><nowiki>Image:</nowiki></tt>).
** Heutzutage ist das im Knuddels-Wiki nicht mehr üblich.
** Heutzutage ist das im Knuddels-Wiki nicht mehr üblich.
** Für die Suche im Quelltext ist das nicht erforderlich, weil <nowiki> style="white-space:nowrap">Bildtitel.ext</nowiki> bereits weitgehend eindeutig ist.
** Für die Suche im Quelltext ist das nicht erforderlich, weil <tt><nowiki> style="white-space:nowrap">Bildtitel.ext</nowiki></tt> bereits weitgehend eindeutig ist.
* Bildlegende
* Bildlegende
** Sie sollte möglichst kurz sein.
** Sie sollte möglichst kurz sein.
** Pipe-Symbole <nowiki>|</nowiki> sind nur innerhalb geschlossener Wikilinks erlaubt.
** Pipe-Symbole <tt><nowiki>|</nowiki></tt> sind nur innerhalb geschlossener Wikilinks erlaubt.
* Zusatzparameter
* Zusatzparameter
** Sie kommen nur in Sonderfällen bei bestimmten Medientypen vor.
** Sie kommen nur in Sonderfällen bei bestimmten Medientypen vor.
** Vorstellbar sind:
** Vorstellbar sind:
*** <nowiki>Mydoc.pdf|page=5|Bildlegende</nowiki>
*** <tt><nowiki>Mydoc.pdf|page=5|Bildlegende</nowiki></tt>
*** <nowiki>MyTiff.tif|lossy|Bildlegende</nowiki>
*** <tt><nowiki>MyTiff.tif|lossy|Bildlegende</nowiki></tt>
* <nowiki>alt=</nowiki >
* <tt><nowiki>alt=</nowiki ></tt>
** Ausführliche Bildbeschreibung für Anwender, die die Grafik nicht sehen können; insbesondere für Screenreader.
** Ausführliche Bildbeschreibung für Anwender, die die Grafik nicht sehen können; insbesondere für Screenreader.


Zeile 116: Zeile 116:
<br />
<br />
<br />
<br />
*'''<nowiki>mode="nolines"</nowiki>''' stellt die Galerie so ein, dass keine sichtbare Begrenzungslinie um die einzelnen Bilder herum angezeigt werden. Hiermit wird die Breite der Galerie stark reduziert. Dadurch, dass keine Begrenzung mehr um die Bilder der Galerie angezeigt wird, können unschöne Abstände am unteren Rand entstehen.
*'''<tt><nowiki>mode="nolines"</nowiki></tt>''' stellt die Galerie so ein, dass keine sichtbare Begrenzungslinie um die einzelnen Bilder herum angezeigt werden. Hiermit wird die Breite der Galerie stark reduziert. Dadurch, dass keine Begrenzung mehr um die Bilder der Galerie angezeigt wird, können unschöne Abstände am unteren Rand entstehen.
*'''<nowiki>mode="packed"</nowiki>''' zentriert die Galerie und füllt die Bilder dynamisch auf die zur Verfügung stehende Seitenbreite bei einheitlicher Bildhöhe aus. Die Höhe der gesamten Galerie richtet sich dabei nach dem größten Bild. Somit werden sowohl hochkant wie auch quer fotografierte Bilder am oberen und unteren Bildrand bündig dargestellt.
<br />
* ''' <nowiki>mode="packed-overlay"</nowiki>''' und '''<nowiki>mode="packed-hover"</nowiki>''' modifizieren die Anzeige der Beschriftung, die sich standardmäßig unter den Bildern befindet: Die Beschriftung wird dadurch entweder mit einem leicht durchsichtigen Hintergrund über das Bild gelegt oder sie wird nur dann angezeigt, wenn sich der Mauszeiger auf dem jeweiligen Bild der Galerie befindet. Diese Darstellungsvarianten sollten nicht in Artikeln, sondern allenfalls auf Benutzerseiten verwendet werden: Bei Verwendung der Overlay-Option werden mit großer Wahrscheinlichkeit durch eine permanent sichtbare Beschriftung wichtige Bildteile abgedeckt.  
<tt><nowiki><gallery mode="nolines"></nowiki>
* '''<nowiki>mode="slideshow"</nowiki>''' zeigt immer nur ein Bild großformatig an, wobei man über Kontrollelemente zum nächsten oder vorigen Bild in der Galerie blättern kann.
<br />
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
<br />
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
<br />
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
<br />
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
<br />
<nowiki></gallery></nowiki></tt>
<br />
<br />
wird also zu:
<br />
<br />
<gallery  mode="nolines">
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
</gallery>
<br />
<br />
*'''<tt><nowiki>mode="packed"</nowiki></tt>''' zentriert die Galerie und füllt die Bilder dynamisch auf die zur Verfügung stehende Seitenbreite bei einheitlicher Bildhöhe aus. Die Höhe der gesamten Galerie richtet sich dabei nach dem größten Bild. Somit werden sowohl hochkant wie auch quer fotografierte Bilder am oberen und unteren Bildrand bündig dargestellt.
<br />
<tt><nowiki><gallery mode="packed"></nowiki>
<br />
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
<br />
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
<br />
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
<br />
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
<br />
<nowiki></gallery></nowiki></tt>
<br />
<br />
wird also zu:
<br />
<br />
<gallery mode="packed">
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
</gallery>
<br />
<br />
* ''' <tt><nowiki>mode="packed-overlay"</nowiki></tt>''' und '''<tt><nowiki>mode="packed-hover"</nowiki></tt>''' modifizieren die Anzeige der Beschriftung, die sich standardmäßig unter den Bildern befindet: Die Beschriftung wird dadurch entweder mit einem leicht durchsichtigen Hintergrund über das Bild gelegt oder sie wird nur dann angezeigt, wenn sich der Mauszeiger auf dem jeweiligen Bild der Galerie befindet. Diese Darstellungsvarianten sollten nicht in Artikeln, sondern allenfalls auf Benutzerseiten verwendet werden: Bei Verwendung der Overlay-Option werden mit großer Wahrscheinlichkeit durch eine permanent sichtbare Beschriftung wichtige Bildteile abgedeckt.  
<br />
<tt><nowiki><gallery mode="packed-overlay"></nowiki>
<br />
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
<br />
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
<br />
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
<br />
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
<br />
<nowiki></gallery></nowiki></tt>
<br />
<br />
wird also zu:
<br />
<br />
<gallery mode="packed-overlay">
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
</gallery>
<br />
<br />
<tt><nowiki><gallery mode="packed-hover"</nowiki>
<br />
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
<br />
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
<br />
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
<br />
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
<br />
<nowiki></gallery></nowiki></tt>
<br />
<br />
wird also zu:
<br />
<br />
<gallery mode="packed-hover"</nowiki>
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
</gallery>
<br />
<br />


==Bilder pro Reihe – Ausrichtung ==
==Bilder pro Reihe – Ausrichtung ==
Mit dem Schlüsselwort <nowiki>perrow="…"</nowiki> kann fest angegeben werden, wie viele Bilder maximal pro Bilderzeile gezeigt werden sollen. Im Normalfall sollte diese Option vermieden werden, da das Kommando die Standardeinstellungen überschreibt und so beispielsweise das automatische Ausnutzen der zur Verfügung stehenden Bildschirmbreite verhindert.
Mit dem Schlüsselwort <tt><nowiki>perrow="…"</nowiki></tt> kann fest angegeben werden, wie viele Bilder maximal pro Bilderzeile gezeigt werden sollen. Im Normalfall sollte diese Option vermieden werden, da das Kommando die Standardeinstellungen überschreibt und so beispielsweise das automatische Ausnutzen der zur Verfügung stehenden Bildschirmbreite verhindert.
<br />
<br />
<br />
<br />
Der Zusatz <nowiki>class="float-right"</nowiki> (oder selten: <nowiki>class="float-left"</nowiki>) setzt die Ausrichtung der Galerie relativ zum Text fest; also am rechten Rand und vom Fließtext umflossen.
Der Zusatz <tt><nowiki>class="float-right"</nowiki></tt> (oder selten: <tt><nowiki>class="float-left"</nowiki></tt>) setzt die Ausrichtung der Galerie relativ zum Text fest; also am rechten Rand und vom Fließtext umflossen.


== Überschrift ==
== Überschrift ==
Mit dem optionalen Schlüsselwort <nowiki>caption</nowiki> lässt sich eine Überschrift einfügen:  
Mit dem optionalen Schlüsselwort <tt><nowiki>caption</nowiki></tt> lässt sich eine Überschrift einfügen:  
<br />
<br />
<br />
<br />
<nowiki><gallery caption="Ich bin eine Beispielüberschrift"></nowiki>  
<tt><nowiki><gallery caption="Ich bin eine Beispielüberschrift"></nowiki></tt>  
<br />
<br />
<br />
<br />
Zeile 137: Zeile 235:
<br />
<br />
<br />
<br />
Soll eine Galerie mit nur wenigen Bildern unter der seitenmittig stehenden Überschrift platziert werden, kann <nowiki>class="center"</nowiki> verwendet werden:
Soll eine Galerie mit nur wenigen Bildern unter der seitenmittig stehenden Überschrift platziert werden, kann <tt><nowiki>class="center"</nowiki></tt> verwendet werden:
<br />
<br />
<br />
<br />
<nowiki><gallery class="center" caption="Ich bin noch eine Beispielüberschrift"></nowiki>
<tt><nowiki><gallery class="center" caption="Ich bin noch eine Beispielüberschrift"></nowiki></tt>


== Skalierung in Galerien ==
== Skalierung in Galerien ==
Mit dem Schlüsselwort <nowiki>"widths="…"</nowiki> wird die Breite, mit <nowiki>"heights="…"</nowiki> die Höhe der Bilder festgelegt. Das jeweils breiteste bzw. höchste Bild wird für die Galerie als Maßstab genommen und die kleineren Bilder entsprechend angepasst. Es ist sinnvoll, sowohl einen Wert für <nowiki heights</nowiki> als auch für <nowiki>widths</nowiki> anzugeben, da die Software ansonsten für den jeweils anderen Wert die Größe eines Vorschaubildes beibehält. Im <nowiki>packed</nowiki>-Modus ist der Parameter <nowiki>widths</nowiki> wirkungslos.
Mit dem Schlüsselwort <tt><nowiki>"widths="…"</nowiki></tt> wird die Breite, mit <tt><nowiki>"heights="…"</nowiki></tt> die Höhe der Bilder festgelegt. Das jeweils breiteste bzw. höchste Bild wird für die Galerie als Maßstab genommen und die kleineren Bilder entsprechend angepasst. Es ist sinnvoll, sowohl einen Wert für <tt><nowiki heights</nowiki></tt> als auch für <tt><nowiki>widths</nowiki></tt> anzugeben, da die Software ansonsten für den jeweils anderen Wert die Größe eines Vorschaubildes beibehält. Im <tt><nowiki>packed</nowiki></tt>-Modus ist der Parameter <tt><nowiki>widths</nowiki></tt> wirkungslos.
<nowiki><gallery widths="120" heights="300" perrow="4" caption="Eine weitere Beispielüberschrift"></nowiki>
<br />
<br />
<tt><nowiki><gallery widths="120" heights="300" perrow="4" caption="Eine weitere Beispielüberschrift"></nowiki></tt>


== Formatierung der Beschriftung ==
== Formatierung der Beschriftung ==
Zeile 152: Zeile 252:
<br />
<br />
<br />  
<br />  
<nowiki><gallery style="text-align:center"></nowiki>
<tt><nowiki><gallery style="text-align:center"></nowiki></tt>
|
|
<gallery style="text-align:center" heights="40">
<gallery style="text-align:center" heights="40">
Datei:Hundehütte.gif|Hundehütte  
Datei:Hundehütte.gif|Hundehütte  
</gallery>
</gallery>
|statt alle einzeln mit dem obendrein veralteten <nowiki><center>…</center></nowiki>
|statt alle einzeln mit dem obendrein veralteten <tt><nowiki><center>…</center></nowiki></tt>
|-
|-
| alle kursiv:  
| alle kursiv:  
<br />
<br />
<br />
<br />
<nowiki><gallery style="font-style:italic"></nowiki>
<tt><nowiki><gallery style="font-style:italic"></nowiki></tt>
|
|
<gallery style="font-style:italic" heights="40">
<gallery style="font-style:italic" heights="40">
Datei:Wrestling.gif|Wrestling
Datei:Wrestling.gif|Wrestling
</gallery>
</gallery>
| Ersatz für die <<nowiki>''</nowiki>-Syntax für alle Bildlegenden, die dann auch nicht mehr wirkt
| Ersatz für die <tt><nowiki>''</nowiki></tt>-Syntax für alle Bildlegenden, die dann auch nicht mehr wirkt
|-
|-
| groß:  
| groß:  
<br />
<br />
<br />
<br />
<nowiki><gallery style="font-size:150%"></nowiki>
<tt><nowiki><gallery style="font-size:150%"></nowiki></tt>
|
|
<gallery style="font-size:150%" heights="40">
<gallery style="font-size:150%" heights="40">
Zeile 179: Zeile 279:
| Nur bei Bildernummerierungen
| Nur bei Bildernummerierungen
|}
|}
<br />
<br /><br /><br />
<br />
<b><div align="center">[[Knuddels-Wiki:Handbuch08/8/1|Zurück (Bilder hochladen)]] | [[Knuddels-Wiki:Handbuch09|Weiter (Seitenverwaltung)]]</div></b>
<br />
Nun da das Thema Galerien abgeschlossen ist, wenden wir uns der [[Knuddels-Wiki:Tutorial09|Seitenverwaltung]] zu.

Aktuelle Version vom 26. Februar 2024, 14:01 Uhr

Galerie

Da wir zuvor allgemein über Bilder geredet haben, wenden wir uns nun dem speziellen Thema Galerien zu. Nachfolgend klären wir, wie du Bilder, Grafiken als übersichtliche Galerie in einen Artikel einfügst und platzierst. Auf einen separaten Abschnitt Bilder, Fotos oder Galerie sollte in den meisten Fällen verzichtet werden. Der Leser erkennt auch ohne die Überschrift, dass es sich um eine Galerie von Bildern handelt. Galerien sollten sich in der Regel auf bis zu vier Bilder beschränken. Ausnahme dieser Regel bildet in manchen Artikeln des Knuddels-Wiki die Teilüberschrift Vorschau. Neben der gewählten Überschrift, darf auch die Anzahl der Bilder überschritten werden, wenn dies nicht die Übersichtlichkeit des Artikels beinträchtigt.

Einbindung

Es werden automatisch so viele Bilder in der Größe eines Knuddels-Wiki-Vorschaubildes dynamisch nebeneinandergesetzt, wie es die horizontale Bildschirmbreite zulässt. Die Anweisung jedes Bildes muss jeweils in einer eigenen Zeile stehen:

<gallery>
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
Datei:(Free) Hugs (Multismiley)|(Free) Hugs (Multismiley)
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
</gallery>

wird also zu:

  • (Free) Hugs (Multismiley)

  • (Free) Hugs (Multismiley)

  • 100 goldene Schlüssel

  • 1000 goldene Schlüssel



Natürlich sollte, wie bereits im vorherigen Artikel erwähnt, klar sein, dass du zum Bilder hochladen, sowie zum einfügen in Artikeln im Knuddels-Wiki angemeldet und eingeloggt sein musst.

Syntax

Die grundsätzliche Syntax des Galerie-Elements lautet:

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

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

gallery-Tag

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

  • attributname="Wertangabe"

Unterstützt werden:

caption=
Überschrift, die zentriert über der Galerie angeordnet wird.
Einfache Wiki-Syntax wie ein Wikilink ist möglich, nicht aber eigene Elemente.
widths=
Zahlenwert in Pixeln, der eine abweichende Bildbreite angibt.
heights=
Zahlenwert in Pixeln, der die maximale Bildhöhe angibt.
perrow=
Anzahl der Bilder pro Zeile
perrow="0" ist die Vorgabe und nutzt die momentane Bildschirmbreite aus.
Die Bezeichnung perrow kommt von englisch per-row, pro Zeile.
showfilename
showfilename="1" oder einfach nur showfilename – zeigt in der Bildlegende den jeweiligen Medienbezeichner an.
Vorgesehen für Wartungsseiten und Diskussionen über eine Zusammenstellung, nicht für enzyklopädische Artikel.
mode=
Experimenteller Parameter für zusätzliche Darstellungsmethoden.
Einer von:
  • "traditional" – Vorgabe; entspricht keiner Angabe
  • "nolines"
  • "packed"
  • "packed-hover"
  • "packed-overlay"
style=
Universalattribut für dekorative Eigenschaften
class=
Universalattribut– Projektorganisation und projektweite dekorative Eigenschaften

Definitionszeilen

Für den Block aus Definitionszeilen gilt:

  • Jede Zeile beschreibt genau ein Bild.
  • Ein Zeilenumbruch darf also nicht in der Einzeldefinition vorkommen
  • Die Zeilen können um einige Leerzeichen eingerückt werden, um die Übersichtlichkeit des Quelltextes zu verbessern. Insbesondere wenn lange Einträge bei der Darstellung auf mehrere Zeilen verteilt werden, lässt sich so der Beginn neuer Einträge gut erkennen.
  • Zeilen mit anderen Inhalten sollten in diesem Block nicht auftreten.



Für jeden Eintrag gilt eine der nachstehenden Syntaxvarianten: Bildseitentitel.ext 

      Bildseitentitel.ext|Bildlegende
      Bildseitentitel.ext|Zusatzparameter|Bildlegende
      Bildseitentitel.ext|Bildlegende|alt=Alternative Bildbeschreibung



Zu den einzelnen Komponenten:

  • Bildseitentitel.ext
    • Das ist der Bezeichner der Mediendatei, etwa: [[:Datei:Beispiel.jpg|Beispiel.jpg]]
    • Früher war es erforderlich gewesen, den Namensraumbezeichner voranzustellen (also Datei: oder auch Bild: oder File: oder Image:).
    • Heutzutage ist das im Knuddels-Wiki nicht mehr üblich.
    • Für die Suche im Quelltext ist das nicht erforderlich, weil style="white-space:nowrap">Bildtitel.ext bereits weitgehend eindeutig ist.
  • Bildlegende
    • Sie sollte möglichst kurz sein.
    • Pipe-Symbole | sind nur innerhalb geschlossener Wikilinks erlaubt.
  • Zusatzparameter
    • Sie kommen nur in Sonderfällen bei bestimmten Medientypen vor.
    • Vorstellbar sind:
      • Mydoc.pdf|page=5|Bildlegende
      • MyTiff.tif|lossy|Bildlegende
  • alt=
    • Ausführliche Bildbeschreibung für Anwender, die die Grafik nicht sehen können; insbesondere für Screenreader.

Darstellungsvarianten von Galerien

Es ist möglich, die Darstellung einer Galerie über vier zusätzliche Schlüsselelemente zu verändern. Bei den folgenden Varianten wird zudem der Beschreibungstext unter dem Bild zentriert ausgerichtet.

  • mode="nolines" stellt die Galerie so ein, dass keine sichtbare Begrenzungslinie um die einzelnen Bilder herum angezeigt werden. Hiermit wird die Breite der Galerie stark reduziert. Dadurch, dass keine Begrenzung mehr um die Bilder der Galerie angezeigt wird, können unschöne Abstände am unteren Rand entstehen.


<gallery mode="nolines">
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
</gallery>

wird also zu:

  • (Free) Hugs (Multismiley)

  • (Free) Hugs (Multismiley)

  • 100 goldene Schlüssel

  • 1000 goldene Schlüssel



  • mode="packed" zentriert die Galerie und füllt die Bilder dynamisch auf die zur Verfügung stehende Seitenbreite bei einheitlicher Bildhöhe aus. Die Höhe der gesamten Galerie richtet sich dabei nach dem größten Bild. Somit werden sowohl hochkant wie auch quer fotografierte Bilder am oberen und unteren Bildrand bündig dargestellt.


<gallery mode="packed">
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
</gallery>

wird also zu:

  • (Free) Hugs (Multismiley)

  • (Free) Hugs (Multismiley)

  • 100 goldene Schlüssel

  • 1000 goldene Schlüssel



  • mode="packed-overlay" und mode="packed-hover" modifizieren die Anzeige der Beschriftung, die sich standardmäßig unter den Bildern befindet: Die Beschriftung wird dadurch entweder mit einem leicht durchsichtigen Hintergrund über das Bild gelegt oder sie wird nur dann angezeigt, wenn sich der Mauszeiger auf dem jeweiligen Bild der Galerie befindet. Diese Darstellungsvarianten sollten nicht in Artikeln, sondern allenfalls auf Benutzerseiten verwendet werden: Bei Verwendung der Overlay-Option werden mit großer Wahrscheinlichkeit durch eine permanent sichtbare Beschriftung wichtige Bildteile abgedeckt.


<gallery mode="packed-overlay">
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
</gallery>

wird also zu:

  • (Free) Hugs (Multismiley)

  • (Free) Hugs (Multismiley)

  • 100 goldene Schlüssel

  • 1000 goldene Schlüssel



<gallery mode="packed-hover"
Datei:(Free) Hugs 1.gif|(Free) Hugs (Multismiley)
Datei:(Free) Hugs (Multismiley).gif|(Free) Hugs (Multismiley)
Datei:100 goldene Schlüssel.png|100 goldene Schlüssel
Datei:1000 goldene Schlüssel.png|1000 goldene Schlüssel
</gallery>

wird also zu:

  • (Free) Hugs (Multismiley)

  • (Free) Hugs (Multismiley)

  • 100 goldene Schlüssel

  • 1000 goldene Schlüssel



Bilder pro Reihe – Ausrichtung

Mit dem Schlüsselwort perrow="…" kann fest angegeben werden, wie viele Bilder maximal pro Bilderzeile gezeigt werden sollen. Im Normalfall sollte diese Option vermieden werden, da das Kommando die Standardeinstellungen überschreibt und so beispielsweise das automatische Ausnutzen der zur Verfügung stehenden Bildschirmbreite verhindert.

Der Zusatz class="float-right" (oder selten: class="float-left") setzt die Ausrichtung der Galerie relativ zum Text fest; also am rechten Rand und vom Fließtext umflossen.

Überschrift

Mit dem optionalen Schlüsselwort caption lässt sich eine Überschrift einfügen:

<gallery caption="Ich bin eine Beispielüberschrift">

Wird keine Anzahl der Bilder pro Seite festgelegt (siehe oben), wird die Überschrift in der Mitte der Seite platziert und nicht mittig über den Bildern (wie im folgenden Beispiel „Ich bin eine Beispielüberschrift“).

Soll eine Galerie mit nur wenigen Bildern unter der seitenmittig stehenden Überschrift platziert werden, kann class="center" verwendet werden:

<gallery class="center" caption="Ich bin noch eine Beispielüberschrift">

Skalierung in Galerien

Mit dem Schlüsselwort "widths="…" wird die Breite, mit "heights="…" die Höhe der Bilder festgelegt. Das jeweils breiteste bzw. höchste Bild wird für die Galerie als Maßstab genommen und die kleineren Bilder entsprechend angepasst. Es ist sinnvoll, sowohl einen Wert für </tt> als auch für <tt><nowiki>widths anzugeben, da die Software ansonsten für den jeweils anderen Wert die Größe eines Vorschaubildes beibehält. Im packed-Modus ist der Parameter widths wirkungslos.

<gallery widths="120" heights="300" perrow="4" caption="Eine weitere Beispielüberschrift">

Formatierung der Beschriftung

Wie die meisten Elemente lässt sich ein gallery-Element mit Textformatierungen ausstatten.

Beschriftung zentriert:



<gallery style="text-align:center">

  • Hundehütte

statt alle einzeln mit dem obendrein veralteten <center>…</center>
alle kursiv:



<gallery style="font-style:italic">

  • Wrestling

Ersatz für die ''-Syntax für alle Bildlegenden, die dann auch nicht mehr wirkt
groß:



<gallery style="font-size:150%">

  • Mein Einhorn Boy

Nur bei Bildernummerierungen




Abgerufen von „https://knuddels-wiki.de/index.php?title=Knuddels-Wiki:Handbuch08/8/2&oldid=163135“