TYPO3 Content Element Layout Switch

Die Layout Schalter der Content Elemente sind hilfreiche Optionen in der täglichen Arbeit mit TYPO3. Nachfolgend ein kleines Beispiel für den Einsatz im Content Element Bild.

Dark Grey Container

Im nachfolgenden Beispiel sollen Bilder mit einem definierten margin Wert verarbeitet werden.
Zunächst wird der Layout Switch um einen neuen Eintrag erweitert (Seiten-TSconfig).

Der nächste Schritt ist der Eingriff in den css_styled_content render Prozess 
(TypoScript Setup). 

  
TCEFORM.tt_content.layout.addItems.100 = margin-right40

  
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.globalCaption.columnStdWrap.wrap = 
|
rendering.splitCaption.columnStdWrap.wrap =
|
rendering.noCaption.columnStdWrap.wrap =
|
} } # 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 # Nur für eigenen Wrap des Content Elements, z.B. bei Einsatz eines Sliders in einem responsive Umfeld /* tt_content.stdWrap.innerWrap.cObject{ key.field = layout 100 = TEXT 100.value =
|
} */

Wie in den Kommentaren schon erwähnt, besteht bei den Content Elementen "Bild" und "Bild & Text" eine Verbindung. Durch die Manipulation würden die Text Bereiche von "Text & Bild" nicht mehr angezeigt. Um dies zu beheben ist noch der zusätzliche Eintrag nötig.

  
tt_content.textpic.20 = < tt_content.image.20.default

Danach kann am Content Element Bild im Bereich Erscheinungsbild > Layout der definierte Eintrag margin-right40 ausgewählt werden.

Dies bewirkt im vorliegendem Beispiel ein margin-right von 40px bei den Bildern, statt der Standardeinstellung von 10px was bei der Verwendung von einem Rahmen und Schatten nicht mehr ausreichend ist.

Es sind aber auch andere Einsatzzwecke möglich, z.B. wenn ein Headerslider zum Einsatz kommen soll und die Bilder ein responsive Verhalten aufweisen müssen.
Dies gestaltet sich einfacher wenn der DIV Container Overhead von TYPO3 verworfen wird, aber eben nur für die Bilder des Sliders. Nachfolgend das entsprechende TypoScript.
Die renderMethod wurde auf simple gesetzt, relevant ist somit die Definition von rendering.simple.

  
temp.image < tt_content.image.20

tt_content.image.20 = CASE
tt_content.image.20 {
  key.field = layout
  default < temp.image
  1 < temp.image
  100 < temp.image
  100 {
    imageStdWrap.dataWrap = |
    imageStdWrapNoWidth.wrap = |
    renderMethod = simple
    rendering {
      dl {
        imageRowStdWrap.dataWrap = 
|
imageLastRowStdWrap.dataWrap =
|
oneImageStdWrap.dataWrap =
|
} ul { imageRowStdWrap.dataWrap =
    |
imageLastRowStdWrap.dataWrap =
    |
oneImageStdWrap.dataWrap =
  • |
  • } div { imageRowStdWrap.dataWrap =
    |
    imageLastRowStdWrap.dataWrap =
    |
    oneImageStdWrap.dataWrap =
    |
    } simple { caption.wrap = | imageStdWrap.dataWrap = | imageStdWrapNoWidth.wrap = | } } layout.default.value = ###IMAGES### } } tt_content.textpic.20 = < tt_content.image.20.default tt_content.stdWrap.innerWrap.cObject{ key.field = layout 100 = TEXT #100.value =
    |
    100.value = | }

    Das Verfahren ist immer ähnlich. So können mehrere Einträge für die Verwendung als Layout definiert werden, welche nur auf die Elemente wirken bei denen sie eingesetzt werden und nicht global. Es Bedarf u.U. einiger Tests um eine individuelle Manipulation möglich zu machen. Hier hilft es definitiv sich das TypoScript der css_styled_content genauer anzusehen.
    Die Datei der aktuellen Version befindet sich im Pfad
    typo3/sysext/css_styled_content/static/setup.txt