Bildergalerie in Contao

Das Galerie Element in Contao ist relativ einfach zu verstehen und einzusetzen. Mit ein paar Tricks lässt sich allerdings noch ein bisschen mehr heraus holen: Von mehrsprachiger Bildbeschreibung bis zu CSS Filtern.

Contao Galerie Element Theme

Wer viele Fotos auf seiner Website präsentieren möchte, kommt an einer Galerie in der Regel nicht vorbei. Meistens möchte man eine Übersicht, ähnlich einem Kontaktabzug, der einen schnellen Überblick über die vorhandenen Bilder ermöglicht und einzelne Bilder nach Klick in Großansicht zeigt.
Zusätzlich möchte man zu einem Bild meistens eine Beschreibung und einen alt Tag einstellen. Gerade an diesem Punkt hatte Contao bis zur Version 3 noch Nachholbedarf.

CSS und jQuery für die Contao Galerie

Die Verwendung des Galeriemoduls stellt den Contao Benutzer allerdings noch vor ein paar Herausforderungen. So muss für die Galerie auf jeden Fall CSS-Programmierung geleistet werden, bis wir wirklich von einer Galerie sprechen können. Dazu sollten wir ein externes CSS einbinden bzw. den entsprechenden Code in unsere CSS Datei integrieren. Für die Galerie eine eigene CSS Datei zu schreiben erscheint sinnvoll, damit der Code nicht auf jeder Seite mit geladen werden muss.

Zusätzlich ist es für die Bildvergrößerung via Lightbox notwendig Javascript einzubinden. Hier hat man die Wahl zwischen jQuery (j_colorbox) oder den MooTools (moo_mediabox). Dieses kann man über das Seitenlayout einfach hinzulinken, in dem man die entsprechenden Optionen im Seitenlayout setzt.
Demzufolge kann es sinnvoll sein für die Galerieseiten ein eigenes Seitenlayout anzulegen. In diesem können wir sowohl unser externes CSS einbinden, als auch jQuery aktivieren und laden dieses nicht unnötig auf Seiten, in denen wir es nicht benötigen.

Contao Galerie einsetzen

Die Galerie kann einfach als Contentelement in den gewünschten Artikel eingesetzt werden. Zu finden ist die Galerie im Bereich "Media-Elemente".
Als Erstes können wir nach dem Erstellen des Elements eine Überschrift eingeben. Diese wird dann über der Galerie angezeigt. Im Bereich "Dateien und Ordner" wählen wir anschließend die gewünschten Bilder oder ganze Verzeichnisse aus. Letzteres hat den Vorteil, dass Bilder, die nachträglich in das Verzeichnis gespeichert werden, automatisch in die Galerie aufgenommen werden, ohne das wir diese neu auswählen müssen.

Wir können wählen, in welcher Reihenfolge die Bilder dargestellt werden. Dazu wählen wir im Menü: "Sortieren nach" die gewünschte Methode. Wählen wir "Individuelle Reihenfolge" können wir die Bildfolge selbst bestimmen, indem wir die Bilder via Drag & Drop umsortieren. Für die Ausgabe von Verzeichnissen, die immer das neuste Bild anzeigen sollen, ist die Sortiermethode "Datum aufsteigend" sinnvoll.

Anschließend folgen die Standard-Bildeinstellungen, die wir bereits aus anderen Contao Modulen, die Bilder enthalten, kennen. Wichtig ist an dieser Stelle vorallem die Bildgröße, sowie "Vorschaubilder pro Reihe" und "Elemente pro Seite".

Damit die Bilder verkleinert dargestellt werden, können wir an dieser Stelle eine Bildgröße in Pixeln vorgeben. Der Nachteil dabei ist, dass die Galerie dadurch nicht mehr wirklich responsiv ausgegeben wird. Damit die Galerie sich responsiv korrekt verhält, sind einige Schritte mehr notwendig - unter anderem bietet sich hier die Polyfill-Funktion von Contao an (dazu in einem der nächsten Beiträge mehr).

Anschließend geben wir an, wieviele Bilder in einer Reihe und wieviele Bilder pro Seite dargestellt werden sollen. Anhand der Einstellung "Elemente pro Seite" können wir die Galerie in mehrere Blöcke unterteilen, die dann über entsprechend viele Seiten verteilt werden.
Letztendlich können wir über die Einstellung: "Gesamtzahl der Bilder" bestimmen, wieviele Bilder insgesamt ausgegeben werden. Geben wir eine 0 ein, werden immer alle Bilder, die Contao in den angegebenen Verzeichnissen findet, ausgegeben. Sinnvoll ist die Einstellung, wenn sich sehr viele Bilder in den Verzeichnissen sammeln.

Galerie, Dateiverwaltung & Meta Information

Damit die Contao Galerie Beschreibungen zu den einzelnen Bildern ausgeben kann, müssen diese in die Meta Informationen zu den jeweiligen Bilder eingesetzt werden. Dazu wählen wir in der Dateiverwaltung (im Bereich "System") das gewünschte Bild. Unter dem Bild finden sich dann die Meta-Informationen: Bildtitel, Bild-Link und Bildunterschrift. Diese können wir sogar in mehreren Sprachen hinterlegen.

Zu beachten ist, dass der Bildtitel im "Default Template" der Galerie als Title Tag hinterlegt wird und demzufolge als Tooltip beim Mousehover, sowie auch als Überschrift in der Lightbox erscheint. Die Bildunterschrift andererseits wird direkt als Unterschrift in der Galerie ausgegeben und kann unseren via CSS geordneten Aufbau leicht zerstören. Hier ist etwas Kreativität in der CSS Programmierung gefragt, wie die Unterschriften am sinnvollsten angezeigt werden.
Bedenken sollten man auch, dass die Bildunterschrift von Contao auf 255 Zeichen begrenzt sind. Ausführliche Beschreibungen lassen sich hier demnach nicht hinterlegen.

Einfaches CSS für die Contao Galerie

Alleine mit dem Einsetzen des Elements ist es in diesem Fall leider nicht getan. Für eine ansprechende Darstellung auf der Website braucht es noch CSS - je nach Aufwand mehr oder weniger. Wurde der Layout Builder im Seitenlayout von Contao aktiviert, erhalten wir zumindest schon ein halbwegs ansehnliches Ergebnis und die Bilder stehen bei richtigem Größenverhältnis bereits nebeneinander. 

Wurde die Seite ohne den Layout Builder aufgebaut und/oder unser Layout verlangt nach mehr Design, benötigen wir ein paar (zusätzliche) CSS Schnipsel.

/*-- Allgemein --*/
.ce_gallery, .ce_gallery ul {display: block; overflow: hidden}
.ce_gallery ul li {float: left; list-style-type: none}
.ce_gallery .image_container{position: relative; margin: 0}
.ce_gallery .col_first{clear: both}
Einfaches CSS für die Contao Galerie
Die Galerie nach dem Einsetzen der allgemeinen CSS Selektoren

TIP

Möchten wir eine Galerie ohne die Abstände wie sie auf dem obigen Bild zu sehen sind, müssen wir dem img-Tag folgendes zuweisen:
.ce_gallery img {display: block}

Außerdem empfiehlt sich diese generelle Einstellung, die unschöne Rahmen beim Klick verhindert: 
.ce_gallery a {outline: none}

Je nach Layout der Website kann zudem ein einfacher schwarzweiß Filter, der beim mouseover ausfadet, unseren Bildern einen schönen und schlichten Effekt verleihen. Allerdings gibt es hier unter Firefox des öfteren noch Probleme, wer diesen Effekt unbedingt benötigt, sollte mit diesem Filter vorsichtig sein. 

/*-Schwarzweiß Filter & Transition hinzufügen--*/
.ce_gallery img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}

/*-Schwarzweiß Filter bei Hover aufheben--*/
.ce_gallery img:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
Schwarzweiß Filter mit Hover Effekt Galerie
Schwarz-weiß Filter bei mouseover

Weitere Filtereffekte, die sich mit dieser Methodik und der Contao Galerie umsetzen lassen, finden sich hier: https://css-tricks.com/

zur Blogübersicht

Online Website Check

Einzelne Webseiten in wenigen Sekunden auf Fehler überprüfen, Optimierungspotenziale herausfinden und direkt verbessern. Kostenlos und anonym mit unserem Website Check Tools.

Hilfe & Support

Sie haben eine Contao Website und benötigen professionelle Unterstützung für Ihr Projekt im Bereich Webdesign, Programmierung, Software oder Online Marketing? Nehmen Sie Kontakt zu uns auf, wir freuen uns auf Sie.  

Cookie- & Analyse Einstellungen

Voreingestellt sind ausschließlich zulässige Cookies, für die keine Einwilligung benötigt wird. Analyse und Tracking, sowie weiteren funktionellen Cookies, können Sie unter "Mehr" durch Anwählen von "Ja" zustimmen.
Weitere Infos zu Cookies und Ihrem Datenschutz stellen wir Ihnen in der Datenschutzerklärung vor.

Verweigern
Akzeptieren
Mehr