Improving TYPO3 Container elements

Part three of our series on Gridelements migration. Finally, we have some code snippets for you! We'll show you how to assign new backend fields purposefully and how to extend container elements to our needs. In addition, we have advice on how to extend existing containers in the latest Bootstrap Package (version 12).

Something that won't be addressed, is the basic configuration of container elements. The colleagues from b13 have already explained that perfectly in their blog.

Whether we need to migrate the flexform settings of the former Gridelements, or provide new functionality, a new field needs to be created somewhere. Now, does it belong in the container element or in the individual content element?

We have established a little rule of thumb for this:

Configurations are added …

• … in containers,
  if they affect their layout
  e. g.: column spacing, breakpoints
• … in content elements
  if they are responsible for the appearance of the content
  e. g.: Background colors, animations

The content of your container should have a frame? Then you should be able to maintain this in the content elements themselves, for example via a frame class (or a separate selection field).

When it comes to the alignment of elements within the container, you can provide the appropriate options in the container. This could be a horizontal centering of elements, or Equal-Height-Columns, so that all frames reach the same height.

Little remark: Please never misuse existing fields, but always create and configure a new database field. How to do this is explained in the TYPO3 documentation.

Using the Table Configuration Array (TCA) of TYPO3 we can configure the backend fields. The fields can be assigned to an element individually or as a group ("palette").

In our last projects, we usually added three custom TCA palettes to the container elements:

1. A palette of project-specific fields (as explained above).
2. A customized palette for the header of containers
3. A customized Frames palette

By default, the header of a container is not rendered in the frontend. However, we'd consider this reasonable in many projects. Therefore, we provide additional fields for header type, alignment and link.

The default "Frames" palette contains the fields for Space before/after, Layout and Frame classes. Since we usually do not extend containers with layouts and frames, our reduced TCA palette only contains the two Spaces fields.

In the first step we define the new TCA palettes, then we assign them to the CType of the container with "showItem".

EXT:sitepackage/Configuration/TCA/Overrides/container.php

$GLOBALS['TCA']['tt_content']['palettes'] += [
    'containerSettings' => [
        'label' => 'Container Settings',
        'showitem' => '
            equal_height,
        ',
    ],
    'containerHeader' => [
        'label' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.header',
        'showitem' => '
            header;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_formlabel,
            --linebreak--,
            header_layout;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_layout_formlabel,
            header_position;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_position_formlabel,
            --linebreak--,
            header_link;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header_link_formlabel
        ',
    ],
    'containerFrames' => [
        'label' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.frames',
        'showitem' => '
            space_before_class;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:space_before_class_formlabel,
            space_after_class;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:space_after_class_formlabel,
        ',
    ],
];

$GLOBALS['TCA']['tt_content']['types']['container_2_columns']['showitem'] = '
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
            --palette--;;general,
            --palette--;;containerHeader,
            --palette--;;containerSettings,
        --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,
            --palette--;;containerFrames,
            --palette--;;appearanceLinks,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language,
            --palette--;;language,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access,
            --palette--;;hidden,
            --palette--;;access,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes,
            rowDescription,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended,
';

In the following example, we allow five CTypes within the two-column container.

$allowedCTypes = 'text, textmedia, image, accordion, texticon';
$GLOBALS['TCA']['tt_content']['containerConfiguration']['container_2_columns']['grid']['0']['0']['allowed']['CType'] = $allowedCTypes;
$GLOBALS['TCA']['tt_content']['containerConfiguration']['container_2_columns']['grid']['0']['1']['allowed']['CType'] = $allowedCTypes;

A note to frontend developers: the containers do not use the Bootstrap grid, but their own CSS grid. Their alignment is defined using data attributes.

.contentcontainer[data-container-identifier="container_2_columns_right"] {
    @include media-breakpoint-up('md') {
        grid-template-columns: 1fr 2fr;
    }
    @include media-breakpoint-up('lg') {
        grid-template-columns: 1fr 3fr;
    }
}

We adjusted the "Fraction" values in our project because the size ratio of the columns seemed too significant to us.

.contentcontainer[data-container-identifier="container_2_columns_right"] {
   @include media-breakpoint-up("md") {
        grid-template-columns: 2fr 3fr;
    }

    @include media-breakpoint-up("lg") {
        grid-template-columns: 3fr 5fr;
    }
}

The fourth and final part deals with the migration of existing data sets.