Back to top Back to top
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>

stackoverflow