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

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

5 Kommentare zu “Eigenes Inhaltselement für TYPO3 7.6.x – 9.5.x”

  • Ralf
    02.08.2019 - 15:05 Uhr

    Schöne Erklärung. Nur eine Anmerkung habe ich noch.
    Damit das richtige Bild im Frontend ausgegeben wird, muss man im Setup noch folgendes ergänzen:
    tt_content.ptteam_feteam {
    templateName = Content
    dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
    dataProcessing.10 {
    references {
    table = tt_content
    fieldName = image
    }
    as = images
    }

    Anschließend kann das Bild bzw. können die Bilder im Template wie folgt ausgelesen werden:

    In der Beispielextension wird durch immer das gleiche Bild ausgeben, da unter {data.image} nur die Anzahl der Verknüpfungen, nicht aber die Bild-Uid gespeichert ist.

    Antworten
    • Markus
      04.08.2019 - 16:16 Uhr

      Hallo Ralf,

      vielen Dank für den Hinweis!
      Auf Github und in der Anleitung ist der Fehler behoben.
      Darüber hinaus ist die Extension jetzt auch unter TYPO3 9.5.x verwendbar.

      Antworten
  • Amasel
    01.07.2021 - 19:25 Uhr

    Hallo, ich weiß der Beitrag ist schon etwas älter, aber wie war denn die alte Version mit nur einem Bild?
    Ich würde gerne wirklich nur das erste Bild an einer Stellt ausgeben, andere Bilder möglicherweise später anderer Stelle aber die gibt es bisher nicht.
    Vielen Dank im übrigen für das Tutorial, es hat mir auch in 10.4 noch viel gehollfen

    Antworten
    • Markus
      02.07.2021 - 13:35 Uhr

      Hallo Amasel,
      statt

      f:for each="{images}" as="image"
      f:image src="{image.publicUrl}" alt="{data.header}" treatIdAsReference="1" /
      /f:for


      f:image src="{data.image}" alt="{data.header}" treatIdAsReference="1" /

      war der alte Stand in der Content.html.

      Antworten
  • Amasel
    09.07.2021 - 23:51 Uhr

    Hallo,
    vielen Dank für die Rückmeldung. Mit
    f:image src=“{data.image}“ alt=“{data.header}“ treatIdAsReference=“1″ /
    hat was ich erreichen wollte nicht funktioniert, das „erste“ ausgegebene Bild ist wohl bei {data.image} nicht zwingend das aus tt_content, das zum Objekt gehört. Ein Missverständnis 🙂

    Man kann aber mit
    f:image image=“{images.0}“ /
    usw das 0.te usw. Bild aus dem Array vom Dataprocessor ausgeben,

    Antworten

Schreibe einen Kommentar

Erforderliche Felder sind entsprechend markiert.

Wird nicht veröffentlicht.