Ein Unternehmen der Finanz Informatik
Aufbau und Struktur einer Template-Extension und Erstellung
eigener Content-Elemente
TYPO3 TEMPLATING
Ein Unternehmen der Finanz InformatikEin Unternehmen der Finanz Informatik
AGENDA
Aufgabe einer Template-Extension
Struktur einer (Template-)Extension
Extension-Templates überschreiben
BE-Layouts
Eigene Content-Elemente erstellen
Ein Unternehmen der Finanz Informatik
Thorsten Griebenow,
TYPO3 Integratorfrontendentwickler
Star Finanz Software-Entwicklungs und Vertriebs GmbH
www.starfinanz.de
http://de.slideshare.net/StarFinanz
Eigene TYPO3-Projekte seit 2003
Festanstellung seit Mai 2008
Ein Unternehmen der Finanz Informatik
Sinn und Zweck von Template Extensions
Die Template-Extension bestimmt das Layout
der gesamten Website incl. ihrer Extensions,
stellt Grundkonfigurationen zur Verfügung und ist
flexibel einsetzbar. Und sie ist versionierbar.
Ein Unternehmen der Finanz Informatik
Die Ordner und ihr grundsätzlicher Inhalt
Configuration < TypoScript
Documentation.tmpl < ChangeLog/Index.rst
Resources
/Private < Templates & Language-Dateien
/Public < /Css, /Scripts, /Images ...
Ein Unternehmen der Finanz Informatik
Die Herzstück-Datei: Die zentrale setup.txt/.ts
Hier wird in der gewünschten
Reihenfolge alles Setup der Website zentral
sortiert und eingebunden, das im Root der Instanz
zur Verfügung stehen soll. Sie befindet sich im
Ordner Configuration/TypoScript
Ein Unternehmen der Finanz Informatik
Die TypoScript Datei
# Include the libraries
<INCLUDE_TYPOSCRIPT:
source="FILE:EXT:tx_thisTemplateExtension/Configuration/TypoScript/Libs.ts
">
# Include the navigation confix
<INCLUDE_TYPOSCRIPT:
source="FILE:EXT:tx_thisTemplateExtension/Configuration/TypoScript/Navs.ts
">
# Include the plugin confix
<INCLUDE_TYPOSCRIPT:
source=“FILE:EXT:tx_thisTemplateExtension/Configuration/TypoScript/PluginC
onfix.ts“>
# Main setup at last
<INCLUDE_TYPOSCRIPT:
source="FILE:EXT:tx_thisTemplateExtension/Configuration/TypoScript/MainSet
up.ts">
Ein Unternehmen der Finanz Informatik
Bekanntgeben eines zusätzlichen Static Templates
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticF
ile($_EXTKEY, 'Configuration/TypoScript/ContactConfix',
'Contact Form Configuration');
Ein Unternehmen der Finanz Informatik
Backend - Layouts
BE Layouts sind Optionen für das Erscheinungsbild der Seite,
die in den Seiteneigenschaften vom Redakteur
ausgewählt werden können. In der Template-Extension
verbinde ich sie mit HTML und Fluid, um die Frontend-Ausgabe
zu steuern.
Ein Unternehmen der Finanz Informatik
Konfiguration der BE-Layouts in der Extension
# DEFAULT
{$plugin.tx_thisTemplateExtension.website.config.uidDefaultPageBELayout}= TEXT
{$plugin.tx_thisTemplateExtension.website.config.uidDefaultPageBELayout}.value =
EXT:{$templatePath.private}/Templates/Default.html
# HOME PAGE
{$plugin.tx_thisTemplateExtension.website.config.uidHomeBELayout}= TEXT
{$plugin.tx_thisTemplateExtension.website.config.uidHomeBELayout}.value =
EXT:{$templatePath.private}/Templates/Home.html
# EMPTY PAGE
{$plugin.tx_thisTemplateExtension.website.config.uidEmptyBELayout}= TEXT
{$plugin.tx_thisTemplateExtension.website.config.uidEmptyBELayout}.value =
EXT:{$templatePath.private}/Templates/Empty.html
Ein Unternehmen der Finanz Informatik
Auszug aus der Constants.txt
plugin {
tx_thisTemplateExtension {
website {
config {
# cat=plugin.tx_thisTemplateExtension/website/config; type=int; label=PID where
backend layouts are stored
pidBELayout =
}
}
}
Ein Unternehmen der Finanz Informatik
Layouts, Templates, Partials ...
Im FLUIDTEMPLATE verknüpfen wir die BE-Layouts
mit der Template-Struktur der Extension. In den Templates
weisen wir dem Inhalt das Layout zu. Die Partials sind
Bibliotheken.
<f:render partial="GoogleTagManager" />
<f:render partial="Header" />
<section>
<div class="container">
<!–TYPO3SEARCH_begin–>
<f:render section="Page" />
<!–TYPO3SEARCH_end–>
</div>
</section>
<f:render partial="Footer" />
Ein Unternehmen der Finanz Informatik
Frontend-Layouts
Mit Hilfe von FE Layouts kann das gleiche
Content Element redaktionell gesteuert ein
anderes Aussehen bekommen.
Ein Unternehmen der Finanz Informatik
Überschreiben von Extension-Templates
plugin.tx_faq.view {
partialRootPath >
partialRootPaths{
0 = EXT:faq/Resources/Private/Partials/
1 = EXT:tx_exampleExtension/Resources/Private/EXT/Faq/Partials/
}
layoutRootPath >
layoutRootPaths{
0 = EXT:faq/Resources/Private/Layouts/
1 = EXT:tx_exampleExtension/Resources/Private/EXT/Faq/Layouts/
}
templateRootPath >
templateRootPaths{
0 = EXT:faq/Resources/Private/Templates/
1 = EXT:tx_exampleExtension/Resources/Private/EXT/Faq/Templates/
}
}
Ein Unternehmen der Finanz Informatik
Ein Unternehmen der Finanz Informatik
Eigene Fluid-Styled-Content-Elemente erstellen
Neue Content-Elemente werden über PageTS in das
Backend integriert, in der ext_tables.php gesteuert,
in der Configuration/TCA/Overrides/tt_content.php für das
Backend aufbereitet und dann per TS
konfiguriert.
Ein Unternehmen der Finanz Informatik
Page-TS Config
mod.wizards.newContentElement.wizardItems.common {
elements {
sf_bgImgWText {
iconIdentifier = content-textpic
title =
LLL:EXT:sf_apptemplate/Resources/Private/Language/locallang_sfContentElements.xlf:w
izard.title
description =
LLL:EXT:sf_apptemplate/Resources/Private/Language/locallang_sfContentElements.xlf:w
izard.description
tt_content_defValues {
CType = sf_bgImgWText
}
}
show := addToList(sf_bgImgWText, ...)
}
Ein Unternehmen der Finanz Informatik
ext_tables.php
// Add a flexform to the CType
// 1: sf_bgImgWText
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexF
ormValue(
'',
'FILE:EXT:sf_apptemplate/Configuration/FlexForms/sf_bgImgWText
.xml',
'sf_bgImgWText'
);
Ein Unternehmen der Finanz Informatik
TCA/Overrides/tt_content.php, Teil 1
// Add the CTypes "sf_bgImgWText, sf_twocolumns"
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
'tt_content',
'CType',
[
'LLL:EXT:sf_apptemplate/Resources/Private/Language/locallang_sfContentElements.xlf:
wizard.title',
'sf_bgImgWText',
'content-image'
],
'textmedia',
'after'
);
Ein Unternehmen der Finanz Informatik
TCA/Overrides/tt_contnet.php, Teil 2
// Define what fields to display
$GLOBALS['TCA']['tt_content']['types']['sf_bgImgWText'] = [
'showitem‘ => '
--palette--;' . $frontendLanguageFilePrefix . 'palette.general;general,
--palette--;' . $frontendLanguageFilePrefix . 'palette.header;header,rowDescription,
pi_flexform, (...)
-> https://docs.typo3.org/typo3cms/TCAReference/ExtendingTca/Examples/Index.html
Ein Unternehmen der Finanz Informatik
Ein Unternehmen der Finanz Informatik
Die Backend-Ansicht
Ein Unternehmen der Finanz Informatik
Detaillierte Anleitung für eigene FSC
www.usetypo3.com/custom-fsc-element.html
Ein Unternehmen der Finanz Informatik
Strukturiertes SASS
Ähnlich wie in der Template-Extension gibt es hier
die eine Datei: styles.scss. Diese bündelt alles
Wichtige: Variablen, Mixins und die
responsiven Erweiterungsdateien
in der richtigen Reihenfolge.
Ein Unternehmen der Finanz Informatik
Je schneller, desto besser ...
• Komprimiere CSS im SASS Compiler:
Sass watch styles.scss:styles.css --style compressed
• TYPO3
config.concatenateCss = 1
config.concatenateJs = 1
• Nutze Sprites, icon-fonts
Ein Unternehmen der Finanz InformatikEin Unternehmen der Finanz Informatik
Für Aufmerksamkeit und Bühne. Und für Feedback:
@thorgri, Xing, LinkedIn
DANKE.