Bildergalerie als Grid

Hier werden die verschiedenen Typen der Galerien in der Grid-Darstellung gezeigt.

Standard type=“grid“

Beispiel

Code

[gallery type="grid" ids="2216347,2216346,2216345,2216344,2216342"]

Der Standardtyp „grid“ ohne Angabe von Columns wird eine Mindestbreite pro Bild festlegen und dann abhängig von der Bildschirmauflösung selbstständig umbrechen.
Außerdem ist nur bei dieser Form ein Hover-Effekt vorhanden, der das jeweilige Bild beim Überfahren mit der Maus etwas vergrößert.

Bei den folgenden Varianten hingegen wird versucht die angegebene Zahl an Bildern pro Zeile darzustellen; Dabei wird jedoch die Größe des Bildes variieren.
Wenn Bilder unterschiedliche Dimensionen haben, wird stets nur eine Reihe von Bildern dieselbe Höhe haben. Die Proportionen werden dabei soweit möglich eingehalten.

Häufiger in Verwendung kommen 3er oder 4er Grids:

Standard type=“grid“ mit Columns-Angabe: columns=“3″

Im Backend kann man die Columns ändern. Diese werden beim WordPress-Default dazu verwendet, die Anzahl der Spalten festzulegen.

Beispiel

Code

[gallery type="grid"  columns="3"  ids="2216347,2216346,2216345,2216344,2216342"]

Standard type=“grid“ mit Columns-Angabe: columns=“4″

Im Backend kann man die Columns ändern. Diese werden beim WordPress-Default dazu verwendet, die Anzahl der Spalten festzulegen.
Die Parameter type="grid" columns="4" entsprechend type="4cols".

Beispiel

Code

[gallery type="grid"  columns="4" ids="2216347,2216346,2216345,2216344,2216342"]

Weniger nützlich sind die Formate mit 2 oder 5 Bilder pro Zeile:

Standard type=“grid“ mit Columns-Angabe: columns=“5″

Im Backend kann man die Columns ändern. Diese werden beim WordPress-Default dazu verwendet, die Anzahl der Spalten festzulegen.

Beispiel

Code

[gallery type="grid"  columns="5" ids="2216347,2216346,2216345,2216344,2216342"]

Bildunterschrift anzeigen

Mit dem Attribut captions="true" lässt sich die Anzeige der Bildunterschriften aktivieren.
Diese Funktion steht sowohl in der Griddarstellung, als auch in der Sliderdarstellung der Galerie zur Verfügung.
Bei Nutzung der Griddarstellung werden diese unter allen Bildern gezeigt,l bei der Sliderdarstellung nur unter den aktiven Slide.

Beispiel

Code:

[gallery type="grid" captions="true" ids="2216347,2216346,2216345,2216344,2216342"]

Abstand der Bilder abschalten

Mit der CSS-Klasse nospace kann der innere Abstand der Bilder entfernt werden. Somit erscheint die Bilderliste direkt zusammenhängend.

Beispiel mit Flexgrid

Code:

[gallery type="grid" class="nospace" ids="2216347,2216346,2216345,2216344,2216342"]

Beispiel mit 4cols

Code:

[gallery type="4cols" class="nospace" ids="2216347,2216346,2216345,2216344,2216342"]