TYPO3 Content Elemente mit Fluid

Präsentation zum Thema: "TYPO3 Content Elemente mit Fluid"—  Präsentation transkript:

1 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. TYPO3camp RheinRuhr 2013

2 Hallo Welt!

3 Benjamin Kott ist 28 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

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

5 Leute - wir haben da ein Problemchen. CSS_Syled_Content

6

7

8

9

10 CSS_Styled_Content Magic macht daraus

11

12 Der Programmierer

13 LIKE A BOSS

14 Der Redakteur

15 FOREVER ALONE

16 Das hätten wir gebraucht: Headline Image Text

17 Wo ist das Problem? Die Felder sind doch alle optional!

18 Problem 1: Der Redakteur wird zum Designer

19 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.

20 Wir geben unseren Kunden Werkzeuge ihre Webseite zu zerstören…
Was ist Content Management

21 … indem wir ihnen zu viele Möglichkeiten geben ihre Website selbst zu gestalten.

22 „A CMS is not a website design tool.“ Rachel Andrew
Was ist Content Management

23 Problem 2: Wir erzeugen massiven Overhead in der Umsetzung.

24 Frage: Wer hat schon mal CSS_Styled_Content mit allem Optionen die zur Verfügung stehen für ein RWD Projekt umgeschrieben?

25 Frage: Wie lange habt ihr dafür gebraucht?

26 Frage: Wurde es tatsächlich benötigt?

27 Jedes mal wenn so etwas gemacht wird, wird achtlos mit dem Budget des Kunden umgegangen.

28 Mein Fazit zu CSS_Styled_Content

29 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.

30 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

31 Es gibt Hoffnung. Custom Content Elements

32 Welche Benefits ergeben sich?
Maximale Flexibilität bei minimalem Aufwand Erleichterte Pflege für Redakteure Weniger Fehlerquellen bei #RWD Designs Glücklichere Kunden

33 Was müssen wir dafür tun?
Bestimmen der benötigten Content Elemente Erstellen der Content Elemente

34 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.

35 Content Element mit Extbase

36 Was benötigen wir? Extbase Controller TCA für das Backend Fluid Templates Das Content Element muss registriert und konfiguriert werden

37 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); ?>

38 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>

39 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']; ?>

40 ext_localconf. php typo3conf/ext/bk2k_content_elements/ext_localconf
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', ), \TYPO3\CMS\Extbase\Utility\ExtensionUtility::PLUGIN_TYPE_CONTENT_ELEMENT ); ?>

41 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.

42 Content Element mit Fluidtemplate

43 Was benötigen wir? TCA für das Backend Fluid Templates Das Content Element muss registriert und konfiguriert werden Ein wenig TypoScript

44 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>

45 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'];

46 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 );

47 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 );

48 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.

49 Zusammenfassung

50 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

51 Ausblick – Hands On

52 Daten stehen bereit. Resources

53 Alle Beispiele sind auf GitHub verfügbar.

54 Fragen?

55 Danke! facebook.com/benjamin.kott twitter.com/benjaminkott bk2k.info