#BROCK.arts

Vorher/Nachher Funktion

Noch ein kleines Feature was man in Zukunft sicher mal gebrauchen kann ist eine Vorher/Nachher Ansicht von Bildern. Daher hier mal ein kleines Beispiel und ein kleiner Exkurs in die TYPO3 Welt

Vorher/Nachher

Anpassung an TYPO3

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>
  )
}