.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.
.. include:: ../Includes.txt
.. _adding-your-own-content-elements:
================================
Adding your own content elements
================================
.. note::
This part is written for developers!
A content element can be based on already available fields in the tt_content table, or it might be that you need extra
fields. This is done the same way as you do for your own extensions, extending TCA. Depending on the data in the
tt_content table, you can send the data immediately to the Fluid template or use a data processor in front to do some
data manipulation. The content elements in the extension "content_rendering_core" are using both as well. A data
processor is sometimes used to convert a string (like the bodytext field in content element "table") to an array, so
Fluid does not have to deal with this manipulation or transformation.
.. _use-an-extension:
Use an extension
================
Advisable is to make your own extension. In our example we've used the extension key "your_extension_key". If you have
plans to publish your extension, do not forget to lookup for the availability of your desired key and register it at
`this page `_ (login in `typo3.org `_ required).
Since this part is written for developers, we will not explain in full detail how an extension works.
.. _ext-tables-php:
ext_tables.php
--------------
First we need to add the content element to the dropdown "Type", where you can select the type of content element.
.. code-block:: php
// Adds the content element to the "Type" dropdown
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPlugin(
array(
'LLL:EXT:your_extension_key/Resources/Private/Language/Tca.xlf:yourextensionkey_newcontentelement',
'yourextensionkey_newcontentelement',
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extRelPath($_EXTKEY)
. 'Resources/Public/Icons/ContentElements/yourextensionkey_newcontentelement.gif'
),
'CType'
);
Then we configure the backend fields for our new content element.
.. code-block:: php
// Configure the default backend fields for the content element
$GLOBALS['TCA']['tt_content']['types']['yourextensionkey_newcontentelement'] = array(
'showitem' => '
--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.general;general,
--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.header;header,
--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.appearance,
--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.frames;frames,
--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.access,
--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.visibility;visibility,
--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.access;access,
--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.extended
');
Since we need to use TypoScript as well, we add an entry in the static template list found in sys_templates for static
TS.
.. code-block:: php
// Add an entry in the static template list found in sys_templates for static TS
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
$_EXTKEY,
'Configuration/TypoScript',
'Your description'
);
.. _ext-localconf-php:
ext_localconf.php
-----------------
If you want to generate a special preview in the backend "Web > Page" module, you can use a hook for this
.. code-block:: php
// Register for hook to show preview of tt_content element of CType="yourextensionkey_newcontentelement" in page module
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']['yourextensionkey_newcontentelement'] =
\Vendor\YourExtensionKey\Hooks\PageLayoutView\NewContentElementPreviewRenderer::class;
.. _setup-txt:
setup.txt
---------
As defined in ``ext_tables.php``, this file is in the directory ``Configuration/TypoScript`` of our own extension. You
can have two options in the TypoScript:
- Send all the data from the tt_content table for this particular content element directly to a Fluid template
.. code-block:: typoscript
tt_content {
yourextensionkey_newcontentelement < lib.fluidContent
yourextensionkey_newcontentelement {
templateName = NewContentElement.html
}
}
- Or use a data processor in front of the view to do some data manipulation or other stuff you would like to do before
sending everything to the view. First tell the FLUIDTEMPLATE content object what the name of the template is by using
the parameter ``templateName``, then add the full class name for the data processor. You can send your own parameters
to the processor as well.
.. code-block:: typoscript
tt_content {
yourextensionkey_newcontentelement < lib.fluidContent
yourextensionkey_newcontentelement {
templateName = NewContentElement.html
dataProcessing {
1 = Vendor\YourExtensionKey\DataProcessing\NewContentElementProcessor
1 {
useHere = theConfigurationOfTheDataProcessor
}
}
}
}
You need to add the templateRootPath to your own extension as well, and if you are using it, partialRootPaths and
layoutRootPaths.
.. code-block:: typoscript
lib.fluidContent {
templateRootPaths {
200 = EXT:your_extension_key/Resources/Private/Templates/
}
}
.. _content-element-data-processor:
Data Processor
--------------
In our ``setup-txt`` example above, we put the data processor in the directory
``Classes/DataProcessing``. The file ``NewContentElementProcessor.php`` could look like
.. code-block:: php
We can change our preview here!
';
$drawItem = FALSE;
}
}
}
.. _fluid-templates:
Fluid templates
---------------
For the final rendering you need a Fluid template. This template will be located at the directory and file name which
you have entered in :ref:`setup-txt` using the parameter ``templateName``.
Just to show the variable foo, like we defined at :ref:`content-element-data-processor`, we can use the
following markup
.. code-block:: html
{foo}