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:

thorsten.griebenow@starfinanz.de

@thorgri, Xing, LinkedIn

DANKE.