Individuelle Inhaltselemente für die einfachere Seitepflege. Der Vortrag zeigt, wie einfach dieses mit den Bord mitt eln von TYPO3 umzusetzen ist.
TYPO3 Content Elemente mit Fluid
TYPO3camp RheinRuhr 2013
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 2wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Hallo Welt!
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 3wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
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
Wir gestalten heute für das Web von morgen
#RWD ist Pflichtprogramm
Leute - wir haben da ein Problemchen.
CSS_Syled_Content
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 6wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 7wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 8wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 9wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 10wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
CSS_Styled_Content Magic macht daraus
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 11wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 12wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Der Programmierer
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 13wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
LIKE ABOSS
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 14wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Der Redakteur
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 15wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
FOREVERALONE
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 16wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Das hätten wir gebraucht:Headline
ImageText
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 17wfp:2 GmbH & 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
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 19wfp:2 GmbH & 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.
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 20wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Wir geben unseren Kunden Werkzeuge ihre Webseite
zu zerstören…
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 21wfp:2 GmbH & 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.
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 22wfp:2 GmbH & 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.
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 24wfp:2 GmbH & 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?
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 25wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Frage:Wie lange habt ihr dafür gebraucht?
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 26wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Frage:Wurde es tatsächlich benötigt?
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 27wfp:2 GmbH & 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.
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 28wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Mein Fazit zu CSS_Styled_Content
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 29wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
CSS_Styled_Content ist ein extremumfangreiches Rendering Beispiel
dafür was mit tt_content und TYPO3möglich ist.
Es hat im Produktivbetrieb seine Daseinsberechtigung verloren.
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 30wfp:2 GmbH & 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
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 32wfp:2 GmbH & 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
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 33wfp:2 GmbH & 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
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 34wfp:2 GmbH & 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
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 36wfp:2 GmbH & 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
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 37wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Basic Extbase Controllertypo3conf/ext/bk2k_content_elements/Classes/Controller/CustomElementController.php
<?phpnamespace 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); } }?>
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 38wfp:2 GmbH & 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>
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 39wfp:2 GmbH & 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'];
?>
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 40wfp:2 GmbH & 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);
?>
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 41wfp:2 GmbH & 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
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 43wfp:2 GmbH & 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
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 44wfp:2 GmbH & 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>
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 45wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
ext_tables.phptypo3conf/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'];
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 46wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
ext_localconf.php - Teil 1typo3conf/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);
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 47wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
ext_localconf.php - Teil 2typo3conf/ext/bk2k_content_elements/ext_localconf.php
/** * Include TypoScript for tt_content after static */$customFluidContentElementTypoScriptSetup = trim('tt_content.bk2kcontentelements_customfluidelement = COAtt_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);
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 48wfp:2 GmbH & 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
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 50wfp:2 GmbH & 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
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 53wfp:2 GmbH & 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.
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 54wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Fragen?
Benjamin Kott | benjamin.kot[email protected] 10.05.2013 Seite 55wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
TYPO3 Content Elemente mit Fluid
Danke!
facebook.com/benjamin.kotttwitter.com/benjaminkottbk2k.info
Top Related