Ist die Phoca Gallery erst mal installiert, könnt Ihr nun beginnen einzelne Galerien zu erstellen. Im Beispiel nutze ich die Bilder, die bei Windows 7 mitgeliefert werden. Das Ergebnis wird wie folgt aussehen:

Phoca Gallery - Ergebnis des Workshops

Meldet euch am Backend an und wechselt über Komponenten > Phoca Gallery zum Kontrollzentrum.

Phoca Gallery - Kontrollzentrum

Hier wird für jede Galerie, die Ihr erstellen wollt eine eigene Kategorie angelegt. Klickt also auf das Symbol "Kategorie".

Phoca Gallery - Kategorien

Dort erstellt Ihr gleich über die Schaltfläche "Neu" einen

Phoca Gallery - Erstellen einer neuen Kategorie

Vergebt für die Kategorie (und damit für die Galerie) einen Titel. Scrollt mit der Maus ein wenig nach unten.

Phoca Gallery - Kategorie Optionen

Hier findet Ihr weitere Optionen, die Ihr der Kategorie (bzw. Galerie) mitgeben könnt. Für die Suchmaschinen (wie Google) trage ich die Meta Beschreibung und die Meta Schlüsselwörter ein. Dann scrolle ich wieder etwas nach unten, um die letzten Optionen der Galerie zu sehen.

Phoca Gallery - Weitere Optionen

Hier wird dann noch die Beschreibung der Kategorie eingegeben. Dann laufe ich mit der Maus ganz nach oben und klicke auf Speichern.

Phoca Gallery - Kategorien

Die Kategorie ist damit angelegt. Im nächsten Schritt werden die Bilder hochgeladen. Ich klicke auf den Punkt Bilder (alternativ könnt Ihr über Erweiterungen > Phoca Gallery auf Bilder klicken).

Phoca Gallery - Bilder

Derzeit ist noch kein Bild über die Phoca Gallery hochgeladen worden. Ihr habt die Möglichkeit Bilder einzeln (über das Symbol "Neu") oder mehrere Bilder auf einen Schlag (über die Schaltfläche "Mehrere hinzufügen") hochzuladen. Ich entscheide mich hier für "Mehrere hinzufügen".

Phoca Gallery - Eigener Ordner für die Bilder

Für jede Galerie (und damit jede Kategorie) solltet Ihr gleich einen eigenen Ordner anlegen. Im unteren Bereich befindet sich die Möglichkeit einen neuen Ordner anzulegen. Ich trage "windows_beispielbilder" ein (ACHTUNG: Es dürfen keine Umlaute, kein ß und eine Leerzeichen im Ordnernamen vorkommen) und klicke auf "Ordner anlegen".

Phoca Gallery - Eigener Ordner für die Bilder

Ist der Ordner erfolgreich angelegt, klickt Ihr auf den Namen des Ordners, um in diesen Ordner zu wechseln.

Phoca Gallery - Eigener Ordner für die Bilder

Der Ordner ist noch Leer. Aber das wird sich nun ändern. Wählt als erstes die Kategorie, der die Bilder zugeordnet werden sollen.

Phoca Gallery - Bilder hochladen

Wählt nach der Kategorie (bei mir war es die Kategorie "Windows Beispielbilder", die ich ja gerade zuvor erstellt habe) die Möglichkeit, wie Ihr Bilder hochladen wollt. Hier gibt es ...

  • ... Heraufladen: Das bedeute Bild für Bild einzeln hochladen (kann langweilig werden)
  • ... Heraufladen per JAVA: Das hochladen vieler Bilder wird damit wesentlich erleichtert
  • ... Heraufladen per Flash: Das selbe wie bei Java, nur mit Hilfe von Adobe Flash

Welche Technik Ihr nutzt, ist eigentlich egal, ich entscheide mich für "Heraufladen per JAVA".

Das Hochladen mit der Unterstützung von Java klappt prima. Doch Voraussetzung hierfür ist, dass Ihr auch die Java Runtime Environment (kurz JRE) von Sun auf eurem Rechner installiert habt. Wenn nicht, habt Ihr die Möglichkeit über Flash zu gehen oder die Bilder einzeln über Heraufladen auszuwählen. Ich an eurer Stelle würde die JRE installieren und über JAVA gehen. Das lohnt sich auf jeden Fall.

Nach dem Klick auf "Heraufladen per Java" fragt das System in der Regel, ob Ihr der Anwendung Vertrauen schenken wollt.

Java Sicherheits Dialog

Diesen Dialog könnt Ihr mit Ausführen bestätigen.

Phoca Gallery - Bilder hochladen

Im JAVA Dialog klickt Ihr auf "Durchsuchen...".

Phoca Gallery - Bilder hochladen

Wählt im Dialog Öffnen die Bilder aus, die hochgeladen werden sollen. Tipp: Klickt auf das erste Bild, dann haltet die Umschalten-Taste gedrückt und klickt auf das letzte Bild. So kann man vom ersten bis zum letzten Bild alle auswählen. Wenn Ihr nur einzelne Bilder benötigt, könnt Ihr mit der gedrückten Strg+Taste einzelne an- bzw. abwählen.

Habt Ihr alle Bilder ausgewählt, klickt auf die Schaltfläche "Öffnen". Beachtet unbedingt die max. Dateigröße von 3 MB pro Bild und die max. Auflösung von 3072 x 2304 Pixel. Sollten eure Bilder diese Maße überschreiten, müsst Ihr die Bilder z. B. IrfanView zuvor anpassen.

Phoca Gallery - Bilder hochladen

Dann der Klick auf die Schaltfläche "Hochladen" ...

Phoca Gallery - Bilder hochladen

Die Bilder werden zum Server geladen. Das kann abhängig von eurer Internetanbindung mehr oder weniger lang dauern.

Phoca Gallery - Bilder hochladen

Achtet darauf, dass die Kategorie eingestellt ist (wird doch wieder zurückgesetzt, wenn die Bilder hochgeladen sind) und dass alle Bilder, die Ihr in die Kategorie bringen wollt, ausgewählt sind (Klickt auf die Checkbox oberhalb der Bilder, dann werden alle Checkboxen aktiviert). Dann Klickt auf Speichern.

Phoca Gallery - Bilder hochladen

Die Miniaturansichten (Thumbnails bzw. Vorschaubilder) werden erstellt.

Phoca Gallery - Bilder hochladen

Damit ist die Galerie erfolgreich erstellt. Ihr könnt nun jedes einzelne Bild nochmals nach bearbeiten. Klickt auf den Namen eines Bildes und schaut euch an, was man da alles machen kann.

Darauf möchte ich hier nicht weiter eingehen. Im folgenden werden wir die Galerien über das Hauptmenü von Joomla! einbinden.

Galerien im Hauptmenü einbinden

Wechselt nun im Backend über Menüs ins Hauptmenü.

Phoca Gallery - Galerie ins Hauptmenü einbinden

Wählt das Symbol "Neu".

Phoca Gallery - Galerie ins Hauptmenü einbinden

Hier klickt auf "Phoca Galerie" und anschließend "Phoca Galerie Layout Kategorieliste".

Phoca Gallery - Menüpunkt hinzufügen

Hier müsst Ihr nur den Titel des Menüpunktes eintragen. Klickt anschließend auf Speichern.

Phoca Gallery - Menüpunkt wurde erstellt

Der neue Menüpunkt wird unten ans Hauptmenü angefügt. Sie können nun mit den Pfeil-Symbolen in der Spalte "Reihenfolge" die Menüposition anpassen. Anschließen schauen wir uns das Ergebnis in der "Vorschau" an.

Phoca Gallery - Menü Bilder eingebunden

Klickt auf den Menüpunkt "Bilder".

Phoca Gallery - Kategorieliste im Frontend

Die Galerieliste wird angezeigt. Vor der Kategorie wird immer ein Bild aus der Kategorie zufällig ausgewählt und angezeigt.

Weitere Menüpunkte müssen nicht angelegt werden. Ihr müsst nun nur noch weitere Kategorien im Backend anlegen und Bilder hinzufügen. Die Kategorien tauschen dann hier automatisch auf.

Klickt auf die Kategorie um die Galerie zu "betreten".

Phoca Gallery - Bildergalerie

So präsentiert die Phoca Gallery die Bilder aus der Kategorie. Wenn Ihr die Namen der Bilder bearbeitet habt (siehe Bilder nachbearbeiten weiter oben), dann würden hier drunter nun auch vernünftige Namen stehen. Habt ihr die Namen so gelassen, sieht es wie bei mir im Beispiel aus.

Klickt auf eines des Bilder, ...

Phocal Gallery - Lightbox

... so wird das Bild in der Lightbox dargestellt. Eine Diashow ist möglich, das vor- und zurückblättern ebenfalls. Schließen könnt Ihr das Bild durch einen Klick in den dunkel gewordenen Bereich links, rechts, ober oder unter dem Bild, alternativ über die X oben rechts am Bild.

Das soll's gewesen sein. Den Rest solltet Ihr euch anschauen, wenn Ihr ein wenig mit der Phoca Gallery gearbeitet habt. Es gibt beim Hersteller auch noch einige Erweiterungen zur Komponente. Aber wie gesagt, schaut euch das selbst ein wenig an. Hier hört unsere Doku zunächst auf.

Viel Spaß mit der Phoca Gallery

Eure JUG Fulda