Fotogalerien mit Joomla – Plugins einsetzen

Welche Möglichkeiten die diversen Erweiterungen hinsichtlich des Anlegens und der Verwaltung von Bildergalerien bieten, wurde in den beiden vorherigen Tutorials gezeigt. Auch wenn dort natürlich nicht alle verfügbaren Erweiterungen vorgestellt werden konnten, so wurde doch zumindest ein erster Überblick verschafft. In diesem Teil der Tutorial-Serie geht es nun um Plugins, mit denen sich die Anzeige von Bildern attraktiver gestalten lässt. Denn in der Tat gibt es durchaus Effekte, die man erst durch den Einsatz zusätzlicher Plugins hinbekommt. Zwei dieser Plugins werden in diesem Tutorial genauer unter die Lupe genommen. Das ist einmal Simple Image Gallery und Mutlithumb. Beide sind sehr einfach zu installieren und anzuwenden. Und genau hier unterscheiden sich diese Plugins von den teilweise recht komplexen und komplizierten Erweiterungen für Fotogalerien.

Wir empfehlen:
Joomla!-Training

Texte ohne Bilder wirken meistens etwas langweilig. (Zumindest wenn sie im Internet veröffentlicht werden.) Selbstverständlich bietet Joomla die Möglichkeit, über den integrierten WYSIWYG-Editor Fotos in Texte einzufügen.

Das funktioniert zwar gut und Sie kennen das längst, sonderlich spektakulär sieht das Ergebnis dann aber nicht aus. Wer spezielle Effekte integrieren will, der muss auf entsprechende Plugins zurückgreifen. Wie wäre es denn zum Beispiel mit Folgendem:

Durch dieses Plugin werden die Bilder, die man in die Seite eingefügt hat, automatisch verkleinert. Um das Bild dann in Originalgröße anzuzeigen, muss man es dann nur anklicken.

Das Foto wird in einem Popup-Fenster geöffnet. Solche Anwendungen sind ohne entsprechende Plugins nicht zu realisieren. Welche Möglichkeiten sich Ihnen hinsichtlich der Integration und Präsentation von Bildern bieten, zeigt dieses Tutorial, in dem zwei der beliebtesten Bilder-Plugins vorgestellt werden.

Simple Image Gallery
Ein sehr hilfreiches Plugin ist Simple Image Gallery. Denn damit lassen sich Bilder verkleinert in Artikel einfügen. Durch Anklicken wird das Bild dann in Originalgröße in einer Lighbox angezeigt. Vorteil dieser Variante: Man muss nicht erst lange nach einer komplexen Galerie suchen, die diese Funktionalität zu bieten hat. (Ohnehin sucht man nach dieser Funktionsweise bei den meisten Galerien vergebens.) Stattdessen setzt man einfach Simple Image Gallery (oder ein anderes Plugin) ein und erweitert damit die Funktionalität der entsprechenden Komponente.

Die Installation und Konfiguration dieser Komponente funktioniert denkbar einfach. Laden Sie sich das Plugin von der Seite http://www.joomlaworks.gr/ herunter. (Aber Achtung: Normalerweise reicht die kostenlose Simple Image Gallery. Die Pro-Variante bietet zwar etwas mehr, man muss dafür aber auch 12 Euro berappen.)
Erledigt wird die Installation wie üblich über Erweiterungen und Installieren/Deinstallieren. Nach erfolgreicher Installation finden Sie unter Erweiterungen/Plugins einen entsprechenden Eintrag.

Durch einen Klick auf den Plugin-Namen gelangen Sie in das Konfigurations-Fenster der Simple Image Gallery. Hier können Sie zunächst einmal die gewünschte Thumnail-Größe angeben.

Zusätzlich lassen sich im rechten Fensterbereich die Texte anpassen, die später beim Überfahren der Bilder mit der Maus angezeigt werden. Vergessen Sie zudem nicht, das Plugin zu aktivieren.
Jetzt müssen die Bilder auf den Server geladen werden. Wichtig ist es, dass dabei das richtige Verzeichnis angegeben wird. Legen Sie also beispielsweise unter imagesstories das Verzeichnis bilder an. Alle Grafiken, die Sie in diesem Verzeichnis speichern, werden später in den entsprechenden Beiträgen angezeigt.

Damit sind die Vorarbeiten abgeschlossen. Denn mehr ist tatsächlich nicht zu tun. Jetzt muss man nur noch dafür sorgen, dass die Bilder auch tatsächlich innerhalb des gewünschten Beitrags angezeigt werden. Dazu öffnen Sie den betreffenden Beitrag bzw. die betreffende Seite und tragen an der gewünschten Stelle Folgendes ein:

{gallery}bilder{/gallery}

In diesem Fall werden alle Fotos, die innerhalb des bilder-Verzeichnisses liegen, angezeigt. Insgesamt sollte das Beitragsfenster dann in etwa folgendermaßen aussehen:

Wenn Sie die Seite speichern und anschließend im Frontend aufrufen, sehen Sie, dass genau das gewünschte Ergebnis erreicht wurde. Und der Aufwand dafür ist tatsächlich nicht der Rede wert.

MultiThumb
Ähnlich einfach gestaltet sich der Einsatz des MultiThumb-Plugins. Bei MultiThumb handelt es sich ebenfalls um ein Bilder-Plugin. Das Tool ermöglicht die Anzeige von Popup-Bildern in Artikeln. Damit aber nicht genug. Die Bilder lassen sich sogar in einer Lightbox, Slimbox und noch anderen Varianten präsentieren.
Leider wurde die Projektwebseite vor kurzem Opfer einer Hacker-Attacke. Deshalb hier der Direklink auf das Plugin: http://kreacom.dk/files/multithumb_for_j15_alpha3.zip. Die Installation erfolgt wie üblich über Erweiterungen und Installieren/Deinstallieren. Nach der Installation finden Sie unter Erweiterungen/Plugins den Eintrag Mutlithumb.

Im linken Fensterbereich sollte das Plugin zunächst einmal aktiviert werden. Rechts sind zahlreiche Parameter enthalten, über die sich das Verhalten des Plugins steuern lässt.

Für den Anfang genügt es eigentlich, wenn Sie den gewünschten Wert bei Popup method einstellen. Eine Empfehlung, welche der verfügbaren Varianten am besten aussieht, kann und will ich nicht abgeben. Denn das ist sicherlich Geschmackssache.
Da die Parameterbeschreibungen auf Englisch geschrieben sind, folgt hier ein kurzer, knackiger Blick auf die wichtigsten Einstellungen:

  • Use thumbnails – Diese Option sollte normalerweise auf Ja stehen, da man sich ja sonst den Einsatz von Multithumb sparen könnte.
  • Enable Multithumb in these categories only – Darüber können Sie festlegen, ob MultiThumb nur auf bestimmte Kategorien angewendet werden soll. Tragen Sie die IDs der gewünschten Kategorien in dieses Feld ein.
  • Disable Multithumb in these categories – Diese Option ist ähnlich gelagert wie die vorherige. Nur gibt man hier eben die Kategorien an, bei denen MulthiThumb nicht angewendet werden soll.
  • Apply only to content with {multithumb} – Es besteht die Möglichkeit, Multithumb nur auf solche Grafiken anzuwenden, die mit {multithumb} ausgestattet sind. Dieses Code-Teil schreibt man im HTML-Modus des Editors direkt vor das img-Element, über das das Bild eingebunden wurde. Wird diese Option aktiviert, dann werden ausschließlich so ausgezeichnete Bilder von Mutlithumb berücksichtigt.
  • Exclude pages with {nomultithumb} – Darüber können Sie Inhalte explizit vor Multithumb beschützen. Fügen Sie dazu {nomultithumb} in die gewünschte Seite ein.

Nachdem die Einstellungen übernommen wurden, kann das Plugin auch bereits eingesetzt werden. Das geht ganz einfach. Fügen Sie die Bilder ein, wie Sie es gewohnt sind, also ganz normal über den Editor.
Wenn Sie die Einstellungen jetzt speichern, können Sie das Ergebnis im Frontend bewundern. Je nachdem, welche Popup-Methode Sie gewählt haben, wird jetzt das Bild entsprechend angezeigt.
An dieser Stelle noch einmal der Hinweis, dass Sie die einzelnen Parameter ruhig alle ausprobieren. So bekommen Sie ein Gefühl dafür, wie leistungsfähig dieses kleine Plugin tatsächlich ist.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Joomla! für Einsteiger und Aufsteiger

Joomla! für Einsteiger und Aufsteiger

Was liegt wo und ist wie, mit welchem Inhalt verknüpft?! Nach diesem Kurs ist das keine Frage mehr! Mit Joomla! erstellst du Webseiten und behältst deren Inhalte jederzeit im kontrollierenden und koordinierenden Blick.

  • 28 Lektionen in über fünf Stunden Video-Training zum praktischen Umgang mit Joomla!
  • Lerne das CMS von Grund auf kennen und verwalte damit deine redaktionellen Webseiten-Inhalte
  • Praxisnah lernen: inklusive Arbeitsmaterialien zum Mitmachen und Nachvollziehen
  • Auf dem neuesten Stand: Optimiert für die aktuelle Joomla!-Version 3.6

Zum Training