Digitalisierung des Flurs
Die neue online Projektverwaltung mit Protonet.
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.
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.
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">');
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);
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
);
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:
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.
keine Kommentare vorhanden