For coders TYPO3 Tech Corner

Veröffentlicht am 13. Oktober 2022

Eigenes Content Element in TYPO3 (Bild über sys_file_reference in FlexForm)

Es gibt sicher schon einige gute Blogposts oder fertige Extensions, mit denen man eigene Content Elemente in TYPO3 erstellen kann. Wir zeigen hier nochmal gesammelt, wie das Ganze möglichst einfach funktioniert. Die Tags: fal, sys_file, sys_file_reference, flexform, dataprocessing, seiteininhalt

In dem Beispiel nutzen wir FlexForm zur Darstellung von individuellen Feldern. Natürlich lässt sich streiten, ob man eigene Felder in der Datenbanktabelle hinzufügen möchte, oder doch lieber auf FlexForm setzt (die Vor- und Nachteile sollten wir einmal in einem separatem Blogbeitrag beleuchten). In dem Beispiel wollen wir möglichst einfach und schnell einen neuen Seiteninhalt vom Typ "Highlight" rendern. Das Design sieht vor, dass neben Texten auch ein Bild angezeit werden soll. Zusätzlich soll der Redakteur die Hintergrundfarbe und die Struktur wählen können.

Eigener Seiteninhalt in TYPO3 — Eigener Seiteininhalt vom Typ "Highlight Element" in TYPO3

Code Backend

Über eine TCA Datei in eurem Sitepackage definiert ihr ein neues Content Element, laded eine FlexForm Datei dazu und definiert die anzuzeigenden Felder für diesen Seiteninhalt (EXT:in2template/Configuration/TCA/Overrides/tt_content.php):

<?php

$languageFilePrefix = 'LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:';
$frontendLanguageFilePrefix = 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:';

/**
 * TCA manipulation (mainly for custom content elements)
 */
$tca = [
    'ctrl' => [
        'typeicons' => [
            'ce.highlight' => 'ce.highlight',
        ],
        'typeicon_classes' => [
            'ce.highlight' => 'ce.highlight',
        ],
    ],
    'types' => [
        'ce.highlight' => [
            'showitem' => '--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
             --palette--;;general,
             header;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:header.ALT.html_formlabel,
             pi_flexform,
             --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,
             --palette--;;frames, --palette--;;appearanceLinks,
             --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language, --palette--;;language,
             --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access, --palette--;;hidden,
             --palette--;;access, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:categories,
             categories, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes,
             rowDescription, --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended,'
        ],
    ],
];
$GLOBALS['TCA']['tt_content'] = array_replace_recursive($GLOBALS['TCA']['tt_content'], $tca);

/**
 * Include Flexforms
 */
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue(
    '*',
    'FILE:EXT:in2template/Configuration/FlexForms/ContentElements/Highlight.xml',
    'ce.highlight'
);

/**
 * Register custom content elements
 */
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
    'tt_content',
    'CType',
    [
        'LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:ce.highlight',
        'ce.highlight',
        'ce.highlight',
    ],
    'textmedia',
    'after'
);

In der FlexForm Datei definiert ihr die anzuzeigenden Felder. Besonders interessant ist das Feld image, das wie gewohnt IRRE Datensätze vom Typ sys_file_reference im Backend rendern soll (EXT:in2template/Configuration/FlexForms/ContentElements/Highlight.xml):

<T3DataStructure>
  <meta>
    <langDisable>1</langDisable>
  </meta>
  <sheets>
    <main>
      <ROOT>
        <TCEforms>
          <sheetTitle>LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.main</sheetTitle>
        </TCEforms>
        <type>array</type>
        <el>
          <title>
            <TCEforms>
              <label>LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.title</label>
              <config>
                <type>input</type>
                <eval>trim,required</eval>
              </config>
            </TCEforms>
          </title>
          <subtitle>
            <TCEforms>
              <label>LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.subtitle</label>
              <config>
                <type>text</type>
                <eval>trim</eval>
              </config>
            </TCEforms>
          </subtitle>
          <image>
            <TCEforms>
              <label>LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.image</label>
              <config>
                <type>inline</type>
                <maxitems>1</maxitems>
                <foreign_table>sys_file_reference</foreign_table>
                <foreign_table_field>tablenames</foreign_table_field>
                <foreign_label>uid_local</foreign_label>
                <foreign_sortby>sorting_foreign</foreign_sortby>
                <foreign_field>uid_foreign</foreign_field>
                <foreign_selector>uid_local</foreign_selector>
                <foreign_selector_fieldTcaOverride>
                  <config>
                    <appearance>
                      <elementBrowserType>file</elementBrowserType>
                      <elementBrowserAllowed>gif,jpg,jpeg,png,svg</elementBrowserAllowed>
                    </appearance>
                  </config>
                </foreign_selector_fieldTcaOverride>
                <foreign_types type="array">
                  <numIndex index="0">
                    <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
                  </numIndex>
                  <numIndex index="2">
                    <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
                  </numIndex>
                </foreign_types>
                <foreign_match_fields>
                  <fieldname>pi_flexform_highlight</fieldname>
                </foreign_match_fields>
                <appearance type="array">
                  <newRecordLinkAddTitle>1</newRecordLinkAddTitle>
                  <headerThumbnail>
                    <field>uid_local</field>
                    <height>64</height>
                    <width>64</width>
                  </headerThumbnail>
                  <enabledControls>
                    <info>1</info>
                    <new>0</new>
                    <dragdrop>0</dragdrop>
                    <sort>1</sort>
                    <hide>0</hide>
                    <delete>1</delete>
                    <localize>1</localize>
                  </enabledControls>
                  <createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
                </appearance>
                <behaviour>
                  <localizationMode>select</localizationMode>
                  <localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
                </behaviour>
                <overrideChildTca>
                  <columns type="array">
                    <uid_local type="array">
                      <config type="array">
                        <appearance type="array">
                          <elementBrowserType>file</elementBrowserType>
                          <elementBrowserAllowed>jpg,jpeg,png,svg,gif</elementBrowserAllowed>
                        </appearance>
                      </config>
                    </uid_local>
                  </columns>
                  <types type="array">
                    <numIndex index="2">
                      <showitem>alternative, title,--palette--;;filePalette</showitem>
                    </numIndex>
                  </types>
                </overrideChildTca>
              </config>
            </TCEforms>
          </image>
          <label>
            <TCEforms>
              <label>LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.label</label>
              <config>
                <type>input</type>
                <eval>trim</eval>
              </config>
            </TCEforms>
          </label>
          <link>
            <TCEforms>
              <exclude>1</exclude>
              <label>LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.link</label>
              <config type="array">
                <type>input</type>
                <eval>trim</eval>
                <renderType>inputLink</renderType>
              </config>
            </TCEforms>
          </link>
          <background>
            <TCEforms>
              <exclude>1</exclude>
              <label>LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.background</label>
              <config>
                <type>select</type>
                <renderType>selectSingle</renderType>
                <items type="array">
                  <numIndex index="1" type="array">
                    <numIndex index="0">LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.background.0</numIndex>
                    <numIndex index="1">0</numIndex>
                  </numIndex>
                  <numIndex index="2" type="array">
                    <numIndex index="0">LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.background.1</numIndex>
                    <numIndex index="1">1</numIndex>
                  </numIndex>
                </items>
              </config>
            </TCEforms>
          </background>
          <orient>
            <TCEforms>
              <exclude>1</exclude>
              <label>LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.orient</label>
              <config>
                <type>select</type>
                <renderType>selectSingle</renderType>
                <items type="array">
                  <numIndex index="1" type="array">
                    <numIndex index="0">LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.orient.0</numIndex>
                    <numIndex index="1">0</numIndex>
                  </numIndex>
                  <numIndex index="2" type="array">
                    <numIndex index="0">LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:flexform.highlight.orient.1</numIndex>
                    <numIndex index="1">1</numIndex>
                  </numIndex>
                </items>
              </config>
            </TCEforms>
          </orient>
        </el>
      </ROOT>
    </main>
  </sheets>
</T3DataStructure>

Eventuell wollt ihr auch noch einen Eintrag im Wizard haben, damit der neue Seiteninhalt beim Klick auf das Plus-Symbol im Page Module im Backend entsprechend prominent vertreten ist. Das funktioniert über Page TSConfig - in unserem SitePackage an dieser Stelle (EXT:in2template/Configuration/TsConfig/Page/Mod/Wizards/ContentElement.tsconfig):

mod.wizards.newContentElement.wizardItems {
  hfwu {
    header = Hochschule
    after = common
    show = *
    elements {
      highlight {
        iconIdentifier = ce.highlight
        title = LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:ce.highlight
        description = LLL:EXT:in2template/Resources/Private/Language/Backend/locallang.xlf:ce.highlight.description
        tt_content_defValues {
          CType = ce.highlight
        }
      }
    }
  }
}

Code Frontend

Damit das neue Element auch im Frontend gerendert werden kann, braucht es ein paar Zeilen TypoScript (EXT:in2template/Configuration/TypoScript/Setup/ContentElements/Highlight.typoscript):

lib.in2templateContentElement =< lib.contentElement
lib.in2templateContentElement {
  templateRootPaths {
    20 = EXT:in2template/Resources/Private/Templates/ContentElements/
  }
  partialRootPaths {
    20 = EXT:in2template/Resources/Private/Partials/ContentElements/
  }
  layoutRootPaths {
    20 = EXT:in2template/Resources/Private/Layouts/ContentElements/
  }
}

tt_content.ce\.highlight =< lib.in2templateContentElement
tt_content.ce\.highlight {
  templateName = Highlight
  dataProcessing {
    10 = TYPO3\CMS\Frontend\DataProcessing\FlexFormProcessor

    20 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
    20 {
      references {
        table = tt_content
        fieldName = pi_flexform_highlight
      }
      as = image
    }
  }
}

Wir nutzen den bereits vorhandenen FlexFormProcessor (DataProcessor) von TYPO3, damit wir die Werte aus dem FlexForm (liegen ja eigentlich als XML in der Datenbank) sauber im Fluid nutzen können. Darüber hinaus nutzen wir auch den FilesProcessor, damit wir das in Relation stehende Bild zu dem Seiteininhalt auch bequem im Template nutzen können.

Das zugehörige HTML-Template kann dann so aussehen (EXT:in2template/Resources/Private/Templates/ContentElements/Highlight.html):

<div class="ce-disturber margin-top-m" id="c{data.uid}">
	<div class="container">
		<div class="disturber flex{f:if(condition:flexFormData.orient,then:' disturber--left')}{f:if(condition:flexFormData.background,then:' disturber--yellow')}">
			<div class="flex__md-8">
				<f:if condition="{image.0}">
					<f:image image="{image.0}" class="disturber__image" width="900c" maxHeight="300" />
				</f:if>
			</div>
			<div class="flex__md-4">
				<h2 class="disturber__heading">{flexFormData.title}</h2>
				<f:if condition="{flexFormData.subtitle}">
					<p>{flexFormData.subtitle -> f:format.nl2br()}</p>
				</f:if>
				<f:if condition="{flexFormData.link} && {flexFormData.label}">
					<f:link.typolink class="disturber__button btn btn--primary margin-top-s" parameter="{flexFormData.link}">{flexFormData.label}</f:link.typolink>
				</f:if>
			</div>
		</div>
	</div>
</div>

Anmerkungen

Wie die meisten anderen Posts bei uns im Blog ist auch dieses Snippet nicht komplett vollständig. Zum Beispiel fehlen noch die Einträge in den Sprachdateien (locallang.xlf). Auch das registrierte SVG-Icon in der ext_localconf.php haben wir aus Platzgründen hier nicht mit aufgeführt. Außerdem gehen wir davon aus, dass der Anwender ein Sitepackage nutzt, damit seine TYPO3 Installation sauber konfiguriert ist.

Viel Spaß beim Integrieren von neuen Elementen in TYPO3

Zurück

Kennst du das: Immer nur schnell schnell?

Wie wäre es einmal mit Zeit und Respekt für Codequalität? Arbeiten im Team? Automatisierte Tests?

Komm zu uns

Menü-Vergleich: Zahlen, Zahlen, Zahlen

Zum Beitrag

Dropdown-Menü ohne Last - mittels Multilevel-Cache

Zum Beitrag

Menü: Vergleich der Techniken

Wie steht es um die Performance, wenn in TYPO3 ein Menü größer wird? Wir haben uns verschiedene Wege angeschaut, wie man ein Dropdown-Menü generieren kann.

Zum Beitrag

KI und ChatGPT für die TYPO3 Entwicklung

Nutzt ihr bereits KI wie ChatGPT bei der täglichen Arbeit mit TYPO3. Wir haben ein spezielles GPT für euch veröffentlicht, das euch helfen kann.

Zum Beitrag

TYPO3: SOLR-Index in PHP manuell aktualisieren?

Wolltet ihr auch schon mal den SOLR-Index live aktualisieren? Eventuell wenn Datensätze im Frontend geändert werden oder wenn - wie in unserem Fall - der nächtliche Import Datensätze im TYPO3...

Zum Beitrag

Bitte nutzt kein switch/case mehr in PHP

Seit PHP 8 gibt es eine typensichere Alternative zu Switch Anweisungen, die sich auch noch leichter schreiben lässt. Wir zeigen euch, wie einfach das ist.

Zum Beitrag

Im Falle eines Hacks günstiger Notfall-Server für Universitäten und Hochschulen

LUX - TYPO3 Marketing Automation

Selfhosted Webserver

For coders TYPO3 Tech Corner

Eigenes Content Element in TYPO3 (Bild über sys_file_reference in FlexForm)

Es gibt sicher schon einige gute Blogposts oder fertige Extensions, mit denen man eigene Content Elemente in TYPO3 erstellen kann. Wir zeigen hier nochmal gesammelt, wie das Ganze möglichst einfach funktioniert. Die Tags: fal, sys_file, sys_file_reference, flexform, dataprocessing, seiteininhalt

Code Backend

Code Frontend

Anmerkungen

Alex Kellner

Kennst du das: Immer nur schnell schnell?

Menü-Vergleich: Zahlen, Zahlen, Zahlen

Dropdown-Menü ohne Last - mittels Multilevel-Cache

Menü: Vergleich der Techniken

KI und ChatGPT für die TYPO3 Entwicklung

TYPO3: SOLR-Index in PHP manuell aktualisieren?

Bitte nutzt kein switch/case mehr in PHP