Ich arbeite zum ersten Mal mit der 7er Version von Typo3 und musste heute für bestimmte Spezialseiten die Ausgabe von tt_content etwas ändern. Und zwar sollte textmedia aka „Text & Medien“ (früher textpic aka „Text & Bild“, wenn ich das recht verstanden habe) ein neues Layout bekommen und dieses sollte auch etwas anders aussehen als die normale Darstellung, das Medienelement muss nach links und braucht auch diverse Bootstrap Klassen um richtig auszuschauen.
Erstaunlicherweise war das mit Typo3 gar nicht so schwer umzusetzen. Zunächst mal habe ich im setup folgendes TypoScript hinzugefügt, um das Layout Dropdown um einen Eintrag zu erweitern:
TCEFORM.tt_content.layout.addItems.10 = Layout Spezialseite
Das klappt wunderbar und ich kann bei meinem tt_content Element nun diese Option auswählen. Um nun die Darstellung zu ändern, gehe ich zunächst in meine Typo3 source und hole mir die Dateien sysext/fluid_styled_content/Resources/Private/Templates/Textmedia.html und sysext/fluid_styled_content/Resources/Private/Partials/MediaGallery.html. Diese kopiere ich in meine extbase Extension in extensionname/Resources/Private/Templates/Content/Textmedia.html bzw. extensionname/Resources/Private/Templates/Content/Partials/Textmedia.html
Der Pfad ist dabei nicht so wichtig, denn der muss ohnehin selbst im setup definiert werden:
lib.fluidContent {
templateRootPaths.10 = EXT:extensionname/Resources/Private/Templates/Content/
partialRootPaths.10 = EXT:extensionname/Resources/Private/Templates/Content/Partials/
}
Und, man höre und staune, nach einem gründlichen löschen aller Caches nimmt typo3 nun tatsächlich meine Textmedia.html her. In dieser habe ich Zugriff auf die Variable {data.layout} und kann so mein Layout mit der Nummer 10 abfragen. Meine Textmedia.html sieht nun in etwa so aus:
<div class="layout-{data.layout}" id="c{data.uid}">
<f:if condition="{data.layout} == 10">
<f:then>
<div class="row">
<div class="col-xs-12 col-sm-6"><f:render arguments="{_all}" partial="MediaGallery"></f:render></div>
<div class="col-xs-12 col-sm-6"><f:format.html>{data.bodytext}</f:format.html></div>
</div>
</f:then>
<f:else> .... </f:else>
</f:if>
</div>
In f:else habe ich einfach das reinkopiert, was vorher schon da war und im f:then mache ich einfach was ich beim Layout10 haben will. In der MediaGallery.html habe ich auch Zugriff auf diese Variable und kann das dementsprechend auch so anpassen wie ich das brauche.