TYPO3@lisardo

In den neueren Versionen von TYPO3 kann man recht einfach beliebige Lightboxen einbauen, ohne dafür spezielle Extensions zu benötigen. Ich möchte möglichst wenig Extensions verwenden, um Inkompatabilitäten zu verringern, Updates zu erleichtern und vor allem um das Risiko von Sicherheitslücken zu vermindern. Wie man dazu prinzipiell vorgeht, möchte ich kurz am Beispiel der Slimbox zeigen. 

(Kleiner Tipp: wie es TYPO3 4.x geht, steht in diesem älteren Artikel.)

Slimbox ist ein ganz nette Lightbox, die den großen Vorteil hat, sehr klein zu sein. Sie hat zwar wenig Features und ist nicht responsiv, aber zumindest das letztere ist nicht unbedingt ein Nachteil, weil auf einem Smartphone keine Lightbox gut funktioniert, auch keine responsive. Am Smartphone ist keine Lightbox immer noch die beste Lightbox. 

Nun, hier gehts auch nur ums Prinzip, man kann das mit beliebigen anderen Lightboxen auch umsetzen. 

Schritt 1: Lightbox korrekt einbinden

Praktisch alle Lightbox-Scripts sind so aufgebaut, dass man im Head zuerst jQuery laden muss, danach das Lightbox-Script sowie ein kleines JavaScript-Snippet als Autoloader oder Trigger. Ausserdem muss man natürlich das CSS einbinden. Also im Typoscript-Setup der Installation etwa so: 

Dabei natürlich die Pfade angeben, in denen die Dateien auch liegen. Und das CSS: 

Jetzt fehlt noch der Trigger bzw. Autoloader. Für die Slimbox kann der zum Beispiel so aussehen: 

Das "counterText" ist nicht unbedingt nötig, aber man kann damit den Text übersetzen. Im Original ist der Hinweistext sonst englisch.

Tipp: Dieser Artikel ist ein Update eines älteren Artikels zum gleichen Thema: Links im RTE auf Datensätze (News, t3blog) mit der Extension linkhandler. In den neuen Versionen von TYPO3 hat es einige Änderungen gegeben, so dass dieser Artikel nicht mehr genau stimmt. 

Zuerst haben wir das Problem, dass die Extension linkhandler unter TYPO3 6.x nicht mehr funktioniert und sogar das Backend unzugänglich macht, wenn sie über den Extensions-Manager installiert wird. Also mein Tipp: auf keinen Fall über den Extensionsmanager installieren, sondern diesen Fork von Github verwenden. Einfach herunterladen, das zip-Archiv auspacken und den entstehenden Ordner umbenennen in »linkhandler«. 

Danach gehts genau so weiter, wie in meinem Artikel beschrieben: es braucht zuerst eine Konfiguration des Linkbrowsers im TSconfig der Root-Seite. Diese kann für die neue News-Extension zum Beispiel so aussehen: 

Bei onlyPids müsst ihr natürlich die UID der Seite eintragen, auf der sich eure News-Datensätze befinden. Oder die Zeile auskommentieren, allerdings muss dann der ganze Baum nach News durchsucht werden, wenn man einen Link erstellen will. So ist es für den Redakteur bequemer.

Analog kann man den Linkhandler auch noch für die sonstigen Inhaltselement konfigurieren: 

Danach muss im Typoscript-Setup der Link konfiguriert werden: 

Bei parameter muss die UID der Seite eingefügt werden, welche die Single-Darstellung der News enthält. Bei additionalParams müssen alle zusätzlichen Parameter rein, die für den Aufruf des richtigen Datensatzes nötig sind – hier dargestellt für die neue News-Extension. 

Die Unterschiede zur früheren Fassung sind also nicht gravierend, so dass ich für weitere Varianten einfach nochmals auf den alten Artikel verweisen möchte. Dort ist zum Beispiel noch beschrieben, wie man mit mehreren verschiedenen Ausgabeseiten arbeiten kann.  

Man kann Youtube-Videos in TYPO3 sehr bequem über das Inhaltselement »Medien« einbetten. Leider bettet das die Videos ausschließlich als Flash-Videos ein, was dazu führt, dass auf iPad oder iPhone nur der alternative Text zu sehen ist. Youtube bietet allerdings eine neue Möglichkeit, ein Video über ein iFrame einzubetten, die automatisch zwischen Flash-Video und HTML5-Video unterscheiden kann, je nachdem, was Browser und Plattform eben können. Das funktioniert z. B. so: 

Man muss allerdings den Code selbst zusammenstellen, noch kann man ihn offensichtlich nicht automatisch von Youtube holen. Die URL beginnt mit 

und Breite und Höhe müssen angepasst werden. Das sollte allerdings nicht allzu schwierig sein. Danach einfach den Code in ein HTML-Inhaltselement in TYPO3 einbauen. 

Genauere Erläuterungen sind hier zu finden. Zum Ausprobieren zum Beispiel eine  kleine Landingpage, die ich für das BRK gemacht habe: Hausnotruf in Schwaben. Funktioniert auch auf dem iPhone wunderbar. 

In letzter Zeit stoße ich in verschiedenen Foren immer wieder auf missglückte Versuche, TYPO3 auf einem Server zu installieren. Da werden die seltsamsten Fehler gemacht. Eigentlich ist der grundlegende Ablauf relativ einfach, und wurde in der neuen Version 4.4 und dem Introduction-Package noch einmal vereinfacht. 

Allerdings gilt das nur, wenn der Server auch korrekt für den Einsatz von TYPO3 konfiguriert ist, was bei billigen Provodern oft nicht der Falls ist. Aber das lasse ich jetzt erst mal aussen vor, bzw. verweise ich einfach auf die entsprechende Seite bei typo.org. Jetzt die prinzipielle Anleitung: