24. Juli 2013

Gridelements professionell nutzen

Gridelements auf www.enkey.de

Individuelle Inhaltselemente in TYPO3 sind ein wichtiges Feature zur vereinfachten Pflege und eine einheitliche Eingabe von projektspezifischen Inhalten (z.B. Teaser-Boxen, mehrspaltige Elemente oder Slider) im CMS.

Neben TemplaVoilà bietet auch die Extension Gridelements die Möglichkeit zur Implementierung individueller Inhaltselemente mit Verschachtelung. Die Konfiguration der verfügbaren Elemente mit Angaben zur Aufteilung wird dabei meistens in der Datenbank vorgenommen. Häufig gibt es allerdings die Anforderung, dass jegliche Konfigurations- und Template-Informationen versionierbar abgelegt werden sollen. Dies hat den Vorteil, dass Änderungen an der Konfiguration kontrolliert werden können und eine Übernahme in verschiedene Installationen reibungslos vorgenommen werden können.

Neben dem Datensatz zur Konfiguration eines Gridelements kommt die passende TypoScript-Konfiguration hinzu, welche aber direkt in versionierbare Dateien ausgelagert werden kann (statische TypoScript-Einbindung). Über diesen Weg arbeitet man allerdings immer noch mit Datensätzen, die in der Datenbank abgelegt werden. Dies bedeutet insbesondere bei komplexeren Deployment-Strukturen zeitaufwändige Anpassungen, die bei jeder Installation (z.B. Testing, Staging, Production und bei allen Entwicklungssystemen) durchgeführt werden müssen. Außerdem sind die Datensätze nicht versionierbar und unbeabsichtigte Änderungen können nur schwer nachvollzogen werden.

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.

24. Juli 2013
Berit Hlubek

Berit Hlubek