TYPO3 - Content Element Layout

Die klassischen Rahmen aus css_styled_content werden auf lange Sicht wohl nicht mehr genutzt. Aber es gibt das Layout Feld. Das Vorgehen ist ganz ähnlich wie bei Typo3 - Rahmen (Frames)

Einfaches Beispiel

Page TS

  TCEFORM.tt_content {
        layout{
            altLabels{
                0 = Normal
                1 = Boxed
                2 = Sonstnochwas
            }
            removeItems = 3,4,5,6,7,8,9,10
        }
    }

TypoScript

# Typo3 Layout Optionen Content-Elemente
    tt_content.stdWrap.innerWrap.cObject = CASE
    tt_content.stdWrap.innerWrap.cObject {
        key.field = layout
        1 = TEXT
        1.value = <div class="csc-default boxed">|</div>
 
        2 = TEXT
        2.value = <div class="csc-default nochneklasse">|</div>
#...
    }

Beispiel Manipulation des Bild Layouts

Inspiration Quelle: http://www.fassing.eu/loesungen/typo3/ce-layout-switch/ (2016-07)

Margin der Bilder beeinflussen

Page TS

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

TypoScript

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
  # 100 bezieht sich auf Item ID in TCEFORM, hier auf 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 = <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
 
# 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 = <div class="foobar">|</div>
}
*/

Variante für responsive Bilder

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 = <div class="csc-textpic-imagerow"> | </div>
        imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
        oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###"> | </dl>
      }
       
      ul {
        imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"><ul> | </ul></div>
        imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"><ul> | </ul></div>
        oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###"> | </li>
      }
       
      div {
        imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
        imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
        oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###"> | </div>
      }
      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 = <div id="headerSlider">|</div>
  100.value = |
}