Bildergalerie chgallery (Another simple gallery)

Transkript

1 Bildergalerie chgallery (Another simple gallery) Diese Bildergalerie von Georg Ringer sticht unter den zahlreichen Bildergalerien, die es inzwischen für Typo3 gibt, heraus: Demo: Einfach in der Bedienung, keine Datensätze usw. notwendig einfache Möglichkeit zur Beschreibung der Bilder & Kategorien via Flexforms Auslesen eines kompletten Verzeichnis mit Darstellung aller enthaltenen Bilder mit Pagebrowser Darstellung von Unterverzeichnissen und einer Übersicht. Zufallsmodus mit der Möglichkeit, in der Lightbox alle Bilder des Ordners darzustellen. Templatebasierend Zuerst wird die Extension installiert. Dabei ist es bei der Installation von Typo3-Erweiterungen immer wichtig, darauf zu achten, welches Datum die Liste der Erweiterungen in der eigenen Installation aufweist. Ist dieses nicht aktuell, so sollte man zwingend VOR der Installation von Erweiterungen die Liste aktualisieren.

2 Seite 2 von 17 Mit einem Klick auf den orangen Pfeil wird die Installation gestartet und mit Klick auf den grauen Lego-Baustein auch installiert. Zu empfehlende zusätzliche Extensions, die die Funktionalität der chgallery erweitern bzw. ihre Bedienung vereinfachen: Wir installieren auf dieselbe Art und Weise wie oben zwei zusätzliche Erweiterungen: pmkshadowbox (lightbox, die zur eleganten Anzeige der Einzelbilder eingesetzt wird) rgfolderselector (vereinfacht die Auswahl von Verzeichnissen) Nun muss die pmkshadowbox noch als Statisches Template in das vorhandene Seiten- Template eingebaut werden, ansonsten funktioniert der lightbox Effekt (Klick vergrößern) nicht: Linke Spalte: Template in der mittleren Spalte auf die oberste Seite (root Seite) klicken dann werden im rechten Fenster Template-Informationen angezeigt. Hier muss nun ev. auf Info/Modify umgestellt werden. Dann den Link Vollständigen Template-Datensatz bearbeiten verwenden, um alle Template Infos angezeigt zu bekommen.

3 Seite 3 von 17 Im Reiter Enthält findet man dann den Block Statische Templates einschließen (aus Erweiterungen). Hier muss nun die shadowbox-base sowie die shadowbox-tt_news (falls die News Extension eingesetzt wird) von den vorhandenen Objekten ausgewählt werden, sodass sie bei den Ausgewählten angezeigt werden.

4 Seite 4 von 17 Beispiel einer Ordnerstruktur für Bildergalerie: Um Ordnung in die Bilderflut zu bringen, hier ein Beispiel einer möglichen Struktur, die über die Dateiliste angelegt wird: Zuerst einen Ordner >bilder< - hier sind alle Bilder abgelegt Sj1112, sj1213, Schuljahre 01album, 02album, 03album, Bezeichnung für die Bilderalben, die im Laufe eines Schuljahres zusammenkommen. Die Bezeichnung mit den aufsteigenden Nummern ist zu empfehlen, da darauf die Reihenfolge der Anzeige der Alben auf der Website aufbaut. Auf Basis dieser Ordnerstruktur werden nun die Seiten angelegt: Für jedes Schuljahr wird nun die Extension einmal installiert, sodass Lehrerinnen und Lehrer dann mit sehr wenig Aufwand ihre Bilderalben auf die Website SELBER hochladen können und diese sofort richtig angezeigt werden. Wir legen auf der Seite des gewünschten Schuljahres einen neuen Seiteninhalt an. Der Seitinhalt ist das Plugin >Einfache Galerie<, das wir vorher als Extension >chgallery< installiert haben. Da in diesem Beispiel mit Kategorien (=Ordner) gearbeitet wird, wird dieser Modus gleich eingestellt und über das Linksymbol der richtige Ordner ausgewählt.

5 Seite 5 von 17 Nun ist es wichtig, das Gemachte zu speichern, da sich dann die Ansicht des Plugins entscheidend ändert.

6 Wir stellen ein: Seite 6 von 17 1 über dieses Symbol kann nun jedem Ordner eine Beschreibung mitgegeben werden (sehr zu empfehlen!). Die Schreibweise <b>wienwoche</b><br> bewirkt, dass das Wort Wienwoche fett dargestellt wird und nach diesem Titel eine Zeilenschaltung erfolgt. Mit >Speichern< werden die Beschreibungen gesichert und man kann das Fenster wieder schließen. 2 3 die Sortierung soll über den Pfad absteigend erfolgen. Dadurch wird das zuerst erstellte Album (01album) ganz unten in der Liste angezeigt und immer das mit der höchsten Nummer (das aktuellste) ganz oben.

7 Seite 7 von 17 4 auch den Bildern selber kann man eine Beschreibung mitgeben. So sieht das dann auf der Website aus:

8 Seite 8 von 17 Im Reiter >Zusätzliche Einstellungen< bewirkt das Häkchen bei >Zeige alle Bilder in der Lightbox< das Anzeigen der Bilder in einer sogenannten Lightbox (bei uns ist das die Extension pmkhadowbox, die für diese Funktionalität sorgen soll). Wir setzen dieses Häkchen und speichern. -> Achtung, damit das Vergrößern der Bilder funktionieren kann, muss noch zusätzlicher Code ins Setup des Templates eingetragen werden! Templateanpassung für die Lightbox Über Template oberste Ebene des Seitenbaums (hier: VOBS Mittelwald) erreichen wir in der - rechten Spalte das Setup des Templates. Der Bleistift führt uns ins Eingabefeld, wo folgender Code für das Funktionieren der Lightbox in eine neue Zeile eingetragen werden muss.

9 Seite 9 von 17 Hier der Eintrag zum Kopieren: #pmkslimbox einbinden plugin.tx_chgallery_pi1 { gallery.image { file {maxw = 139 maxh = 110 } imagelinkwrap = 1 imagelinkwrap { enable = 1 typolink { title.field= tx_chgallerytitle parameter.override.cobject = IMG_RESOURCE parameter.override.cobject.file.import.data = TSFE:lastImageInfo origfile parameter.override.cobject.file.maxw = 800 parameter.override.cobject.file.maxh = 600 # used lightbox is pmkslimbox ATagParams = rel="lightbox" ATagParams.override = rel="lightbox[sb{field:uid}]" ATagParams.insertData = 1 } } } } plugin.tx_chgallery_pi1.single.image < plugin.tx_chgallery_pi1.gallery.image Nach dem Speichern und Löschen des Seiteninhalts-Cache (rechts oben - Pfeilsymbol)

10 sollte es möglich sein, auf einzelne Bilder zu klicken, sodass diese dann in der Lightbox dargestellt werden. Seite 10 von 17 Anpassungen des bestehenden Layouts (optional) Einige Formatierungen dieser Bildergalerie sollte man meiner Meinung nach ändern bzw. adaptieren. Dazu ist es vorteilhaft, die Stylesheet-Datei in einen Ordner zu kopieren, auf den man einfach Zugriff hat. Der Pfad zu dieser css-datei muss dann natürlich ebenfalls angepasst werden. Neue css-datei erstellen Im gewünschten Ordner (hier fileadmin/templates/mittelwald/css) erstellen wir eine neue Datei mit dem Namen galleryneu.css

11 Seite 11 von 17 Nun kopieren wir den Inhalt der mit der Extension mitgelieferten Stylesheet-Datei in diese neue Datei galleryneu.css. a) Über Erweiterungen Lokale Erweiterungsliste geben wir den Suchbegriff chgallery und klicken auf die Bezeichnung.

12 Seite 12 von 17 Im Ordner res finden wir die gallery.css die Original CSS-Datei. Den Inhalt dieser Datei markieren und kopieren Über die Dateiliste in den Ordner der vorher erstellten galleryneu.css wechseln und den Inhalt einfügen Nach dem Speichern haben wir nun die css-datei in einen für uns leicht zugänglichen und v.a. veränderbaren Bereich verlagert.

13 Seite 13 von 17 Nun müssen wir natürlich dem System TYPO3 noch beibringen, dass es die css-datei nun aus dem neuen Ordner laden soll. Das geschieht mit einem neuen Eintrag ins setup des Templates (Vorgangweise siehe weiter oben): plugin.tx_chgallery_pi1.pathtocss = fileadmin/templates/mittelwald/css/galleryneu.css Nach dem Speichern und anschließendem Löschen des Seiteninhalts-Caches wird nun galleryneu.css als Stylesheet der Extension verwendet. Erst jetzt haben wir die Voraussetzungen geschaffen, das Layout der Bildergalerie zu verändern. Durch die Änderung des Pfades der Datei ergibt sich bereits ein Effekt, den wir sowieso erzielen wollten: Das Hintergrundbild hinter jedem Einzelbild (Rechteck mit Diagonalen) wird nicht mehr gefunden und somit nicht mehr angezeigt, was zu folgender veränderten Darstellung führt: Die Diagonalen sind also weg und die Darstellung wirkt ruhiger. Nun stört eventuell noch die Angabe der Größe des Bildes in kb. Diese blenden wir mit dem Befehl display:none; in der Zeile 156 der galleryneu.css aus:

14 Seite 14 von 17 Speichern und Seiteninhalts-Caches löschen nicht vergessen. Jetzt können wir schon ganz zufrieden sein: Zusammenfassung Die Bildergalerie chgallery bietet uns: Darstellung der Alben in sortierter Reihenfolge mit Titel, Beschreibung, Anzahl der Bilder, Name des Ordners und Erstellungsdatums: Die Thumbnail-Darstellung (kleine Bilder in einer Übersicht) zeichnet sich durch die Möglichkeit, den Bildern einen Titel zu geben und die übersichtliche und anpassbare Darstellung aus (Informationsblock oben, wenn notwendig, mehrere Seiten).

15 Seite 15 von 17 Die Einzelbild-Darstellung wird über die elegante Art einer Lightbox realisiert. Auch hier ist das Navigieren möglich.

16 Seite 16 von 17 Mögliche Vorgangsweise für den Schulbetrieb Es ist sicherlich wünschenswert, den Kolleginnen und Kollegen die Möglichkeit zu bieten, ihre Bilderalben selber anzulegen. Dazu ein Vorschlag: - Typo3-Redakteur/-in einrichten, der in der Dateiliste Zugang zum Ordner >bilder< hat. - Dort wählt der/die Redakteur/-in das passende Schuljahr aus und legt einen Ordner an. Der Name des Ordners folgt den vereinbarten Kriterien (z.b. 03album folgt auf 02album). - Der/die Redakteur/-in lädt alle sein/ihre Bilder in den neu erstellten Ordner hoch. - In diesem neuen Ordner wird eine neue Textdatei mit dem Namen info.txt erstellt. - Die info.txt bekommt folgenden Inhalt: <b>titel des Fotoalbums</b><br> Beschreibung (z.b.: die Schüler der 3a und 3b erlebten eine unvergessliche, ereignisreiche Woche in Wien)

17 Seite 17 von 17 - Das entspricht genau der Vorgangsweise, wie sie oben für die Benennung der Alben über das Typo3-Backend beschrieben wird. - Sichern nicht vergessen. Alles erledigt Neues Album mit Titel und Beschreibung und allen Bildern ist online. VOBS Vorarlberger Bildungsservice Mai cms.vobs.at mail.snv.at elearning.vobs.at Martin Köb webmaster@vobs.at