Digitalisierung des Flurs
Die neue online Projektverwaltung mit Protonet.
Eigene Contentelemente in TYPO3 erstellen
Teaserkäsen mit Hovereffekten, spezielle Slider, Caroussels und ähnliches können zwar in der tt_content abgebildet werden, brauchen aber meist eine spezielle Ausgabeformatierung: eigene Contentelemente müssen also her.
Das Ganze ist auch nicht wirklich kompliziert und wer sein Template als Extension angelegt hat kann eigene Contentelemente schnell realisieren.
Alle anderen, deren Template noch im fileadmin oder und im TYPO3 Backend gespeichert ist, brauchen eine leeres Extensionverzeichnis in denen sie mindestens eine ext_emconf.php Datei anlegen. Diese kann einfach aus einer anderen Extension kopiert werden und wird auf eure Anforderungen angepasst. Schon könnt ihr eure eigenen Contentelemente als Extension installieren.
Das Beispiel ergibt die Ausgabe eines Teasers der als eigenes Contentelement eingefügt werden kann wie ich es zum Beispiel im Blog auf den Seiten "Der Monat in Bildern" für die Instagram Bilder benutze.
Die TCA für das eigene Contentelement
Zunächst definieren wir innerhalb der ext_tables.php as TCA unseres neuen Contentelementes:
/**
* Teaser
*/
$TCA['tt_content']['types']['teaser']['showitem'] = "
--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.general;general,
header;LLL:EXT:cms/locallang_ttc.xml:header.ALT.html_formlabel,
bodytext;Text,
image,
--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.appearance,
--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.frames;frames,
--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.access,
--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.visibility;visibility,
--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.access;access,
";
Die TCA definiert uns das Eingabeformular im Backend. Da wir nur tt_content Felder benutzen, können wir auf die Standard Paletten zurückgreifen Welche es alle gibt, seht hier am schnellsten in der Datei typo3/sysext/frontend/Configuration/TCA/tt-content.php.
Das Contentelement in der Backendauswahl hinzufügen
Um unser Contentelement der Auswahl im Backend hinzuzufügen müssen wir das PageTS erweitern.
Das kann entweder auf der Rootseite unseres Templates erfolgen oder, eleganter, in einer ausgelagerten Datei. Dazu erstellen wir eine pageTSconfig.ts Datei in unsere Extension unter Configuration/TypoScript.
pageTSconfig.ts:
mod.wizards.newContentElement.wizardItems {
common {
elements {
teaser {
title = Teaser
description = Erstellt einen neuen Bild / Text Teaser
icon = gfx/c_wiz/user_defined.gif
tt_content_defValues {
CType = myextension_ceteaser
}
}
}
show := addToList(teaser)
}
}
Damit diese Datei automatisch geaden wird ergänzen wir in der ext_localconf.php folgende Zeile:
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('<INCLUDE_TYPOSCRIPT: source="FILE:EXT:my_extension_key/Configuration/TypoScript/pageTsConfig.ts">'); 
Das Contentelement in der CE Auswahl hinzufügen
Um unseren Teaser auch in der Select Auswahl der Contentemente anzuzeigen, müssen wir es dem TCA tt_content types Array hinzufügen. Dazu ergänzen wir wieder unsere ext_tables.php:
* * *************
* Add Content Elements to List
*/
$backupCTypeItems = $GLOBALS['TCA']['tt_content']['columns']['CType']['config']['items'];
$GLOBALS['TCA']['tt_content']['columns']['CType']['config']['items'] = array(
array(
'Meine Contentelemente',
'--div--'
),
array(
'Teaser',
'myextension_teaser',
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extRelPath($_EXTKEY) . 'ext_icon.gif'
),
);
foreach ($backupCTypeItems as $key => $value) {
$GLOBALS['TCA']['tt_content']['columns']['CType']['config']['items'][] = $value;
}
unset($key);
unset($value);
unset($backupCTypeItems);
Das Rendering für die Frontendausgabe:
Dazu legen wir einen neuen Ordner "ContentElements" unter Configration / TypoScript an.
Für unseren Teaser reicht folgende Datei:
Teaser.ts
tt_content.myextension_teaser = COA
tt_content.myextension_teaser {
10 = FLUIDTEMPLATE
10 {
file = EXT:my_extension/Resources/Private/html/Contentelements/Template/Teaser.html
partialRootPath = EXT:my_extension/Resources/Private/html/Contentelements/Layout
layoutRootPath = EXT:my_extension/Resources/Private/html/Contentelements/Partial
}
}
Diese Datei müssen wir dann noch in der ext_localconf.php einbinden:
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTypoScript($_EXTKEY,
'setup', trim('
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:' . $_EXTKEY . '/Configuration/TypoScript/ContentElements/Teaser.ts">
'), 43
);
Das Fluid Template
Unter dem angegebenen Pfad erstellen wir jetzt ein einfaches Fluid Template:
Den FAL ViewHelper findet Ihr hier: FAL ViewHelper
{namespace ce = MyVender\MyExtension\ViewHelpers}
<ce:fal data="{data}">
<article class="caption">
<f:for each="{items}" as="image" iteration="iteration">
<f:image src="{image.uid}" title="{image.title}" alt="{image.alternative}" class="caption-media" treatIdAsReference="1" />
</f:for>
<div class="caption-overlay">
<h1 class="caption-overlay-title">{data.header}</h1>
<p class="caption-overlay-content">{data.bodytext}</p>
</div>
</article>
</ce:fal>
Wir können nun unseren Teaser als eigenes Contentelement im Backend einfügen und die Ausgabe bequem im Fluid Template festlegen.
Mit dieser Technik sind z.B. auch die speziellen Contentelemente im One-Page-Design Template erstellt worden.
Weitere Artikel zu diesem Thema:
Empfehlenswerte Lektüre:
Praxiskurs HTML5 & CSS3: Professionelle Webseiten von Anfang an
Wer sich noch nicht mit der Semantik von html5 und CSS3 auskennt, für den ist dieses Buch lesenswert. Auf 500 Seiten werden Themen wie korrekte html5 Strukturen, Multimedia-Wiedergabe, Webfonts, barrierefreies und responsives Webdesign dem Einsteiger nähergebracht. Unterhaltsammes Praxiswissen mit ausführlicher Referenz zum Nachschlagen.
Kommentare
keine Kommentare vorhanden