Eigenes Inhaltselement für TYPO3 7.6.x – 9.5.x

Für ein eigenes Inhaltselement (CE – Content Element) benötigen wir eine leere Extension, die wir am schnellsten mit dem Extension Builder erstellen. Eine Anleitung wie so eine Extension erstellt wird, ist hier zu finden. Es reicht die Anleitung bis zu dem Punkt „Datenbankstruktur anlegen“ durch zu gehen. Beim Speichern der Extension ohne Datenbankstruktur wird der Extension Builder einen Fehler anzeigen, denn man bedenkenlos missachten kann. Ich möchte anmerken dass das ein Weg ist um ans Ziel zu kommen, es gibt durchaus auch andere.

Die Struktur einer leeren Extension aus dem Extension Builder sieht folgend aus: (In unserem Beispiel heißt der Extension Ordner „pt_team“)

pt_team
  Configuration
    TCA
    TypoScript
      constants.ts
      setup.ts
  Resources
    Private
      Language
      .htaccess
    Public
      Icons
        user_plugin_feteam.svg
  ext_emconf.php
  ext_icon.gif
  ext_localconf.php
  ext_tables.php

Datenbankfelder für unser Inhaltselement

Für unsere Team Extension benutzen wir vorhandene tt_content Datenbankfelder und zwei zusätzliche Felder. TYPO3 bietet schon von Grund auf einige Felder die wir einfach so nutzen können. Wer nicht genau weiß welche das sind, in der Datei unter: typo3 -> sysext -> frontend -> Configuration -> TCA -> tt_content.php werden alle aufgelistet.

Wir können somit schon Core Felder benutzen um unsere eigene Extension darauf aufzubauen:

Name -> Feld "header"
Position -> Feld "subheader"
Foto -> Feld "image"
Beschreibung -> Feld "bodytext"

Für Kontaktdaten E-Mail und Telefon werden wir zwei Felder hinzufügen:

E-Mail -> Feld "email"
Telefon -> Feld "phone"

Für die zwei neuen Felder erstellen wir im Hauptverzeichnis unserer Extension eine Datei mit dem Namen ext_tables.sql
Inhalt der Datei ist folgender:

CREATE TABLE tt_content (
	email varchar(255) DEFAULT '' NOT NULL,
	phone varchar(255) DEFAULT '' NOT NULL,
);

Erklärung: Sobald wir unsere Extension aktivieren, werden in der Datenbanktabelle tt_content unsere zwei zusätzlichen Felder hinzugefügt.

ext_localconf.php

Wir öffnen diese Datei und bearbeiten den Bereich der mit //wizards markiert ist. Wir modifizieren die Ausgabe des Extension Builder wie folgt:

Ausgabe des Extension Builder:

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig(
  'mod {
    wizards.newContentElement.wizardItems.plugins {
      elements {
	feteam {
	  icon = ' . \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extRelPath($extKey) . 'Resources/Public/Icons/user_plugin_feteam.svg
	  title = LLL:EXT:pt_team/Resources/Private/Language/locallang_db.xlf:tx_pt_team_domain_model_feteam
	  description = LLL:EXT:pt_team/Resources/Private/Language/locallang_db.xlf:tx_pt_team_domain_model_feteam.description
	  tt_content_defValues {
	    CType = list
	    list_type = ptteam_feteam
	  }
	}
      }
    show = *
    }
  }'
);

Wir machen daraus:

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig(
  'mod.wizards.newContentElement.wizardItems.common {
    elements {
      ptteam_feteam {
	icon = ' . \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extRelPath($extKey) . 'Resources/Public/Icons/user_plugin_feteam.svg
	title = LLL:EXT:pt_team/Resources/Private/Language/locallang_db.xlf:tx_pt_team_domain_model_feteam
	description = LLL:EXT:pt_team/Resources/Private/Language/locallang_db.xlf:tx_pt_team_domain_model_feteam.description
	tt_content_defValues {
	  CType = ptteam_feteam
	}
      }
    }
    show := addToList(ptteam_feteam)
  }'
);

Erklärung: Damit fügen wir unsere Extension dem TYPO3 Content Wizard hinzu

TCA

Als nächstes erstellen wir einen Ordner unter Configuration -> TCA mit dem Namen Overrides.
Darin erstellen wir eine PHP-Datei mit dem Namen tt_content.php.

Folgende Inhalte benötigen wir:

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPlugin(
   array(
      'Teammitglied',
      'ptteam_feteam',
      'EXT:pt_team/Resources/Public/Icons/team.gif' // Extension Icon
   ),
   'CType',
   'ptteam_feteam' // Ist der selbe Wert wie aus der ext_localconf.php (CType)
);

Erklärung: Damit fügen wir das Inhaltselement zum Dropdown-Menü „Typ“ hinzu.

Anschließend aktivieren wir unsere zwei eigenen Felder für E-Mail und Telefon. Dieser Code gehört ebenfalls in die tt_content.php:

$customFields = [
    'email' => [
        'exclude' => false,
        'label' => 'E-Mail',
        'config' => [
		    'type' => 'input',
		    'size' => 30,
		    'eval' => 'trim'
		],
    ],
    'phone' => [
        'exclude' => false,
        'label' => 'Telefon',
        'config' => [
		    'type' => 'input',
		    'size' => 30,
		    'eval' => 'trim'
		],
    ],
];
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns('tt_content',$customFields);

Damit unsere Extension im TYPO3 Backend auch Felder anzeigt, benötigen wir noch das TCA dafür.

$GLOBALS['TCA']['tt_content']['types']['ptteam_feteam'] = array(
   'showitem' => '
        -palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.general;general,

        image;LLL:EXT:pt_team/Resources/Private/Language/locallang_db.xlf:photo,
        header;LLL:EXT:pt_team/Resources/Private/Language/locallang_db.xlf:header,
        subheader;LLL:EXT:pt_team/Resources/Private/Language/locallang_db.xlf:position,
        email;LLL:EXT:pt_team/Resources/Private/Language/locallang_db.xlf:email,
        phone;LLL:EXT:pt_team/Resources/Private/Language/locallang_db.xlf:phone,
        bodytext;LLL:EXT:pt_team/Resources/Private/Language/locallang_db.xlf:description,

        --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:tabs.appearance,
        --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.frames;frames,
        --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:tabs.access,
        --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.visibility;visibility,
        --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:palette.access;access,
        --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xml:tabs.extended
');

TypoScript

Den Inhalt der setup.ts unter Configuration -> TypoScript kann gelöscht werden und durch folgenden ausgetauscht werden.
Bei templateName wird der Template Name ohne Endung eingetragen.

tt_content.ptteam_feteam >
tt_content.ptteam_feteam = FLUIDTEMPLATE
tt_content.ptteam_feteam {
    templateName = Content

    dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
    dataProcessing.10 {
      references {
        fieldName = image
        table = tt_content
      }
      as = images
    }
    
    templateRootPaths {
      0 = EXT:pt_team/Resources/Private/Templates/
      10 = {$plugin.tx_ptteam_feteam.view.templateRootPath}
    }
    partialRootPaths {
      0 = EXT:pt_team/Resources/Private/Partials/
      10 = {$plugin.tx_ptteam_feteam.view.partialRootPath}
    }
    layoutRootPaths {
      0 = EXT:pt_team/Resources/Private/Layouts/
      10 = {$plugin.tx_ptteam_feteam.view.layoutRootPath}
    }
}

Template Ordner hinzufügen

Für unsere Ausgabe im Frontend benötigen wir noch das dazugehörige Template. Hierzu erstellen wir die folgenden Ordner unter Resources -> Private

• Layouts
• Partials
• Templates

Und wie im TypoScript angegeben benötigen wir noch die HTML Datei. Im Templates Ordner erstellen wir daher noch das Fluid Template „Content.html“ mit folgendem Inhalt:

<div class="member">
  <div class="photo">
    <f:for each="{images}" as="image">
      <f:image src="{image.publicUrl}" alt="{data.header}" treatIdAsReference="1" />
    </f:for>
  </div>
  <div class="name">{data.header}</div>
  <div class="position">{data.subheader}</div>
  <div class="description"><f:format.html>{data.bodytext}</f:format.html></div>
  <div class="email"><f:link.email email="{data.email}">E-Mail schreiben</f:link.email></div>
  <div class="phone">{data.phone}</div>
</div>

Zum Schluss die Extension im Extension Manager aktivieren und das neue Inhaltselement steht im TYPO3 Backend zur Verfügung. Kritik, Anregungen und Fragen wie immer gerne in die Kommentare. Grundsätzlich funktioniert diese Extension für 7.6 – 9.5 ohne Probleme. Wer für das bodyfield eine Editor verwenden möchte, muss diesen für die jeweilige Version anders einbinden. Die Lösung findet ihr hier.

Getestet mit TYPO3 9.5.8