Typo3 Inhalte (tt_content) mit ViewHelper in Extension "DCE" rendern *UPDATED*

Posted on by Julian Stock.

Vor kurzem bin ich auf das Problem gestoßen, dass ich um eine auf einer Web-Site eingebundenen Extension einen Container wrappen wollte, damit ich für CSS/jQuery einen zusätzlichen Selektor zur Verfügung habe. In meinem Beispiel wollte ich die Listenansicht der Extension tx_news auf der Startseite anders darstellen (mit einem Slider), als auf einer anderen Seite. Da ich seit einiger Zeit kein TemplaVoila mehr verwende und somit ohne FCEs (flexible Content Elemente) auskommen muss, habe ich mir eine praktikable Lösung überlegt.

Konfiguration DCE im Reiter Allgemein Konfiguration DCE im Reiter Template Konfiguration Content-Element mit Extension (Auswahl des Datensatzes über Ordner-Symbol)

Obwohl ich kein TemplaVoila mehr verwende, möchte ich die Funktion der FCEs dennoch nicht missen und verwende aus diesem Grund für aktuelle und zukünftige Projekte die Extension DCE (Dynamic Content Elements).

Sie setzt für die Darstellung der Inhalte auf die Typo3 eigene Template-Engine "Fluid" und lässt sich daher nahtlos integrieren. Allerdings ist es (soweit ich weiß) mit der aktuellen Version nicht möglich, eigene (oder fremde) Extensions oder gar andere tt_content Elemente, wie z. B. "Text und Bild" oder eine "Tabelle", einzubinden. Dafür habe ich mir einen ViewHelper aus den Typo3 Docs besorgt und in eine minimale ViewHelper-Extension gepackt.

Die Installation ist denkbar einfach. Ladet euch das Archiv hier herunter, entpackt es und ladet den Inhalt anschließend in euren typo3conf/ext/ Ordner. Nun könnt ihr mit DCE einen neuen Container anlegen und dort unter dem Reiter "Template" um die Ausgabe einen einfachen div-Container mit Klasse/ID legen.

Anbei noch ein paar Screenshots, die den genauen Vorgang bebildern und natürlich die Codeschnipsel, damit ihr nichts abtippen braucht.

Listing 1: Konfiguration DCE im Reiter "Allgemein"

<config>
 <type>group</type>
 <internal_type>db</internal_type>
 <allowed>tt_content</allowed>
 <size>1</size>
 <maxitems>1</maxitems>
 <minitems>1</minitems>
 <show_thumbs>0</show_thumbs>
</config>

Listing 2: Konfigration DCE im Reiter "Template"

{namespace dce=Tx_Dce_ViewHelpers}
{namespace m=Tx_PmRendercontent_ViewHelpers}

<f:layout name="Default" />

<f:section name="main">
 <div class="rendercontent">
 <m:Content uid="{field.extensioncontent}" />
 </div>
</f:section>

Wenn euch das Ganze geholfen hat, würde ich mich sehr über einen kleinen Kommentar freuen :)

Update, 01.09.2014:

Ich habe das Archiv noch einmal für Typo3 6.2 geupdated, die Extension ist jetzt für Typo3 4.5 bis 6.2 vorbereitet und kann über den Extensionmanager installiert/aktiviert werden. Vielen Dank an Ede Kowalski für den Hinweis!

Update, 25.05.2015:

Die Extension kann jetzt auch alle Inhalte einer Seite parsen, man muss also nicht mehr jedes Element auf der Seite auswählen. Das DCE-Template müsst ihr folgendermaßen anpassen: <m:Content uid="{field.extensioncontent}" /> wird zu <m:PageContent pid="{field.pid}" /> Und den allowed-Typen müsst ihr anschließend noch auf "pages" umstellen (ohne Anführungsstriche).


Julian Stock
Webentwickler aus Lübeck · 30 Jahre

Kommentare