TYPO3: Fotos von Flickr und Picasa oder interne Bildgalerien einbinden

Auch wenn TYPO3 sehr „mächtig“ ist und viele nützliche Funktionen biete – die Arbeit mit Fotos ist in diesem Content-Management-System keine reine Freude. Gerade Galerien lassen sich mit den Kernfunktionen von TYPO3 nur bedingt realisieren. Dank der Ausbaufähigkkeit von TYPO3 gibt es jedoch eine ganze Reihe einfacher und komfortabler Erweiterungen für ansprechende Bildgalerien. Sie können sowohl bestehende Fotostrecken von Flickr oder Picasa einbinden als auch eigene Fotos mittels Extension als Bildgalerie präsentieren.

Fotos von Flickr einbinden

Mit der Erweiterung „flickrset“ lassen sich einzelne Fotos und ganze Alben aus einem eigenen Flickr-Account auf einer TYPO3-Seite anzeigen. Voraussetzung ist ein API-Schlüssel von Flickr, mit dem man externen Zugriff zum eigenen Flickr-Account erhält. Es ist also nicht möglich, Fotos anderer Accounts anzeigen zu lassen.

Nach der Installation der Erweiterung muss der API-Schlüssel angegeben werden. Über den Konstanten-Editor (erreichbar über das Template-Modul) lässt sich der API-Schlüssel einstellen (Kategorie „FLICKRSET (1)“ wählen).

Konstanten-Editor
Der Konstanten-Editor

Außerdem muss das statische Template „flickrSet (flickrset)“ ins Template eingebunden werden (ebenfalls über das Template-Modul).

Alternativ lässt sich der Schlüssel auch über TypoScript einstellen. Alle weiteren Einstellungen lassen sich direkt über das Plug-In vornehmen, können aber ebenfalls über TypoScript geregelt werden:

plugin.tx_flickrset_pi1 {
  flickrapi = API-Schlüssel
}

Um Flickr-Fotos anzeigen zu lassen, wird das Flickrset-Plug-In auf einer beliebigen Seite als Datensatz zeingefügt. Über den Reiter „Plug-In“ lassen sich nun die nötigen Angaben und Einstellungen vornehmen.

Je nachdem, ob man ein Album oder ein einzelnes Fotos darstellen möchte, wird die ID des Albums („Photoset“) oder die ID des Fotos („Single photo id“) angegeben. Außerdem muss der Anzeigemodus („Select view mode“) gewählt werden („List“ oder „Single“).

flickrSet-Plug-In
Das flickrSet-Plug-In

Des Weiteren können die Anzahl der Fotos pro Seite sowie die Größe der Thumbnails (für die Listenansicht) und der Fotos (für die Einzelansicht) angegeben werden. Bei der Größe der Fotos kann man aus den von Flickr bereitgestellten Größen wählen.

Die Großansicht der Fotos erfolgt per JavaScript über „FancyZoom“, einer Alternative zur bekannten „Lightbox“. Auch hier wird das Foto per JavaScript über die aktuelle Seite gelegt und der Hintergrund abgedunkelt. „FancyZoom“ wird mit der Erweiterung installiert und steht also direkt zur Verfügung.

Über die Angabe einer Seiten-ID für die Einzelansicht („ID for single view“) kann zusätzlich zum „FancyZoom“ ein Link bereitgestellt werden, über den das Foto in der Einzelansicht auf einer separaten Seite dargestellt wird (funktioniert dann ohne JavaScript).

Voraussetzung ist, dass die Zielseite ebenfalls ein Flickrset-Plug-In enthält, das im Modus für die Einzelansicht eingestellt ist. Über die Angabe einer Seiten-ID („ID for list view“) für die Listenansicht wird dann ein Link von der Einzelansicht zurück zur Listenansicht bereitgestellt.

Auch die Einbindung eines eigenen Templates für die Darstellung der Fotos ist möglich. Eine HTML-Datei mit dem Standard-Template befindet sich im Ordner „/flickrset/static“ innerhalb des TYPO3-Extenions-Ordners.

Fazit: Mit der Erweiterung „flickrset“ lassen sich Fotos und Alben von Flickr bequem in die eigene Website integrieren. Das Template lässt sich ebenso anpassen wie die Fotogröße.

Fotos von Picasaweb einbinden

Mit „jb_picasaweb“ lassen sich Galerien von Picasaweb in die eigene Website einbinden. Nach der Installation muss „jb_picasaweb default css (jb_picasaweb)“ als statisches Template eingebunden werden.

Plug-In
Picasaweb: Plug-In

Anschließend wird das Picasaweb-Plug-In auf einer beliebigen Seite eingebunden. Weitere Einstellungsmöglichkeiten gibt es über das Plug-In nicht. Die Angabe der einzubindenden Galerie sowie weitere Einstellungen erfolgen über den Konstanten-Editor oder über TypoScript:

plugin.tx_jbpicasaweb_pi1 {
  pw_user = GalerieName
}

Über „pw_user“ wird der Name der Galerie, wie sie über Picasaweb („http://picasaweb.google.com/GalerieName“) erreichbar ist, angegeben. Die Größe der Fotos lässt sich über „pw_large“ (für die Einzelansicht) sowie „pw_thumb“ (für die Listenansicht) einstellen. Ein eigens Template und eine eigene Stylesheet-Datei lassen sich über „pw_template“ beziehungsweise „pw_cssfile“ angeben.

Das Standard-Template befindet sich im Ordner „/jb_picasaweb/static“ innerhalb des TYPO3-Extenions-Ordners und kann angepasst werden.

Die Einzeldarstellung der Fotos erfolgt per JavaScript mit „Fancybox“. Da „Fancybox“ nicht Bestandteil der Erweiterung ist, muss es manuell installiert werden. Dazu die Dateien in ein beliebiges Verzeichnis kopieren und folgende Dateien im HTML-Header der TYPO3-Seite einbinden:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/
  jquery.min.js" type="text/javascript"></script>
<script src="VerzeichnisZurFancyBox/jquery.fancybox-1.3.1/fancybox/
  jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>

Außerdem ist es erforderlich, dass Sie den folgenden JavaScript-Code in den Header einbinden:

<script type="text/javascript">

$(document).ready(function() {
  $("a#single_image").fancybox();
  $("a#inline").fancybox({
    'hideOnContentClick': true
  });
  $("a.group").fancybox({
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'speedIn': 600,
    'speedOut': 200,
    'overlayShow': false
  });
});

</script>

Fazit: Die Einbindung ist etwas komplexer als bei „flickrset“ und die Konfiguration umständlicher, da sie nicht direkt über den Plug-In-Datensatz erfolgen kann. Außerdem setzt die Erweiterung PHP 5 voraus, was die aktuelle TYPO3-Version allerdings auch tut.

Einfache Galerie mit Photo Book

Mit der Erweiterung „goof_fotoboek“ lässt sich spielend einfach eine interne Galerie in TYPO3 einrichten. Nach der Installation der Erweiterung wird das entsprechende Plug-In als Datensatz in eine Seite eingefügt. Anschließend wird ein Verzeichnis angegeben, in dem sich die Fotos befinden, die in einer Galerie angezeigt werden sollen.

Plug-In
Photobook: Plug-In

Alternativ lässt sich auch eine URL zu einer externen Quelle angeben. So kann auf Fotos zugegriffen werden, die auf einer externen Website liegen. Den Rest übernimmt die Erweiterung selbst. Über ein grafisches Menü lassen sich die einzelnen Fotos durchklicken. Über eine Thumbnailseite erhält man einen Überblick über alle Fotos der Galerie.

Über TypoScript lassen sich weitere Einstellungen vornehmen. So lässt sich eine kombinierte Ansicht von Einzelbild und Thumbnailübersicht darstellen:

plugin.tx_gooffotoboek_pi1 {
	CombinedView = 1
}

Über „templateFile“ lässt sich per TypoScript auch ein eigenes HTML-Template einbinden.

Auch Wasserzeichen lassen sich mit „goof_fotoboek“ automatisch auf jedes Foto anwenden. Per TypoScript lässt sich eine Bilddatei angeben, die als Wasserzeichen verwendet werden soll:

watermark = 1
watermark_mask = Datei, die das Foto maskiert
watermark_bottomimg = Datei mit dem Wasserzeichen
watermark_bottomimg_mask = Datei, die das Wasserzeichen maskiert

Bewertung: Die Erweiterung „goof_fotoboek“ ist schnell installiert und einsatzbereit. Zahlreiche Einstellungen lassen sich über TypoScript regeln.

Smooth Gallery

Mit der Erweiterung „rgsmoothgallery“ lassen sich ebenfalls TYPO3-interne Galerien realisieren. Nach der Installation und der Einbindung des statischen Templates „SmoothGallery (rgsmoothgallery)“ kann das Plug-In als Datensatz in einer Seite platziert werden.

Plug-In
SmoothGallery: Plug-In

Es gibt zwei Möglichkeiten, Bilder für die Galerie auszuwählen. Neben der Angabe eines Verzeichnisses, dessen Fotos als Galerie dargestellt werden sollen, lassen sich auch Datensätze für jedes darzustellende Foto erstellen und über das Plug-In auswählen.

Die Thumbnailansicht sowie die Navigation werden per JavaScript eingebunden, die Einzelansicht erfolgt über „Lightbox“, was mit installiert wird. Die Darstellung der Galerie lässt sich über das Plug-In einfach anpassen. Weitere Einstellungen sind über TypoScript und CSS machbar.

Smooth Gallery im Frontend
Smooth Gallery im Frontend

Auch die Einbindung eines Wasserzeichens ist möglich. Aussehen und Inhalt des Wasserzeichens werden über TypoScript definiert. Standardmäßig besteht das Wasserzeichen nur aus einem Text, der sich leicht anpassen lässt:

plugin.tx_rgsmoothgallery_pi1.big2.file.20.text.noTrimWrap =
  |(c) | by Dr. Web |

Der senkrechte Strich nach dem Copyright-Zeichen dient als Platzhalter für das aktuelle Jahr, das dem Wasserzeichen hinzugefügt wird.

Die SmoothGallery lässt sich auch auf Bilder anwenden, die über „tt_news“ eingebunden werden. Eine Zeile TypoScript macht es möglich:

plugin.tt_news.rgsmoothgallery < plugin.tx_rgsmoothgallery_pi1

Bewertung: SnotthGallery bietet eine optisch sehr ansprechende Galerie mit vielen Einstellungsmöglichkeiten. Nachteil ist, dass die Galerie JavaScript zwingend voraussetzt.

wt_gallery

Die Erweiterung „wt_gallery“ ist eine besonders einfach zu installierende und anwendbare Galerie. Sie funktioniert allerdings nur, wenn auch die Erweiterung „wt_doorman“ installiert ist. Dabei handelt es sich um eine Klasse, die vor SQL-Inkektionen schützt.

Nach der Installation kann das Galerie-Plug-In auf einer Seite eingefügt werden. Alle Ansichten können auf einer Seite dargestellt werden, sodass das Plug-In nur einmal eingefügt werden muss. Neben einer Listen- und Einzelansicht gibt es auch eine Kategorienansicht. Werden Bilder in verschiedenen Ordnern abgelegt, wird über die Kategorienansicht eine Übersicht über die einzelnen Bilderordner dargestellt.

Plug-In
wtgallery: Plug-In

Zusätzlich gibt es noch eine Ansicht für „Cooliris“, mit der die Bilder in einer Flash-Diashow gezeigt werden.

Bewertung: „wt_gallery“ ist einfach und schnell installiert. Galerien lassen sich ebenso schnell erstellen, ohne vorher große Einstellungen vornehmen zu müssen.

Fazit

Zwar hat TYPO3 selbst einige Defizite bei der Darstellung von Bildern. Mit den zahlreichen Galerie-Erweiterungen lassen sich jedoch schöne und einfache Galerien erstellen. Basierend auf bekannten Scripten wie „Lightbox“ oder „FancyZoom“, bieten diese Erweiterungen Möglichkeiten, Fotos effektvoll darzustellen. Dabei bieten die Extensions in der Regel viele Möglichkeiten, die Galerie optisch anzupassen, indem man eigene HTML-Templates erstellt.

(mm),

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
ThomK
Gast
ThomK
5 Jahre 8 Monate her

Danke für die geniale Auflistung und die nötigen Erläuterungen.
Besonders die rgsmoothgallery finde ich sehr gelungen.

Peter Koffer
Gast
Peter Koffer
4 Jahre 2 Monate her

Kann es sein, daß flickrset nicht mit Typo3 4.7 kompatibel ist? Ich habe mich meiner der Installation und Konfiguration an die Erläuterungen auf dieser Seite gehalten, aber im Frontend nur eine blanke Seite erhalten, deren gesamter Quelltext nur aus der Ziffer 1 bestand. MfG und hertlichen Dank.

Pean Diord
Gast
Pean Diord
1 Jahr 1 Monat her

goof_fotoboek is made only for typo3 4.5 to 6.1.
It does not work in actual versions of typo3.

Pean Diord
Gast
Pean Diord
1 Jahr 1 Monat her

rgsmoothgallery will not work in typo3 v6.2 (new installed, with IntroPack)
Afer enabling it in ExtManager you are not able to add ANY new elements to a page.
The right part of the screen remains empty.
With diabled rgsmoothgallery all will work well again.

Pean Diord
Gast
Pean Diord
1 Jahr 1 Monat her

With wt_gallery its all the same:
It will not work in typo3 v6.2 (new installed, with IntroPack)
When enabled in ExtManager you cannot add ANY new elements to a page.
The right part of the screen is empty then.
With diabled wt_gallery all will work well again.

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen