Light
Dark
gridelements with TypoScript FAL
pageTS definiert a “product” elemnet with flexform
tx_gridelements.setup {
product {
title = product
icon = EXT:custom_template/Resources/Public/Icons/template.svg
description = this is the product (2019-03-30)
top_level_layout = 1
frame = 2
flexformDS = FILE:EXT:custom_template/Configuration/FlexForm/Product.xml
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Product Raster
colPos = 10
allowed {
CType = textmedia
}
maxitems = 99
}
}
}
}
}
}
}
XML file
<?xml version="1.0" encoding="UTF-8"?>
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<ROOT type="array">
<type>array</type>
<el type="array">
<anchorMenu>
<TCEforms>
<label>anchor link menu</label>
<config>
<type>input</type>
<size>30</size>
<eval>trim</eval>
</config>
</TCEforms>
</anchorMenu>
</el>
</ROOT>
</T3DataStructure>
TypoScript sets use FLUIDTEMPLATE and dataProcessing
tt_content.gridelements_pi1.20.10.setup {
# add fluid template
product < lib.gridelements.defaultGridSetup
product {
# Default Einstellung
#columns {
# 10 < .default
# // weiter ts
#}
# with fluid template
cObject = FLUIDTEMPLATE
cObject {
file = EXT:custom_template/Resources/Private/Templates/Template/Product.html
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
10 {
table = tt_content
//uid.data = field:uid
where = (tx_gridelements_container = ###currentUid###)
markers {
currentUid.data = field:uid
}
orderBy = sorting
as = contents
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = assets
references.table = tt_content
as = assets
}
}
}
}
}
outerWrap = |
// weiter ts
}
}
Fluid html
<section class=" ct{data.uid}" id="{data.flexform_anchorMenu}">
<div class="row small-up-1 medium-up-3" data-equalizer data-equalizer-mq="large-up">
<f:for each="{contents}" as="content">
<div class="column column-block item{item.uid}" data-equalizer-watch>
<f:if condition="{content.assets.0}">
<f:image image="{content.assets.0}" width="400c" />
</f:if>
<f:if condition="{content.data.header_link}">
<f:then>
<f:link.typolink parameter="{content.data.header_link}">
<h2>{content.data.header}</h2><h3>{content.data.subheader}</h3>
</f:link.typolink>
</f:then>
<f:else>
<h2>{content.data.header}</h2>
</f:else>
</f:if>
{content.data.bodytext->f:format.html()}
</div>
</f:for>
</div>
</section>