TYPO3 - Content Element Layout: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 1: Zeile 1:
 
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)]]
 
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)]]
−
== Beispiel ==
+
== Einfaches Beispiel ==
 
Page TS
 
Page TS
 
<syntaxhighlight lang="typoscript">
 
<syntaxhighlight lang="typoscript">
Zeile 29: Zeile 29:
 
     }
 
     }
  
 +
</syntaxhighlight>
 +
 +
== Beispiel Manipulation des Bild Layouts ==
 +
Inspiration Quelle: http://www.fassing.eu/loesungen/typo3/ce-layout-switch/ (2016-07)
 +
 +
=== großes Margin für Bilder ===
 +
'''Page TS'''
 +
<syntaxhighlight lang="typoscript">
 +
TCEFORM.tt_content.layout.addItems.100 = margin-right40
 +
</syntaxhighlight>
 +
'''TypoScript'''
 +
<syntaxhighlight lang="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>
 +
}
 +
*/
 +
</syntaxhighlight>
 +
 +
 +
<syntaxhighlight lang="typoscript">
 +
</syntaxhighlight>
 +
 +
 +
<syntaxhighlight lang="typoscript">
 +
</syntaxhighlight>
 +
 +
 +
<syntaxhighlight lang="typoscript">
 +
</syntaxhighlight>
 +
 +
 +
<syntaxhighlight lang="typoscript">
 
</syntaxhighlight>
 
</syntaxhighlight>

Version vom 29. Juli 2016, 10:08 Uhr

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)

großes Margin für Bilder

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>
}
*/





Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=TYPO3_-_Content_Element_Layout&oldid=21664“