Im Gegensatz zu TemplaVoilà, wo zwar die Datenstruktur in Dateien ausgelagert werden kann, aber in jedem Fall das Mapping in der Datenbank abgelegt wird, bieten die Gridelements eine Möglichkeit sämtliche Konfigurationen in Dateien auszulagern. Als Ersatz für die Nutzung von Datensätzen kann die Konfiguration der Inhaltselemente im Page-TsConfig abgelegt werden.
Anhand eines konfigurierbaren Zweispalters auf Basis des Twitter Bootstrap Grids liste ich im Folgenden die verschiedenen Bestandteile eines vollständig versionierbaren Gridelements auf (basierend auf Version 1.4.1 der Extension):
Page-TsConfig
tx_gridelements.setup {
# Kommentar 1
1 {
title = Two Columns
config {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Left
colPos = 11
}
2 {
name = Right
colPos = 12
}
}
}
}
}
icon = EXT:your_extension_key/Resources/Public/Icons/two-cols.png
# Kommentar 2
flexformDS (
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<columnType type="array">
<TCEforms type="array">
<label>Column Type</label>
<config type="array">
<type>select</type>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">1:1</numIndex>
<numIndex index="1">cols-1-1</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">1:2</numIndex>
<numIndex index="1">cols-1-2</numIndex>
</numIndex>
<numIndex index="2" type="array">
<numIndex index="0">2:1</numIndex>
<numIndex index="1">cols-2-1</numIndex>
</numIndex>
<numIndex index="3" type="array">
<numIndex index="0">1:3</numIndex>
<numIndex index="1">cols-1-3</numIndex>
</numIndex>
<numIndex index="4" type="array">
<numIndex index="0">3:1</numIndex>
<numIndex index="1">cols-3-1</numIndex>
</numIndex>
</items>
</config>
</TCEforms>
</columnType>
</el>
</ROOT>
</T3DataStructure>
)
}
}
TypoScript
# Grid element config
tt_content.gridelements_pi1.20.10.setup {
# Two Columns
1 < lib.gridelements.defaultGridSetup
1 {
columns {
11 < .default
11.preCObject = CASE
11.preCObject {
key.field = flexform_columnType
cols-1-2 = TEXT
cols-1-2 {
value = <div class="span4">
}
cols-2-1 = TEXT
cols-2-1 {
value = <div class="span8">
}
cols-1-3 = TEXT
cols-1-3 {
value = <div class="span3">
}
cols-3-1 = TEXT
cols-3-1 {
value = <div class="span9">
}
default = TEXT
default {
value = <div class="span6">
}
}
11.wrap = |</div>
12 < .default
12.preCObject = CASE
12.preCObject {
key.field = flexform_columnType
cols-1-2 = TEXT
cols-1-2 {
value = <div class="span8">
}
cols-2-1 = TEXT
cols-2-1 {
value = <div class="span4">
}
cols-1-3 = TEXT
cols-1-3 {
value = <div class="span9">
}
cols-3-1 = TEXT
cols-3-1 {
value = <div class="span3">
}
default = TEXT
default {
value = <div class="span6">
}
}
12.wrap = |</div>
}
wrap = <div class="row">|</div>
}
}
Neben TypoScript und TsConfig müssen natürlich noch die Extension-Templates der Gridelements sowie CSS hinzugefügt werden.
Update #1
Im TypoScript bezeichnet die Eigenschaft „1“ die UID 1 des ansonsten genutzten Datensatzes. Die Zahlen können also für weitere Gridelements einfach aufsteigend definiert werden.
Update #2
Über Flexform Definitionen können beliebige weitere Felder hinzugefügt werden, wie zum Beispiel Eingabefelder oder Checkboxen. In unserem Beispiel nutzen wir eine Auswahlliste, um dem Redakteur die Option zu geben die Spaltenaufteilung selber zu bestimmen.
Die Zeile <langDisable>1</langDisable> wird im Falle von mehrsprachigen Webseiten benötigt, denn ohne diese Einstellung würden die Flexforms innerhalb des Inhaltselements die Übersetzungsoptionen der einzelnen Flexform-Felder anbieten, was bei Nutzung der TYPO3-typischen Language Overlays zu Fehlern führen kann.