T3SEO

TYPO3 and SEO since 2011

Custom Content Elements I

The content elements shipped with TYPO3 like "Text & Images" or "File Links" are defined in the so called TCA (Table Configuration Array). By manipulating this array you can modify existing content elements or even create completely new ones - without TemplaVoilà.

TCA overview

To understand the TCA and its endless options to some degree it's always helpful to have the documentation at hand. But to get a feeling for the practical usage it's good to take a look at the configuration that comes with TYPO3.

Using Configuration Module (in Admin Tools) choose TCA in the dropdown menu on the top. You will get a list of all database tables, fields and configurations that are registered in TYPO3.

A new Content Element

The field CType contains the type of a content element. Take a look at $TCA['tt_content']['columns']['CType']['config']['items'] to see the already existing types. That's the place where we will add a new element now.

To manipulate the TCA you usally use Extensions. But for now we will choose a simpler way: the extTables.php script.

If not present already, add the following line to your localconf.php

$typo_db_extTableDef_script = 'extTables.php';

and create the file typo3conf/extTables.php. Fill it with:

<?php
t3lib_div::loadTCA('tt_content');
$TCA['tt_content']['columns']['CType']['config']['items'][] = array('Textbox', 'textbox');
$TCA['tt_content']['types']['textbox'] = array(
	'showitem' => '--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.general;general,header,bodytext'
);
?>

Line 2 assures that the configuration for tt_content is loaded completely. This may not be the the case in every situation and this function should be called in every script that works with the TCA.

Line 3 adds a new option to the CType select box. The provided array contains the human readable name as first value (in this case "Textbox") and is also localizable with the "LLL" syntax. The second value is the internal value that is saved to the database (in this case "textbox").

Lines 4 und 5 define the fields that the new Content Element will have. First I chose the general palette, which contains fields that should always be present (CType, colPos, sys_language_uid) followed by the fields header and bodytext that we want to use with our new element.

That's already enough to use the new Content Element in the backend.

Frontend Rendering

To render the new Content Element in the Frontend it has to be defined in our TypoScript.

tt_content.textbox = COA
tt_content.textbox {
	wrap = <div class="textbox">|</div>
	10 = TEXT
	10.field = header
	10.wrap = <h2>|</h2>
	20 = TEXT
	20.field = bodytext
	20.wrap = <p>|</p>
}

Pour in some CSS and Javascript and it could look like this:

I'm the headline

And I'm the text
Multiline text

What's next?

No extension was used in this example, because we used fields that were already present in TYPO3. But commonly you will want to you new fields that have to be added to the database structure. In a second part of this article I will show how this is done using an extension.

Custom Content Elements I

    Related Topics

  • TYPO3