Damit das Tool auch korrekt laufen kann muss man ein paar kleine Änderungen am TYPO3 vornehmen. Zunächst einmal braucht man aber das Plugin. Dieses findet man unter: http://zurb.com/playground/twentytwenty
Im TS-Config Bereich der Seite habe ich mir erstmal ein neues Layout definiert:
TCEFORM.tt_content.layout.addItems {
100 = TwentyTwenty
}
Anschließend habe ich mir dann noch ein TypoScript-Template angelegt was ich dann im Root einbinden kann. Dabei habe ich das komplette Rendering für das Image rausgenommen. Über das Layout Element wird dann noch die korrekte Klasse hinzugefügt damit der JavaScript Code auch alles korrekt aufrufen kann. Den Layout-Switch findet man übrigens hier: http://www.fassing.eu/loesungen/typo3/ce-layout-switch/
temp.image < tt_content.image.20 # Neue Definition von # tt_content.image.20 tt_content.image.20 = CASE tt_content.image.20 { key.field = layout # Original wieder setzen. default < temp.image 1 < temp.image # Die Position 100 bezieht sich auf den TCEFORM Wert, z.B. TCEFORM.tt_content.layout.addItems.100 = margin-right40. # Wird das Label margin-right40 als Layout im Content Element Bild gewählt, wird die nachfolgende Konfiguration verwendet. 100 < temp.image 100 { rendering > layout.default.value = <div class="csc-textpic csc-textpic-center csc-textpic-above twentytwenty-container###CLASSES###">###IMAGES######TEXT###</div> #value = <div class="csc-textpic csc-textpic-center csc-textpic-above twentytwenty-container###CLASSES###">###IMAGES######TEXT###</div> #rendering.globalCaption.columnStdWrap.wrap = <div style="margin-right: 40px;" class="csc-textpic-imagecolumn###CLASSES###"> | </div> #rendering.splitCaption.columnStdWrap.wrap = <div style="margin-right: 40px;" class="csc-textpic-imagecolumn###CLASSES###"> | </div> #rendering.noCaption.columnStdWrap.wrap = <div style="margin-right: 40px;" class="csc-textpic-imagecolumn###CLASSES###"> | </div> } } # Da die Content Elemente "Text" und "Text & Bild" zusammenhängen, muss für die Verwendung "Text & Bild" das Original tt_content.image.20 referenziert werden, # da durch die Manipulation der Text nicht mehr gerendert wird. tt_content.textpic.20 = < tt_content.image.20.default page { headerData.7 = TEXT headerData.7.value ( <link href="fileadmin/templates/brockartsV2/css/twentytwenty.css" rel="stylesheet" type="text/css"> ) footerData.6 = TEXT footerData.6.value ( <script> $(window).load(function() { $(".twentytwenty-container").twentytwenty(); }); </script> ) }