Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TYPO3 Content Elemente mit Fluid

TYPO3 Content Elemente mit Fluid

Individuelle Inhaltselemente für die einfachere Seitenpflege. Der Vortrag zeigt, wie einfach dieses mit den Bordmitteln von TYPO3 umzusetzen ist.

Alle Beispiele sind auf GitHub verfügbar.
https://github.com/benjaminkott/bk2k_content_elements
https://github.com/benjaminkott/t3crr_contentelements

Erweiterte Beispiele vom TYPO3camp RheinRuhr 2013
http://www.typo3camp-rheinruhr.de/sessions/2013/session/show/typo3-content-elemente-mit-fluid.html

Kontakt:
https://www.facebook.com/benjamin.kott
https://twitter.com/benjaminkott
http://www.bk2k.info/

Benjamin Kott

May 10, 2013
Tweet

More Decks by Benjamin Kott

Other Decks in Programming

Transcript

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

    View full-size slide

  2. 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!

    View full-size slide

  3. Benjamin Kott | [email protected] 10.05.2013 Seite 3
    wfp:2 GmbH & 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

    View full-size slide

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

    View full-size slide

  5. Leute - wir haben da ein Problemchen.
    CSS_Syled_Content

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Benjamin Kott | [email protected] 10.05.2013 Seite 10
    wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
    TYPO3 Content Elemente mit Fluid
    CSS_Styled_Content
    Magic macht daraus

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Benjamin Kott | [email protected] 10.05.2013 Seite 16
    wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
    TYPO3 Content Elemente mit Fluid
    Das hätten wir gebraucht:
    Headline
    Image
    Text

    View full-size slide

  17. Benjamin Kott | [email protected] 10.05.2013 Seite 17
    wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
    TYPO3 Content Elemente mit Fluid
    Wo ist das Problem?
    Die Felder sind doch alle optional!

    View full-size slide

  18. Problem 1:
    Der Redakteur wird zum Designer

    View full-size slide

  19. Benjamin Kott | [email protected] 10.05.2013 Seite 19
    wfp: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.

    View full-size slide

  20. Benjamin Kott | [email protected] 10.05.2013 Seite 20
    wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
    TYPO3 Content Elemente mit Fluid
    Wir geben unseren Kunden
    Werkzeuge ihre Webseite
    zu zerstören…

    View full-size slide

  21. Benjamin Kott | [email protected] 10.05.2013 Seite 21
    wfp: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.

    View full-size slide

  22. Benjamin Kott | [email protected] 10.05.2013 Seite 22
    wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
    TYPO3 Content Elemente mit Fluid
    „A CMS is not a website design tool.“
    Rachel Andrew

    View full-size slide

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

    View full-size slide

  24. Benjamin Kott | [email protected] 10.05.2013 Seite 24
    wfp: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?

    View full-size slide

  25. Benjamin Kott | [email protected] 10.05.2013 Seite 25
    wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
    TYPO3 Content Elemente mit Fluid
    Frage:
    Wie lange habt ihr dafür gebraucht?

    View full-size slide

  26. Benjamin Kott | [email protected] 10.05.2013 Seite 26
    wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
    TYPO3 Content Elemente mit Fluid
    Frage:
    Wurde es tatsächlich benötigt?

    View full-size slide

  27. Benjamin Kott | [email protected] 10.05.2013 Seite 27
    wfp: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.

    View full-size slide

  28. Benjamin Kott | [email protected] 10.05.2013 Seite 28
    wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
    TYPO3 Content Elemente mit Fluid
    Mein Fazit zu CSS_Styled_Content

    View full-size slide

  29. Benjamin Kott | [email protected] 10.05.2013 Seite 29
    wfp:2 GmbH & 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.

    View full-size slide

  30. Benjamin Kott | [email protected] 10.05.2013 Seite 30
    wfp: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

    View full-size slide

  31. Es gibt Hoffnung.
    Custom Content Elements

    View full-size slide

  32. Benjamin Kott | [email protected] 10.05.2013 Seite 32
    wfp: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

    View full-size slide

  33. Benjamin Kott | [email protected] 10.05.2013 Seite 33
    wfp: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

    View full-size slide

  34. Benjamin Kott | [email protected] 10.05.2013 Seite 34
    wfp: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.

    View full-size slide

  35. Content Element mit Extbase

    View full-size slide

  36. Benjamin Kott | [email protected] 10.05.2013 Seite 36
    wfp: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

    View full-size slide

  37. Benjamin Kott | [email protected] 10.05.2013 Seite 37
    wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
    TYPO3 Content Elemente mit Fluid
    Basic Extbase Controller
    typo3conf/ext/bk2k_content_elements/Classes/Controller/CustomElementController.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);
    }
    }
    ?>

    View full-size slide

  38. Benjamin Kott | [email protected] 10.05.2013 Seite 38
    wfp: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}




    id="I{image.uid}"
    title="{image.title}"
    alt="{image.alternative}"
    />



    {data.bodytext}

    View full-size slide

  39. Benjamin Kott | [email protected] 10.05.2013 Seite 39
    wfp: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
    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'];
    ?>

    View full-size slide

  40. Benjamin Kott | [email protected] 10.05.2013 Seite 40
    wfp: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
    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
    );
    ?>

    View full-size slide

  41. Benjamin Kott | [email protected] 10.05.2013 Seite 41
    wfp: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.

    View full-size slide

  42. Content Element mit Fluidtemplate

    View full-size slide

  43. Benjamin Kott | [email protected] 10.05.2013 Seite 43
    wfp: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

    View full-size slide

  44. Benjamin Kott | [email protected] 10.05.2013 Seite 44
    wfp: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}




    id="I{image.uid}"
    title="{image.title}"
    alt="{image.alternative}"
    />



    {data.bodytext}

    View full-size slide

  45. Benjamin Kott | [email protected] 10.05.2013 Seite 45
    wfp: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
    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'];

    View full-size slide

  46. Benjamin Kott | [email protected] 10.05.2013 Seite 46
    wfp:2 GmbH & 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
    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
    );

    View full-size slide

  47. Benjamin Kott | [email protected] 10.05.2013 Seite 47
    wfp:2 GmbH & 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
    );

    View full-size slide

  48. Benjamin Kott | [email protected] 10.05.2013 Seite 48
    wfp: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.

    View full-size slide

  49. Zusammenfassung

    View full-size slide

  50. Benjamin Kott | [email protected] 10.05.2013 Seite 50
    wfp: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

    View full-size slide

  51. Ausblick – Hands On

    View full-size slide

  52. Daten stehen bereit.
    Resources

    View full-size slide

  53. Benjamin Kott | [email protected] 10.05.2013 Seite 53
    wfp: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.

    View full-size slide

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

    View full-size slide

  55. Benjamin Kott | [email protected] 10.05.2013 Seite 55
    wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com
    TYPO3 Content Elemente mit Fluid
    Danke!
    facebook.com/benjamin.kott
    twitter.com/benjaminkott
    bk2k.info

    View full-size slide