Contentelements with typoscript

Published
Start the Conversation
0 Comments

Why actually

Many of the developers in the TYPO3 environment have a deep aversion to typoscript and try to avoid this part of TYPO3 as much and as well as possible.

However, the excesses I have seen in the past 10 years are frightening. Instead of using a few lines of typoscript, elaborate controllers were programmed just to re-implement functions that are available through getText.

In this article I would like to show how you can actually implement powerful elements very easily and quickly with typoscript and the TYPO3 board tools.

Register new content elements

For the sake of completeness, I also show the classic way of registration. However, as this was too complicated for me, I wrote the extension mst_yaml2tca. It makes everything much easier.

<?php

declare(strict_types=1);

use TYPO3\CMS\Core\Utility\GeneralUtility;

call_user_func(function ($extKey = 'site_provider') {

  $register = GeneralUtility::makeInstance(\MST\MstYaml2Tca\Tca\Registry::class);
  $register->loadFile($extKey, GeneralUtility::getFileAbsFileName('EXT:' . $extKey . '/Configuration/Yaml/tt_content.yaml'));

});
site_provider/Configuration/TCA/Overrides/tt_content.php
contentElements:
  # group id
  additional_elements:
    # group title
    title: "Additional Elements"
    # list of elements
    elements:
      # element id
      additional_text:
        title: "Additional Text"
        description: "This element is used to add additional text to the page."
        icon: "content-text"
        config:
          showitem:
            -
              title: "LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general"
              fields:
                - "--palette--;;general"
                - "--palette--;;header"
                - "bodytext"
            -
              title: "LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance"
              fields:
                - "--palette--;;frames"
            -
              title: "LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access"
              fields:
                - "--palette--;;hidden"
                - "--palette--;;access"
site_provider/Configuration/Yaml/tt_content.yaml

mst_yaml2tca 

<?php

declare(strict_types=1);

use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;

call_user_func(function ($extKey = 'site_provider') {

  ExtensionManagementUtility::addTcaSelectItem(
    'tt_content',
    'CType',
    [
      'Additional Text',
      'additional_text',
      'content-text',
      'additional_elements',
    ],
  );

  $GLOBALS['TCA']['tt_content']['types']['additional_text'] = [
    'showitem' => '--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,--palette--;;general,--palette--;;header,bodytext,--div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,--palette--;;frames,--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access,--palette--;;hidden,--palette--;;access'
  ];
  $GLOBALS['TCA']['tt_content']['ctrl']['typeicon_classes']['additional_text'] = 'content-text';
});
site_provider/Configuration/TCA/Overrides/tt_content.php

Now that the element is registered in the backend, we can fill it with a little content and then display it in the frontend.

All we need is a few lines of Typoscript and a Fluidtemplate.

tt_content.additional_text =< lib.contentElement
tt_content.additional_text {
    layoutRootPaths.20 = EXT:site_provider/Resources/Private/Layouts/
    partialRootPaths.20 = EXT:site_provider/Resources/Private/Partials/
    templateRootPaths.20 = EXT:site_provider/Resources/Private/Templates/
    template = AdditionalText
}
site_provider/Configuration/TypoScript/tt_content.typoscript
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Main">

    <f:format.html>{data.bodytext}</f:format.html>

</f:section>
</html>
site_provider/Resources/Private/Templates/AdditionalText.html

So, we see that we can create new content elements very easily and quickly using TYPO3's board tools.

In the next article we will see how we can solve complex problems using typoscript.

Klassisch

site_provider/Configuration/TCA/overrides/tt_content.php

Comments

No Comments

Write comment

* These fields are required