Oftmals ist von Kunden, die mit TYPO3 als CMS arbeiten, der Wunsch an uns herangetragen worden, lange Texte im Frontend übersichtlich zu strukturieren. Eine Idee hat sich dabei herauskristallisiert: Ein Teil des Contents soll versteckt werden und mit Javascript auf Klick "ins Blickfeld sliden". Der erste Teil des Textes ist für den Benutzer in der Ausgangsansicht erkenntlich und teasert das Inhaltselement an.

Wir haben die Idee aufgegriffen und zur Verwendung unter TYPO3 ein wenig weiterentwickelt. Wir wollten Slide Content für TYPO3-Inhaltselemente ermöglichen und dabei automatisch den ersten Absatz als Teaser benutzen. Die Lösung: Die Entwicklung einer kleinen, aber feinen TYPO3-Extension und DOM-Manipulation mit Hilfe von jQuery.

Hier finden Sie ein Beispiel für die Anwendung:

blog.tudock.de/index.php

So funktioniert die von uns entwickelte TYPO3 Content-Slider-Extension:

Die Extension erweitert jedes Content Element um die Eigenschaft "Slider". Über TypoScript wird der Content dadurch anders gerendert. Das eingebende Javascript kann dann auf diese HTML-Elemente zugreifen und über DOM-Manipulation alle Elemente nach dem ersten Absatz "verstecken". Über die Überschrift und/oder einen "mehr"-Link lässt sich der restliche Content nach dem ersten Absatz (p-Tag) ausklappen. Alle Elemente bis zum ersten Absatz (also beispielsweise auch Überschriften) werden zum Anteasern des Inhalts verwendet.

Und so konfigurieren Sie die Extension:

Als erstes muss für den "Sliding Content" die richtige HTML-Struktur erzeugt werden. Jeder Sliding Content muss entsprechend gewrappt werden:

<div class="sliding-nest">|</div>

Wir erledigen das mit Hilfe von TypoScript und der tt_content-Bibliothek:

tt_content.stdWrap.innerWrap.cObject.default.30 {

value = |

stdWrap.wrap = <div class="slider-nest">|</div>

stdWrap.fieldRequired = tx_tdcontentslider_slider

outerWrap = >|</div>

}

Diese wird automatisch eingebunden, wenn Sie das statische Template "Content Slider" im root-Template-Datensatz hinzufügen.

Zudem müssen wir die notwendigen Javascript- und CSS-Dateien einbinden (diese sind ebenfalls im statischen Template enthalten):

Für die DOM-Manipulation benötigen Sie jQuery. Wir empfehlen Ihnen, die Extension t3jquery zu verwenden und nach Anweisung einzubinden.

Unsere TYPO3 Content-Slider-Extension bekommen Sie hier:

Downloadlink für td_contentslider.t3x von TUDOCK

Viel Spaß damit!