Individuelle Inhaltselemente für die einfachere Seitepflege. Der Vortrag zeigt, wie einfach dieses...

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.kott@wfp2.com 10.05.2013 Seite 2wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com

Hallo Welt!

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

CSS_Styled_Content Magic macht daraus

Der Programmierer

LIKE ABOSS

Der Redakteur

FOREVERALONE

Das hätten wir gebraucht:Headline

ImageText

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

Problem 1:Der Redakteur wird zum Designer

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.

Wir geben unseren Kunden Werkzeuge ihre Webseite

zu zerstören…

… indem wir ihnen zu viele Möglichkeiten

geben ihre Website selbst zu gestalten.

„A CMS is not a website design tool.“ Rachel Andrew

Problem 2:Wir erzeugen massiven Overhead

in der Umsetzung.

Frage:Wer hat schon mal CSS_Styled_Content mit

allem Optionen die zur Verfügung stehen für ein RWD Projekt umgeschrieben?

Frage:Wie lange habt ihr dafür gebraucht?

Frage:Wurde es tatsächlich benötigt?

Jedes mal wenn so etwas gemacht wird, wird achtlos mit dem Budget

des Kunden umgegangen.

Mein Fazit zu CSS_Styled_Content

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.

• 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

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

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

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

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

konfiguriert werden

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

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>

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

ext_localconf.php typo3conf/ext/bk2k_content_elements/ext_localconf.php

\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin( 'Bk2k.'.$_EXTKEY, 'CustomContentElement', array( 'CustomElement' => 'render', ), array( ), \TYPO3\CMS\Extbase\Utility\ExtensionUtility::PLUGIN_TYPE_CONTENT_ELEMENT);

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

Was benötigen wir?• TCA für das Backend• Fluid Templates• Das Content Element muss registriert und

konfiguriert werden• Ein wenig TypoScript

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>

ext_tables.phptypo3conf/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'];

ext_localconf.php - Teil 1typo3conf/ext/bk2k_content_elements/ext_localconf.php

/** * 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);

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

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

• 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

https://github.com/benjaminkott/bk2k_content_elements

Alle Beispiele sind auf GitHub verfügbar.

Fragen?

Danke!

facebook.com/benjamin.kotttwitter.com/benjaminkottbk2k.info

Individuelle Inhaltselemente für die einfachere Seitepflege. Der Vortrag zeigt, wie einfach dieses...

Documents

Typo3 advanced

12.10.2006Dipl.Ing R.Heintz / DESY Vollautomatisches Serverbackup mit Windows-Bordmitteln DESY Deutsches Elektronen Synchrotron Dipl.Ing. Ralph Heintz

Einführung in Typo3 Beim Aufruf unserer Internetpräsenz bei leerem Typo3 erhalten wir folgende Fehlermeldung:

SQLTXPLAIN und SQLHC - Performance-Diagnose mit Bordmitteln

TYPO3 Neos Ein technischer Überblick · Content Management Framework“ • TYPO3 CMS existiert seit 1998 / Erfunden vom Dänen Kaspar Skårhøj ... TYPO3 Fluid - modernes Templating

TYPO3 – das führende Open Source-CMS€¦ · TYPO3 – das führende Open Source-CMS Funktionen und Vorteile im Überblick Leistungsmerkmale im Überblick Der Einsatz von TYPO3

TYPO3 Version 4.3 Einführung für Web-Redakteure · 2010. 11. 11. · TYPO3 Einführung Version 1.5 vom 11.06.10 Seite 7 1 Allgemeines 1.1 Einführung 1.1.1 Was ist TYPO3? TYPO3

Arbeit mit TYPO3 - typo3-fuer-redakteure.de · 20 | Kapitel 2: Schnelleinstieg in die Arbeit mit TYPO3 Login Um sich in der Verwaltung von TYPO3, dem Backend, anzumelden, benötigen

LaTeX für Abschlussarbeiten - Zeilenabstand · Zeilenabstand G. Partosch Situation Bordmittel setspace Literatur Anpassungenmit»Bordmitteln«(1) RelevanteAnweisungen Anweisung Bedeutung

„TYPO3-basierte Portalanwendungen auf Knopfdruck“€¦ · TYPO3-Portalanwendungen auf Knopfdruck? (TYPO3-Backend) • Einfache Konfiguration bei Bedarf eines neuen Fachportals

Composer und TYPO3

Landesportal Rheinland-Pfalz - TYPO3 Akademie · 2009. 11. 3. · von TYPO3. • 2008: TYPO3 wird zusätzlich zu einem bereits etablierten und kommerziellen CMS weiterer Landesstandard

Webhosting Typo3 Web Rackspace Standleitung Security System · 2018. 10. 17. · Typo3 Security Web Softwareentwicklung Webhosting Managed Server Cloud TYPO3 Joomla! Webhosting Standleitungen

TYPO3 CMS 7

TYPO3 4.6 --rebasetypovision.de/fileadmin/slides/TYPO3-4.6-Die-Neuerungen-typovision.… · TYPO3 4.6 --REBASE • Bis TYPO3 4.5 LTS • Versionskontrolle: SVN • Review: RFC in

DER WEG IN EINE EINFACHERE UND MODERNERE ZUKUNFT

Warum gerade TYPO3?

Websiteentwicklung auf Basis vonTYPO3 Unterlagen zur ...Certified TYPO3 Integrator Der „Certified TYPO3 Integrator“ ist eine von der TYPO3 Association entwickelte Zertifizierung

TYPO3 CMS 8.5 - What’s New · Upgrades sind nur möglich von TYPO3 CMS 7.6 LTS oder 8.x TYPO3 CMS < 7.6 LTS sollten zunächst auf TYPO3 CMS 7.6 LTS aktualisiert werden ... Formulare

TYPO3 CMS 7.0 - What’s New - Patrick Lobacherlobacher.de/files/TYPO3-CMS-7.0-Die-Neuerungen-pluswerk.pdf · Einführung TYPO3 CMS Roadmap Folgende Roadmap wurde vom TYPO3 CMS Team