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

Um den Aufwand im Rahmen zu halten, empfehle ich, ein passendes Icon aus der TYPO3 Icon Sammlung herauszusuchen und über den Icon Identifier aufzurufen.

Man kann auch ein individuelles Icon in der eigenen Extension hinterlegen und anschließend registrieren, s. https://docs.typo3.org/m/typo3/reference-coreapi/13.4/en-us/ApiOverview/Icon/Index.html#registration.

Icons über die ext_localconf.php der eigenen Extension in die IconRegistry eintragen:

$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']
);

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'
);

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.

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.

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.