#Stand: 11.01.2022
tt_content.gridelements_pi1{
templateRootPaths.20 = fileadmin/templates/grids/
}
# Hiermit stellt Ihr Regeln für GridElements selbst ein
# Infos dazu unter: https://docs.typo3.org/typo3cms/extensions/gridelements/stable/Chapters/DataProcessing/Index.html
tt_content.gridelements_pi1 {
variables {
classesSection = COA
classesSection {
10 = LOAD_REGISTER
10 = TEXT
10.data = field:flexform_classesSection
20 = TEXT
20.stdWrap.dataWrap = class-{register:classesSection}
30 = RESTORE_REGISTER
}
}
dataProcessing {
10 {
default {
options {
resolveFlexFormData = 1
resolveChildFlexFormData = 0
}
}
}
}
}tx_gridelements.setup {
############### section configuration:
section {
title = Section
# icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalte Section
colPos = 0
}
}
}
}
}
flexformDS (
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<classesSection type="array">
<TCEforms type="array">
<label>Class(es) for the section:</label>
<config type="array">
<type>input</type>
<default></default>
</config>
</TCEforms>
</classesSection>
</el>
</ROOT>
</T3DataStructure>
)
}
############### 1 col configuration:
1col {
title = 1 Spalte
# icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalte Spalte 1
colPos = 0
}
}
}
}
}
flexformDS (
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<classes_container type="array">
<TCEforms type="array">
<label>Class(es) for container:</label>
<config type="array">
<type>input</type>
<default>container</default>
</config>
</TCEforms>
</classes_container>
<classes_col_1 type="array">
<TCEforms type="array">
<label>Class(es) for col 1:</label>
<config type="array">
<type>input</type>
<default>col-12</default>
</config>
</TCEforms>
</classes_col_1>
</el>
</ROOT>
</T3DataStructure>
)
}
############### 2 cols configuration:
2cols {
title = 2 Spalten
# icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif
config {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalte Spalte 1
colPos = 0
}
2 {
name = Inhalte Spalte 2
colPos = 1
}
}
}
}
}
flexformDS (
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<classes_container type="array">
<TCEforms type="array">
<label>Class(es) for container:</label>
<config type="array">
<type>input</type>
<default>container</default>
</config>
</TCEforms>
</classes_container>
<classes_col_1 type="array">
<TCEforms type="array">
<label>Class(es) for col 1:</label>
<config type="array">
<type>input</type>
<default>col-6</default>
</config>
</TCEforms>
</classes_col_1>
<classes_col_2 type="array">
<TCEforms type="array">
<label>Class(es) for col 2:</label>
<config type="array">
<type>input</type>
<default>col-6</default>
</config>
</TCEforms>
</classes_col_2>
</el>
</ROOT>
</T3DataStructure>
)
}
############### 3 cols configuration:
3cols {
title = 3 Spalten
# icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif
config {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalte Spalte 1
colPos = 0
}
2 {
name = Inhalte Spalte 2
colPos = 1
}
3 {
name = Inhalte Spalte 3
colPos = 2
}
}
}
}
}
flexformDS (
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<classes_container type="array">
<TCEforms type="array">
<label>Class(es) for container:</label>
<config type="array">
<type>input</type>
<default>container</default>
</config>
</TCEforms>
</classes_container>
<classes_col_1 type="array">
<TCEforms type="array">
<label>Class(es) for col 1:</label>
<config type="array">
<type>input</type>
<default>col-4</default>
</config>
</TCEforms>
</classes_col_1>
<classes_col_2 type="array">
<TCEforms type="array">
<label>Class(es) for col 2:</label>
<config type="array">
<type>input</type>
<default>col-4</default>
</config>
</TCEforms>
</classes_col_2>
<classes_col_3 type="array">
<TCEforms type="array">
<label>Class(es) for col 3:</label>
<config type="array">
<type>input</type>
<default>col-4</default>
</config>
</TCEforms>
</classes_col_3>
</el>
</ROOT>
</T3DataStructure>
)
}
############### 4 cols configuration:
4cols {
title = 4 Spalten
# icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif
config {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalte Spalte 1
colPos = 0
}
2 {
name = Inhalte Spalte 2
colPos = 1
}
3 {
name = Inhalte Spalte 3
colPos = 2
}
4 {
name = Inhalte Spalte 4
colPos = 3
}
}
}
}
}
flexformDS (
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<classes_container type="array">
<TCEforms type="array">
<label>Class(es) for container:</label>
<config type="array">
<type>input</type>
<default>container</default>
</config>
</TCEforms>
</classes_container>
<classes_col_1 type="array">
<TCEforms type="array">
<label>Class(es) for col 1:</label>
<config type="array">
<type>input</type>
<default>col-3</default>
</config>
</TCEforms>
</classes_col_1>
<classes_col_2 type="array">
<TCEforms type="array">
<label>Class(es) for col 2:</label>
<config type="array">
<type>input</type>
<default>col-3</default>
</config>
</TCEforms>
</classes_col_2>
<classes_col_3 type="array">
<TCEforms type="array">
<label>Class(es) for col 3:</label>
<config type="array">
<type>input</type>
<default>col-3</default>
</config>
</TCEforms>
</classes_col_3>
<classes_col_4 type="array">
<TCEforms type="array">
<label>Class(es) for col 4:</label>
<config type="array">
<type>input</type>
<default>col-3</default>
</config>
</TCEforms>
</classes_col_4>
</el>
</ROOT>
</T3DataStructure>
)
}
}Die Namen der .html-Dateien ergeben sich aus der gridelements_dataprocessing.PAGE.typoscript. Der Dateiname muss mit einem Großbuchstaben beginnen:
<div id="container-{data.uid}" class="{f:if(condition: '{data.flexform_classes_container}', then: '{data.flexform_classes_container}')}">
<div class="row
{f:if(condition: '{data.frame_class}', then: 'frame-{data.frame_class}')}
{f:if(condition: '{data.space_before_class}', then: 'space-before-{data.space_before_class}')}
{f:if(condition: '{data.space_after_class}', then: 'space-after-{data.space_after_class}')}"
id="c{data.uid}">
<div class="{f:if(condition: '{data.flexform_classes_col_1}', then: '{data.flexform_classes_col_1}')}">
<f:for each="{children.1.0}" as="child">
<f:cObject typoscriptObjectPath="tt_content.{child.data.CType}" data="{child.data}" table="tt_content" />
</f:for>
</div>
</div>
</div><div id="container-{data.uid}" class="{f:if(condition: '{data.flexform_classes_container}', then: '{data.flexform_classes_container}')}">
<div class="row
{f:if(condition: '{data.frame_class}', then: 'frame-{data.frame_class}')}
{f:if(condition: '{data.space_before_class}', then: 'space-before-{data.space_before_class}')}
{f:if(condition: '{data.space_after_class}', then: 'space-after-{data.space_after_class}')}"
id="c{data.uid}">
<div class="{f:if(condition: '{data.flexform_classes_col_1}', then: '{data.flexform_classes_col_1}')}">
<f:for each="{children.1.0}" as="child">
<f:cObject typoscriptObjectPath="tt_content.{child.data.CType}" data="{child.data}" table="tt_content" />
</f:for>
</div>
<div class="{f:if(condition: '{data.flexform_classes_col_2}', then: '{data.flexform_classes_col_2}')}">
<f:for each="{children.1.1}" as="child">
<f:cObject typoscriptObjectPath="tt_content.{child.data.CType}" data="{child.data}" table="tt_content" />
</f:for>
</div>
</div>
</div><div id="container-{data.uid}" class="{f:if(condition: '{data.flexform_classes_container}', then: '{data.flexform_classes_container}')}">
<div class="row
{f:if(condition: '{data.frame_class}', then: 'frame-{data.frame_class}')}
{f:if(condition: '{data.space_before_class}', then: 'space-before-{data.space_before_class}')}
{f:if(condition: '{data.space_after_class}', then: 'space-after-{data.space_after_class}')}"
id="c{data.uid}">
<div class="{f:if(condition: '{data.flexform_classes_col_1}', then: '{data.flexform_classes_col_1}')}">
<f:for each="{children.1.0}" as="child">
<f:cObject typoscriptObjectPath="tt_content.{child.data.CType}" data="{child.data}" table="tt_content" />
</f:for>
</div>
<div class="{f:if(condition: '{data.flexform_classes_col_2}', then: '{data.flexform_classes_col_2}')}">
<f:for each="{children.1.1}" as="child">
<f:cObject typoscriptObjectPath="tt_content.{child.data.CType}" data="{child.data}" table="tt_content" />
</f:for>
</div>
<div class="{f:if(condition: '{data.flexform_classes_col_3}', then: '{data.flexform_classes_col_3}')}">
<f:for each="{children.1.2}" as="child">
<f:cObject typoscriptObjectPath="tt_content.{child.data.CType}" data="{child.data}" table="tt_content" />
</f:for>
</div>
</div>
</div><div id="container-{data.uid}" class="{f:if(condition: '{data.flexform_classes_container}', then: '{data.flexform_classes_container}')}">
<div class="row
{f:if(condition: '{data.frame_class}', then: 'frame-{data.frame_class}')}
{f:if(condition: '{data.space_before_class}', then: 'space-before-{data.space_before_class}')}
{f:if(condition: '{data.space_after_class}', then: 'space-after-{data.space_after_class}')}"
id="c{data.uid}">
<div class="{f:if(condition: '{data.flexform_classes_col_1}', then: '{data.flexform_classes_col_1}')}">
<f:for each="{children.1.0}" as="child">
<f:cObject typoscriptObjectPath="tt_content.{child.data.CType}" data="{child.data}" table="tt_content" />
</f:for>
</div>
<div class="{f:if(condition: '{data.flexform_classes_col_2}', then: '{data.flexform_classes_col_2}')}">
<f:for each="{children.1.1}" as="child">
<f:cObject typoscriptObjectPath="tt_content.{child.data.CType}" data="{child.data}" table="tt_content" />
</f:for>
</div>
<div class="{f:if(condition: '{data.flexform_classes_col_3}', then: '{data.flexform_classes_col_3}')}">
<f:for each="{children.1.2}" as="child">
<f:cObject typoscriptObjectPath="tt_content.{child.data.CType}" data="{child.data}" table="tt_content" />
</f:for>
</div>
<div class="{f:if(condition: '{data.flexform_classes_col_4}', then: '{data.flexform_classes_col_4}')}">
<f:for each="{children.1.3}" as="child">
<f:cObject typoscriptObjectPath="tt_content.{child.data.CType}" data="{child.data}" table="tt_content" />
</f:for>
</div>
</div>
</div><section id="section-{data.uid}" class="{f:if(condition: '{data.flexform_classes_section}', then: '{data.flexform_classes_section}')}">
<f:for each="{children.1.0}" as="child">
<f:cObject typoscriptObjectPath="tt_content.{child.data.CType}" data="{child.data}" table="tt_content" />
</f:for>
</section>