Gridelements auf www.enkey.de

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.