Eigene Content Elemente anlegen

Die folgenden Beispiele beziehen sich auf eine eigene Template-Extension, die hier nema_template genannt wird.

s. a. die offizielle Dokumentation in TYPO3 Explained

1. Icon registrieren

Individuelles Icon, um das Custom-CE im Backend-Wizard „Neues Inhaltselement erstellen“ zu kennzeichnen

Icons werden über die ext_localconf.php der eigenen Extension in die IconRegistry eingetragen, vgl. Icon API:

$iconRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(
   \TYPO3\CMS\Core\Imaging\IconRegistry::class
);
$iconRegistry->registerIcon(
   'your-icon-identifier',
   \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
   ['source' => 'EXT:nema_template/Resources/Public/Icons/your-icon.svg']
);

2. Content Element im Seiten-TSconfig registrieren

Eintrag in der Datei nema_template/Configuration/TSconfig/Page.tsconfig:

## Configuration/TSconfig/Page.tsconfig
mod.wizards.newContentElement.wizardItems.common {
  elements {
    nematemplate_newcontentelement {
      iconIdentifier = your-icon-identifier
      title = LLL:EXT:nema_template/Resources/Private/Language/Tca.xlf:nematemplate_newcontentelement.wizard.title
      description = LLL:EXT:nema_template/Resources/Private/Language/Tca.xlf:nematemplate_newcontentelement.wizard.description
      tt_content_defValues {
        CType = nematemplate_newcontentelement
      }
    }
  }
  show := addToList(nematemplate_newcontentelement)
}

Dabei kann man title und description auch direkt eingeben. Sollte aber eine weitere Sprache erforderlich sein, braucht man sowieso die Sprachdateien für die Übersetzung. Außerdem muss man Texte dann nur an einer zentralen Stelle ändern.

Die Auswahlliste im Drop-Down des Feldes „Typ“ [CType] wird in der Datei nema_template/Configuration/TCA/Overrides/tt_content.php erweitert:

## Configuration/TCA/Overrides/tt_content.php
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
   'tt_content',
   'CType',
    [
        'LLL:EXT:nema_template/Resources/Private/Language/Tca.xlf:nematemplate_newcontentelement.wizard.title',
        'nematemplate_newcontentelement',
        'your-icon-identifier',
    ],
    'textmedia',
    'after'
);

4. Optional: Eigene Felder für das CE definieren

Es ist sinnvoll, soweit wie möglich bereits vorhandene Felder der Datenbanktabelle tt_content zu verwenden. Man kann aber auch tt_content um eigene Felder erweitern.

5. Felder des CE konfigurieren

In derselben Datei werden die Backend-Felder des neuen Inhaltselements festgelegt:

## Configuration/TCA/Overrides/tt_content.php
$GLOBALS['TCA']['tt_content']['types']['nematemplate_newcontentelement '] = [
  'showitem' => '
    --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
      --palette--;;general,
      header;LLL:EXT:nema_template/Resources/Private/Language/Tca.xlf:header,
      subheader;LLL:EXT:nema_template/Resources/Private/Language/Tca.xlf:subheader,
      header_link;LLL:EXT:nema_template/Resources/Private/Language/Tca.xlf:header_link,
      image;LLL:EXT:nema_template/Resources/Private/Language/Tca.xlf:image,
    --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access,
      --palette--;;hidden,
      --palette--;;access,
  ',
];

Dabei bezeichnet --div-- einen Reiter resp. Tab der BE-Eingabemaske, --palette-- hingegen eine Gruppe von Eingabefeldern.

Die einzelnen Felder werden in einer kommaseparierten Liste angegeben. Hinter dem Semikolon kann ein Override für das Label des Feldes stehen:

'showitem' => 'header;label1, subheader;label2, ...'

Die komplette Definition der vorhandenen Felder findet man in der Datei typo3/sysext/frontend/Configuration/TCA/tt_content.php.

6. Eigenes Template verwenden

Da wir hier ja eine eigene Template-Extension erweitern, gehen wir davon aus, dass das setup.typoscript bereits eingebunden und die RootPaths angepasst sind (vgl. https://docs.typo3.org/m/typo3/reference-coreapi/9.5/en-us/ApiOverview/ContentElements/AddingYourOwnContentElements.html#configure-the-frontend-template).

Im setup.typoscript schließe ich eine separate Datei zur Definition des Frontend-Renderings per FLUIDTEMPLATE ein:

## Configuration/TypoScript/setup.typoscript - TYPO3 9 Syntax
@import "EXT:nema_template/Configuration/TypoScript/contentElement.typoscript"

In dieser Datei wird das Template und ggf. das dataProcessing festgelegt:

## Configuration/TypoScript/contentElement.typoscript
tt_content {
  nematemplate_newcontentelement =< lib.contentElement
  nematemplate_newcontentelement {
 
    templateName = NewContentElement
 
    dataProcessing {
      10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
      10 {
        references.fieldName = image
      }
      20 = TYPO3\CMS\Frontend\DataProcessing\GalleryProcessor
      20 {
        maxGalleryWidth = {$styles.content.textmedia.maxW}
        maxGalleryWidthInText = {$styles.content.textmedia.maxWInText}
        columnSpacing = {$styles.content.textmedia.columnSpacing}
        borderWidth = {$styles.content.textmedia.borderWidth}
        borderPadding = {$styles.content.textmedia.borderPadding}
      }
    }
  }
}

Das FLUIDTEMPLATE selbst wird mit dem Dateinamen NewContentElement.html im unter lib.contentElement.templateRootPaths definierten Pfad abgelegt.