Offer more styling options for content element in TYPO3

Question

In past I used the Visual Composer with WordPress very often. Now I am trying my first development with TYPO3.

I've developed a content element. Everything works fine. But now I want to offer the editor more options for styling.

For example: - CSS classes - Colors - Sizes - Paddings - Margins

This information should be accessable in the fluid template. Is this possible? Maybe in an additional tab?

Answer 1

You have to add fields to the tt_content table. For that you can use TCA. There is even a good example in the TYPO3 documentation to extend tt_content with a "No print" checkbox.

Write your fields database specification in the ext_tables.sql file:

CREATE TABLE tt_content (
        tx_your_extension_no_border tinyint(4) DEFAULT '0' NOT NULL
);

Then you need an other file in your extension in this path: your_extension/Configuration/TCA/Overrides/tt_content.php

And you can add the fields defined up there here:

$temporaryColumn = array(
        'tx_your_extension_no_border' => array (
                'exclude' => 0,
                'label' => 'LLL:EXT:your_extension/Resources/Private/Language/locallang_db.xlf:tt_content.tx_your_extension_no_border',
                'config' => array (
                        'type' => 'check',
                 )
            )
    );
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
            'tt_content',
            $temporaryColumn
    );
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
            'tt_content',
            'visibility',
            'tx_your_extension_no_border',
            'after:linkToTop'
    );

See the whole documentation here.

Some explanation:

The function "addTCAcolumns" registers your "temp columns" to the table.

The function "addFieldsToPalette" adds your field "tx_your_extension_no_border" into a "palette". (You can read about Palettes here).

The first parameter is the table. (tt_content)

The second parameter is the name of the palette (here it is the visibility)

The third is the field name (tx_your_extension_no_border)

The forth is a position. You can use after and before to place your field exact befor XY field.

Of course you can add your own tabs as well.

The syntax is: --div--<tab_name>,<fields>

Fluid:

After you added the fields they are accessible in your fluid templates just like any other tt_content fields. You can use if-s, layouts, sections to enable the variety to the editors as they work with your content element.