Qual der Wahl – WordPress Galerie


Will man bei einem Post nicht nur ein Bild mit anhängen, sondern gleich eine gesamte Bilderserie, so bietet WordPress hierfür im Standard die Galeriefunktion. Hierbei werden die angehängten Bilder als Thumbnail im Post angezeigt. Was mich allerdings daran etwas gestört hat war, dass alle Bilder nur in Miniaturform unter dem Post angezeigt wurden. Ich hätte gerne das erste Bild der Galerieserie im Großformat angezeigt und die restlichen Bilder als Thumbnail darunter. Das ist allerdings so out of the box nicht möglich. Also musste an dieser Stelle ein Plugin her.

Auf der WordPress Plugin-Seite gibt es unzählige Erweiterungen für die Standardgalerie. Ich hatte nun drei dieser Plugins in die nähere Auswahl genommen und will an dieser Stelle gerne meine Erfahrungen mit euch teilen.

1. NextGen Gallery

Die NextGen Gallery von Axel Rabe ist ein sehr umfangreiches Plugin, welches sogar ein eigenständiges Customizing Dashboard in die WordPress Adminoberfläche einbindet. Die NextGen Gallery löst die bestehende Mediathek von WordPress komplett ab. Das Plugin ermöglicht es verschiedene Alben anzulegen, die dann wiederum in einen Artikel eingebunden werden können. Im Allgemeinen bietet das Plugin eine hohe Auswahl an Fuktionalitäten.

So können die Galerien als Lightbox, als unterschiedliche Diashow Varianten oder als komplettes Album in den Post eingebunden werden. Interessant ist die Tag-Funktionalität. Mit dieser ist es möglich die Bilder nach entsprechenden Tags zu gruppieren. Meiner Anforderung entspricht an dieser Stelle das Carousel Feature. Hierbei wird das erste Bild der Galerie im Großformat angezeigt und die restlichen Bilder der Serie werden als Thumbnail darunter aufgelistet.

Was mich an dieser Stelle allerdings etwas gestört hat, war die Tatsache, dass diese Funktion (noch) nicht AJAX-fähig ist. Das heißt, beim Wechsel eines Bildes wird die Blogseite noch einmal komplett neu geladen. Es existieren jedoch Ansätze die Carousel-Funktion AJAX-fähig zu machen und ich denke, es ist nur eine Frage der Zeit bis dies umgesetzt wird.

2. yCyclista

Das yCyclista Plugin stellt Bilder einer Galerie in der Carousel-Ansicht dar. Im Gegensatz zur NexGen Gallery, welche die bestehende WordPress Galerie nicht überschreibt, sondern einen komplett eigenständigen Funktionsbereich als Erweiterung bietet, verfolgt das yCyclista-Plugin den Ansatz, die Standard WordPress Galerie zu ersetzten. Das mag im ersten Moment nachteilig klingen, hat aber den Vorteil, dass man mit den gewohnten Codes ([gallery]) und den Editorfunktionen arbeiten kann.

yCyclista ist vom Umfang der Funktionalitäten zudem etwas abgespeckter als die NexGen Gallery. Aber auch hier gibt es eine Adminoberfläche, die bei der Installation des Plugins in das WordPress Backend eingebunden wird. Sehr interessant sind auch die verschiedenen Bildübergangseffekte, die mit Hilfe von jQuery realisiert werden.

3. Simple Scrollbar Gallery

Klein aber oho! Dieser Redewendung passt wohl gut auf die Simple Scrollbar Gallery von Thomas Schmidt. Wie auch yCyclista überschreibt die Simple Scrollbar Gallery die bestehende Galerie von WordPress. Dabei wird auch hier die Carousel-Ansicht genutzt, sodass das erste Bild der Galerie im Großformat angezeigt wird und die restlichen Bilder als Thumbs darunter.

Per Mouseover werden die Bilder dann entsprechend gewechselt. Was mir hier sehr gut gefallen hat, ist die Tatsache, dass die Bilder gewechselt werden ohne die Seite komplett neu zu laden. Nachteilig finde ich, dass die Bilder alle die gleichen Größenverhältnisse besitzen müssen damit diese korrekt angezeigt bzw. nicht abgeschnitten werden. Aber es macht auch Sinn alle Bilder einer Serie in eine einheitlichen Größe zu bringen.

Fazit

Wer einen Bildblog betreibt oder viele Medien in seinen Posts einbindet und auf die Verwaltung von einzelnen Alben viel Wert legt, ist mit der NextGen Gallery bestens bedient. Für meine Anforderungen war das Plugin allerdings viel zu umfangreich. Dennoch werde ich es mir nochmals im Detail anschauen, wenn das Carousel Feature per AJAX aufgerufen werden kann.

Vom yCyclista Plugin war ich zunächst sehr überzeugt, da es eine einfache Adminoberfläche bereitstellt und mit den verschiedenen Bildübergangseffekten auch etwas fürs Auge bietet. (Ist natürlich immer Geschmackssache). Was mich allerdings etwas gestört hat, war die Ausrichtung des Thumbnails unter dem Bild im Großformat, was aber mit etwas CSS noch anpassbar wäre.

Letztendlich habe ich mich für die  Simple Scrollbar Gallery entschieden, weil diese genau meine Anforderungen abdeckt und nicht mit zu vielen Extras von der eigentlichen Funktionalität ablenkt. Ich habe bei mir noch eine Anpassung in der style.css des WordPress Themes vorgenommen, um die Thumbnails unter dem Bild im Großformat noch mit einem Hovereffekt auszustatten. Das ist relativ leicht umzusetzen, da für die Stylesheet-Anpassungen im Plugin eine eigene Klasse vorgesehen ist. Im konkreten Fall habe ich das Stylesheet um folgende Einträge ergänzt:.

  • .gallery-list :hover img{border: 1px dotted #854C2C}
  • .gallery-list img{border: 1px solid #854C2C}

Und das Ganze sieht dann so aus:

Tags:   Abgelegt unter Allgemein

  1. Gleb Dolotov Sagt:

    Daumen hoch für alle die an dieser Webseite gearbeitet haben, oder es immer noch tun !

  2. Fabian Sagt:

    Vielen Dank für die lobenden Worte. Für (hoffentlich positive) Kritik bin ich immer offen.

    Wer seine Anerkennung zeigen will, der kann dies auch gerne über den “Gefällt mir” ausdrücken.

  3. Carola Sagt:

    Hallo, ich habe mir gerade die Simple Scrollbar Gallery installiert. Nun würde ich auch gern ein paar Sachen im Stylesheet ändern. An welcher Stelle und vor allem in welcher Datei muss ich das tun??? Sorry, aber ich bin totaler Anfänger auf diesem Gebiet…

    Ich danke schon jetzt für hilfreiche Antworten!!!

  4. Fabian Sagt:

    Hallo Carola,

    Sie müssen wir folgt vorgehen:
    Im WP-Admin auf Design, dort auf den Editor
    Dann wählen Sie ihr Theme oben rechts und klicken in den rechten Spalte unten auf style.css, sodass der Dateiinhalt im Editor erscheint.
    Suchen Sie den Inhalt .gallery-list. Dort können Sie dann die Ergänzungen vornehmen.

    Bei mir lauten die Einträge z.B. wie folgt:
    .gallery-list :hover img{ border: 1px dotted #854C2C }
    .gallery-list img{ border: 1px solid #854C2C }
    .gallery-list a{ color: #fff2db }
    .gallery-list { margin-top: 7px}

Schreibe einen Kommentar

eMail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.