TYPO3: Gridelements mit Fluid-Templates und Flexforms

Mit Fluid-Templates machen die Gridelements erst richtig Spaß.
Dazu ist es auch noch kinderleicht – das kann wirklich jeder zu Hause nachmachen.

Was ist zu tun?

1. Ein Gridelement anlegen

backend_layout {
  colCount = 2
  rowCount = 1
  rows {
    1 {
      columns {
        1 {
          name = Links
          colPos = 21
        }
        2 {
          name = Rechts
          colPos = 22
        }
      }
    }
  }
}

2. Flexform erstellen

… und als Datei im Gridelement einbinden

<?xml version="1.0" encoding="UTF-8"?>
<T3DataStructure>
  <ROOT type="array">
    <type>array</type>
    <el type="array">
      <shadow>
        <TCEforms type="array">
          <label>Schatten anzeigen</label>
          <config>
            <type>check</type>
          </config>
        </TCEforms>
      </shadow>
      <bgcolor>
        <TCEforms>
          <label>Hintergrundfarbe</label>
          <config>
            <type>select</type>
            <items type="array">
              <numIndex index="0" type="array">
                <numIndex index="0">keins</numIndex>
                <numIndex index="1"></numIndex>
              </numIndex>
              <numIndex index="1" type="array">
                <numIndex index="0">gelb</numIndex>
                <numIndex index="1">yellow-bg</numIndex>
              </numIndex>
              <numIndex index="1" type="array">
                <numIndex index="0">grau</numIndex>
                <numIndex index="1">grey-bg</numIndex>
              </numIndex>
            </items>
            <maxitems>1</maxitems>
            <size>1</size>
          </config>
        </TCEforms>
      </bgcolor>
    </el>
  </ROOT>
</T3DataStructure>

3. Typoscript erstellen

# Überschrift des Inhaltselements ausgeben (optional)
tt_content.gridelements_pi1.10 =< lib.stdheader

# Fluid-Template zuweisen
tt_content.gridelements_pi1.20.10.setup {
  # GRID_ID ist die ID des entsprechenden Gridelements
  GRID_ID < lib.gridelements.defaultGridSetup
  GRID_ID {
    cObject = FLUIDTEMPLATE
    cObject {
      file = fileadmin/tmpl/gridelements/zweispaltig.html
    }
  }
}

4. Fluid-Template erstellen

<div class="<f:if condition="{data.flexform_shadow}==1">shadow</f:if><f:if condition="{data.flexform_bgcolor}!=''"> {data.flexform_bgcolor}</f:if>">
  <div class="row">
    <div class="col-md-6 col-xs-12">
      {data.tx_gridelements_view_column_21->f:format.raw()}
    </div>
    <div class="col-md-6 col-xs-12">
      {data.tx_gridelements_view_column_22->f:format.raw()}
    </div>
  </div>
</div>

Das wars schon. Viel Spaß damit.

12 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Highlighting von Codes ist mit den Tags  [ts], [php], [html], [javascript], [xml] oder [code] möglich.