TYPO3 Content Elemente mit Fluid

Individuelle Inhaltselemente für die einfachere Seitepflege. Der Vortrag zeigt, wie
einfach dieses mit den Bord-mit-teln von TYPO3 umzusetzen ist. TYPO3 Content Elemente mit Fluid

Benjamin Kott | [email protected] 10.05.2013 Seite 2 wfp:2 GmbH &
Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Hallo Welt!

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Benjamin Kott … ist 29 Jahre und haust in Düsseldorf … hat seit 14 Jahren eine Affäre mit dem Internet … macht Internet mit bunt und so … empfindet #RWD als Selbstverständlichkeit … wird von der wfp:2 versorgt … hat viel Spaß! Kontakt • facebook.com/benjamin.kott • twitter.com/benjaminkott • bk2k.info

Wir gestalten heute für das Web von morgen #RWD ist
Pflichtprogramm

Leute - wir haben da ein Problemchen. CSS_Syled_Content

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid CSS_Styled_Content Magic macht daraus

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Der Programmierer

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid LIKE A BOSS

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Der Redakteur

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid FOREVER ALONE

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Das hätten wir gebraucht: Headline Image Text

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Wo ist das Problem? Die Felder sind doch alle optional!

Problem 1: Der Redakteur wird zum Designer

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Der Redakteur ist zu 99,999…%* kein Designer und soll sich über das Design auch keine Gedanken machen. Es ist nicht sein Job! *Dieser Prozentsatz ist ein geschätzter Wert basierend auf meinen Erfahrungen.

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Wir geben unseren Kunden Werkzeuge ihre Webseite zu zerstören…

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid … indem wir ihnen zu viele Möglichkeiten geben ihre Website selbst zu gestalten.

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid „A CMS is not a website design tool.“ Rachel Andrew

Problem 2: Wir erzeugen massiven Overhead in der Umsetzung.

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Frage: Wer hat schon mal CSS_Styled_Content mit allem Optionen die zur Verfügung stehen für ein RWD Projekt umgeschrieben?

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Frage: Wie lange habt ihr dafür gebraucht?

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Frage: Wurde es tatsächlich benötigt?

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Jedes mal wenn so etwas gemacht wird, wird achtlos mit dem Budget des Kunden umgegangen.

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Mein Fazit zu CSS_Styled_Content

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid CSS_Styled_Content ist ein extrem umfangreiches Rendering Beispiel dafür was mit tt_content und TYPO3 möglich ist. Es hat im Produktivbetrieb seine Daseinsberechtigung verloren.

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid • 90% der Funktionen werden nicht benötigt • Schwierig in der Konfiguration, da es immer komplexer wird • Derzeit nicht #RWD kompatibel • Anpassungskosten übersteigen den Nutzen • Frameworks umständlich zu implementieren

Es gibt Hoffnung. Custom Content Elements

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Welche Benefits ergeben sich? • Maximale Flexibilität bei minimalem Aufwand • Erleichterte Pflege für Redakteure • Weniger Fehlerquellen bei #RWD Designs • Glücklichere Kunden

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Was müssen wir dafür tun? • Bestimmen der benötigten Content Elemente • Erstellen der Content Elemente

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Möglichkeiten Content Elemente zu erstellen und zu rendern • Extbase • Fluidtemplate Standalone • … Es gibt noch weitere Möglichkeiten Content Elemente zu rendern wir beschränken uns im Zuge der Demos jedoch auf diese beiden Varianten.

Content Element mit Extbase

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Was benötigen wir? • Extbase Controller • TCA für das Backend • Fluid Templates • Das Content Element muss registriert und konfiguriert werden

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Basic Extbase Controller typo3conf/ext/bk2k_content_elements/Classes/Controller/CustomElementController.php <?php namespace Bk2k\Bk2kContentElements\Controller; class CustomElementController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionController { protected $contentObj; protected $data; public function initializeAction(){ $this->contentObj = $this->configurationManager->getContentObject(); $this->data = $this->contentObj->data; } public function renderAction(){ $this->view->assign('data',$this->data); } } ?>

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Basic Fluid Template typo3conf/ext/bk2k_content_elements/Resources/Private/Templates/CustomElement/Render.html {namespace ce = Bk2k\Bk2kContentElements\ViewHelpers} <ce:fal data="{data}" as="images"> <f:if condition="{images}"> <f:then> <f:for each="{images}" as="image"> <f:image src="{image.publicUrl}" id="I{image.uid}" title="{image.title}" alt="{image.alternative}" /> </f:for> </f:if> </ce:fal> <f:format.html>{data.bodytext}</f:format.html>

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid ext_tables.php typo3conf/ext/bk2k_content_elements/ext_tables.php <?php if(!defined('TYPO3_MODE')){ die('Access denied.'); } \TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerPlugin( 'Bk2k.'.$_EXTKEY, 'CustomContentElement', 'Custom Content Element – a of textpic' ); $typeName = 'bk2kcontentelements_customcontentelement'; \TYPO3\CMS\Core\Utility\GeneralUtility::loadTCA('tt_content'); $TCA['tt_content']['types'][$typeName]['showitem'] = $TCA['tt_content']['types']['textpic']['showitem']; ?>

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid ext_localconf.php typo3conf/ext/bk2k_content_elements/ext_localconf.php <?php if(!defined('TYPO3_MODE')){ die('Access denied.'); } \TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin( 'Bk2k.'.$_EXTKEY, 'CustomContentElement', array( 'CustomElement' => 'render', ), array( ), \TYPO3\CMS\Extbase\Utility\ExtensionUtility::PLUGIN_TYPE_CONTENT_ELEMENT ); ?>

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Das war es schon. • TypoScript muss nicht erstellt und eingebunden werden da das generierte Default TS ausreicht. • Wir haben vollen Zugriff auf den kompletten Datensatz über {data} im Fluidtemplate • Daten vom FAL müssen im Controller bereit gestellt oder wie hier ein ViewHelper genutzt werden.

Content Element mit Fluidtemplate

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Was benötigen wir? • TCA für das Backend • Fluid Templates • Das Content Element muss registriert und konfiguriert werden • Ein wenig TypoScript

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Basic Fluid Template typo3conf/ext/bk2k_content_elements/Resources/Private/Templates/CustomElement/Render.html {namespace ce = Bk2k\Bk2kContentElements\ViewHelpers} <ce:fal data="{data}" as="images"> <f:if condition="{images}"> <f:then> <f:for each="{images}" as="image"> <f:image src="{image.publicUrl}" id="I{image.uid}" title="{image.title}" alt="{image.alternative}" /> </f:for> </f:if> </ce:fal> <f:format.html>{data.bodytext}</f:format.html>

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid ext_tables.php typo3conf/ext/bk2k_content_elements/ext_tables.php <?php if(!defined('TYPO3_MODE')){ die('Access denied.'); } $typeName = 'bk2kcontentelements_customfluidelement'; \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPlugin( array( 'Custom Content Element Fluid', $typeName ), 'CType' ); \TYPO3\CMS\Core\Utility\GeneralUtility::loadTCA('tt_content'); $TCA['tt_content']['types'][$typeName]['showitem'] = $TCA['tt_content']['types']['textpic']['showitem'];

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid ext_localconf.php - Teil 1 typo3conf/ext/bk2k_content_elements/ext_localconf.php <?php if(!defined('TYPO3_MODE')){ die('Access denied.'); } /** * Include TypoScript for tt_content before static */ $customFluidContentElementTypoScriptConstants = trim(' plugin.tx_bk2kcontentelements { view { templateRootPath = EXT:bk2k_content_elements/Resources/Private/Templates/ partialRootPath = EXT:bk2k_content_elements/Resources/Private/Partials/ layoutRootPath = EXT:bk2k_content_elements/Resources/Private/Layouts/ } } '); \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTypoScript( $_EXTKEY, 'constants', $customFluidContentElementTypoScriptConstants );

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid ext_localconf.php - Teil 2 typo3conf/ext/bk2k_content_elements/ext_localconf.php /** * Include TypoScript for tt_content after static */ $customFluidContentElementTypoScriptSetup = trim(' tt_content.bk2kcontentelements_customfluidelement = COA tt_content.bk2kcontentelements_customfluidelement { 10 = < lib.stdheader 20 = FLUIDTEMPLATE 20 { file = {$plugin.tx_bk2kcontentelements.view.templateRootPath}CustomElement/Render.html partialRootPath = {$plugin.tx_bk2kcontentelements.view.partialRootPath} layoutRootPath = {$plugin.tx_bk2kcontentelements.view.layoutRootPath} } } '); \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTypoScript( $_EXTKEY, 'setup', $customFluidContentElementTypoScriptSetup, 43 );

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Das war es schon. • Das TypoScript wird direkt in der in den ExtTables geschrieben damit es auf jedenfall verfügbar ist. • Wir haben vollen Zugriff auf den kompletten Datensatz über {data} im Fluidtemplate • Daten vom FAL müssen im Controller bereit gestellt oder wie hier ein ViewHelper genutzt werden.

Zusammenfassung

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid • Es ist einfach Content Elemente zu erstellen • Dank Fluid wird das rendern zum Kinderspiel • Wir brauchen kein CSS_Styled_Content • Im Idealfall sparen wir Zeit

Ausblick – Hands On

Daten stehen bereit. Resources

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid https://github.com/benjaminkott/bk2k_content_elements Alle Beispiele sind auf GitHub verfügbar.

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Fragen?

Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Danke! facebook.com/benjamin.kott twitter.com/benjaminkott bk2k.info

TYPO3 Content Elemente mit Fluid

TYPO3 Content Elemente mit Fluid

More Decks by Benjamin Kott

Other Decks in Programming

Featured

Transcript