Bildergalerien für Georgienseite als Extension in TYPO3

Aus mehreren Reisen nach Georgien verfügt die Agentur Irma Berscheid-Kimeridze über einen Schatz von mehr als 3.000 digitalen Bildern. Diese sollten auf der Georgienseite mit Hilfe von Bildergalerien verfügbar gemacht werden. Vorbild dafür waren die zahlreichen Slider analog zur Lightbox auf Basis von jQuery, die es auf vielen Webseiten gibt.

Ausgangslage

Bei der Version 2014 der Georgienseite, die auf TYPO3 6.2 basierte, gab es einige Bildergalerien, die mit Hilfe einer Extension realisiert wurden. Nach dem update der Georgienseite auf TYPO3 7.6 stand diese Extension nicht mehr zur Verfügung. Zudem waren die meisten Slider der Extension nicht responsiv ausgelegt. 

Daher entschied sich die Agentur zur Realisierung einer eigenen Extension, um die Bildergalerien als Slider darzustellen.

Anforderungen an die Extension

Die Extension für die Slider sollte mehreren Anforderungen genügen: 

  • Bildergalerien und die in diesen Galerien dargestellten Bilder sollten im TYPO3 Backend bearbeitet werden 
  • Die Bilder sollten eine Sortierungsfunktion erhalten 
  • Zu den Bildern sollten optional Zusatzinformationen wie Titel, Tags und eine kurze Beschreibung ausgegeben werden (wenn optisch möglich) 
  • Die Bilder sollten optional numeriert werden (wenn optisch möglich) 
  • Es sollte eine Auswahl mehrerer unterschiedlicher Vorlagen für Bildergalerien im Backend geben 
  • Alle eingebundenen Dateien (CSS, JS) sollten von der Extension passend zur jeweils gewählten Vorlage ausgespielt werden 
  • Die Auswahl der gewünschten Vorlage sollte im Backend über ein Menu erfolgen

Auswahl der Vorlagen

Auf Basis der bestehenden Webseite und der aktuellen Entwicklungen im Webdesign sichtete die Agentur rund 100 verschiedene Bildergalerien auf der Basis von jQuery. Von diesen schaffen es 10 in die Auswahl und wurden lokal auf einem Testsystem einer Prüfung unterzogen. Schließlich schafften es vier Bildergalerien in die Auswahl.

Technische Umsetzung

Zur Erstellung der Extension für Slider wurden über den Extension Builder die Datenbanken zur Verwaltung der Bilder angelegt. 

Für das Frontend entstand eine Ansicht als Template, in die je nach gewählter Vorlage ein Partial eingebunden wird. Dieses Partial enthält den Quellcode, der zum Rendern der Vorlage nötig ist. 

Die Dateien für die Vorlagen sind in den Ressourcen der Extension hinterlegt. 

Die Auswahl des Sliders geschieht über ein Flexform. Je nach ausgelesenem Datensatz werden die entsprechendem Module ins Control eingelesen. Dort wird die Generierung des Quellcode für die HEADER-Daten gesteuert. 

Eine Pflege der Slider im Backend wird als nicht sinnvoll angesehen, da dafür nicht nur die Programmbibliotheken der jeweiligen Vorlage, sondern auch die Partials gesteuert werden. 

Alle Bibliotheken greifen auf eine jQuery-Installation und Standards im Style Sheet der Webseite zu. 

Frontend Anpassungen

Alle Vorlagen wurden in Farben, Design und teilweise auch in den Inhalten an das Designkonzept der Georgienseite angepasst. Neben der Anpassungen der Farben wurden Pfeile neu positioniert. In einem Fall wurde eine Numerierung der Bilder eingefügt. Das Design für Hintergründe, Rahmen, Schaltflächen, Schriften und Layer ist dem Designkonzept der Georgienseite angepasst. 

Zeitraum

Die Extension wurde innerhalb einer Arbeitswoche im Juli 2016 erstellt. Die Einbindung mehreren Bildergalerien auf der Georgien beanspruchte eine weitere Woche zur Bereitstellung aller Datenseite.

Download

Diese Referenzliste von Thomas Berscheid stellen wir Ihnen auch als PDF-Datei zum Herunterladen zur Verfügung:

Download dieser Referenz als PDF

Beispiel für eine Bildergalerie: Schatili

Referenz Thomas Berscheid - Bildergalerien als TYPO3 Extension - Extbase Fluid Flexforms Slider jQuery CSS TypoScript responsiv Lightbox - Internetagentur Irma Berscheid-Kimeridze

Zusätzlich zu den Bildern mit einem Roll-Effekt werden Pfeile zum Vor- und Zurückschalten der Bilder generiert. 

Beim Überfahren mit der Maus werden Zusatzinformationen mit einem halbtransparenten Layer angezeigt.

Bildergalerie Vorlage 1

Referenz Thomas Berscheid - Bildergalerien als TYPO3 Extension - Extbase Fluid Flexforms Slider jQuery CSS TypoScript responsiv Lightbox - Internetagentur Irma Berscheid-Kimeridze

Zusätzlich zu den Bildern mit einem Roll-Effekt werden Pfeile zum Vor- und Zurückschalten der Bilder generiert.  Beim Überfahren mit der Maus werden Zusatzinformationen mit einem halbtransparenten Layer angezeigt.

Bildergalerie Vorlage 2

Referenz Thomas Berscheid - Bildergalerien als TYPO3 Extension - Extbase Fluid Flexforms Slider jQuery CSS TypoScript responsiv Lightbox - Internetagentur Irma Berscheid-Kimeridze

Bei dieser Vorlage läuft ein Band von Bildern mit Titeln horizontal auf der Seite. Durch Klick auf ein Bild öffnet sich die große Ansicht der Seite in einem übergeordneten Layer. 

Die Großansicht hat Informationen zu Titel, Beschreibung und eine fortlaufende Numerierung der Bilder.

Bildergalerie Vorlage 3 Tags

Referenz Thomas Berscheid - Bildergalerien als TYPO3 Extension - Extbase Fluid Flexforms Slider jQuery CSS TypoScript responsiv Lightbox - Internetagentur Irma Berscheid-Kimeridze

Diese Vorlage stellt alle Bilder der Galerie in einer Sortierung auf einer Seite dar. Als Besonderheit bietet die se Vorlage eine Auswahl von Bildern nach Tags. Diese können mehrfach pro Bild vergeben werden. 

Hier sehen Sie die Ansicht des Sliders mit großem Bild.

Bildergalerie Vorlage 3 Layer

Referenz Thomas Berscheid - Bildergalerien als TYPO3 Extension - Extbase Fluid Flexforms Slider jQuery CSS TypoScript responsiv Lightbox - Internetagentur Irma Berscheid-Kimeridze

Diese Vorlage stellt alle Bilder der Galerie in einer Sortierung auf einer Seite dar. Die Tags oberhalb der Bilder sind klickbar, wodurch sich Bilder im Slider nach Stichworten auswählen lassen.

Beim Klick auf ein Bild öffnet sich die große Ansicht.

Bildergalerie Vorlage 4

Referenz Thomas Berscheid - Bildergalerien als TYPO3 Extension - Extbase Fluid Flexforms Slider jQuery CSS TypoScript responsiv Lightbox - Internetagentur Irma Berscheid-Kimeridze

Bildergalerie mit durchlaufender horizontaler Leiste.

Beim Klick auf das große Bild öffnet sich die große Ansicht, die auch eine horizontale Leiste bietet.

Backend Einbindung einer Galerie in eine Seite

Referenz Thomas Berscheid - Bildergalerien als TYPO3 Extension - Extbase Fluid Flexforms Slider jQuery CSS TypoScript responsiv Lightbox - Internetagentur Irma Berscheid-Kimeridze

Die Extension wird als Plugin in eine Seite eingebunden. Als Option ist die Ablage der Bilder einzugeben. Das gewünschte Theme kann über ein Drop Down Menu abgelegt werden. 

Die Auswahl der Slider wird über Flexforms in TYPO3 gesteuert. 

Backend Verwaltung der einzelnen Galerien

Referenz Thomas Berscheid - Bildergalerien als TYPO3 Extension - Extbase Fluid Flexforms Slider jQuery CSS TypoScript responsiv Lightbox - Internetagentur Irma Berscheid-Kimeridze

Die Liste der Bildergalerien ist an einem Ordner zum Speichern in TYPO3 angebunden. Dort findet sich die Liste mit den zur Verfügung stehenden Galerien.

Verwaltung Bilder

Referenz Thomas Berscheid - Bildergalerien als TYPO3 Extension - Extbase Fluid Flexforms Slider jQuery CSS TypoScript responsiv Lightbox - Internetagentur Irma Berscheid-Kimeridze

Die Bilder werden über das Backend von TYPO3 aus dem Fileadmin eingebunden. Die Extension stellt eine Maske zur Eingabe zusätzlicher Informationen und zur Anbindung der Tags bereit.

Verwaltung der Tags

Referenz Thomas Berscheid - Bildergalerien als TYPO3 Extension - Extbase Fluid Flexforms Slider jQuery CSS TypoScript responsiv Lightbox - Internetagentur Irma Berscheid-Kimeridze

Die zur Verfügung stehenden Tags werden ebenfalls in der Listenansicht aller Daten verwaltet. Hier können Tags bearbeitet, hinzugefügt oder gelöscht werden. 

Jedem Bild können dabei mehrere Tags zugewiesen werden.