3.5.2 The Grid Widget

If your template for content or plugin has defined content areas into which other content elements can be inserted, the Preview section lets you render a table-like grid much like the page columns. Editors can then use these grid columns to add elements instead of editing the container element to add child content.

Flux does not automatically render this grid of rows and columns but instead provides a single-line, argument-less Widget which will always render the row/column structure you defined in your Configuration section. Using the Widget is as simple as this:

<f:section name="Preview">
    <flux:widget.grid />
</f:section>

Custom HTML alongside or instead of Grid Widget

It is possible to override the template path Flux uses when rendering the Grid Widget. Doing this can be necessary when creating special TYPO3 backend skins and other cases requiring custom CSS classes, other placements of icons, different nesting strategies, etc.

To override the path simply change Flux's template paths:

plugin.tx_flux.view.templateRootPath = EXT:myext/Resources/Private/Templates

And make sure the file Resources/Private/Templates/ViewHelpers/Widget/Grid/Index.html exists (alternative file GridElements.html is rendered for your convenience when EXT:gridelements is installed).

However, you may find it sufficient to combine the built-in rendering of the Grid with a custom container class or a sibling element, which is also perfectly possible to do:

<f:section name="Preview">
    <div class="my-custom-container">
        <h3>Grid title</h3>
        <flux:widget.grid />
    </div>
</f:section>

You can utilise the content/plugin record's variables add dynamic CSS classes which you then target in backend CSS that you load from your own extension (not documented here - see the official TYPO3 skinning reference for the full documentation on how to affect backend CSS.