Der Weg weg von TemplaVoila
•
7 gefällt mir•12,267 views
Kurze Einführung zu Templating in TYPO3. BackendLayouts mit FLUIDTEMPLATE, Mehrspalten-Container mit der Extension gridelements und flexible Inhaltselemente (FCE) mit extbase/fluid.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Der Weg weg von TemplaVoila
- 1. DESIGN + DIPLOMATIE Wir pflegen gute Beziehungen.
- 2. Der Weg weg von TemplaVoila -‐ #t3cs12 Der Weg weg von TemplaVoila ;-‐)
- 3. Der Weg weg von TemplaVoila -‐ #t3cs12 Wer bin ich? • Tobias Liegl • TwiCer: @chapi • arbeitet bei JANDA+ROSCHER in Regensburg • www.janda-‐roscher.de • schreibt auf typo3blogger.de
- 4. Der Weg weg von TemplaVoila -‐ #t3cs12 Session-‐Überblick • TemplaVoila? FCE? • Inhaltselemente „advanced“ • Backend-‐Layouts mit FLUIDTEMPLATE • Mehrspal]ge Struktur-‐Elemente mit „gridelements“ • FCE mit extbase/fluid
- 5. Der Weg weg von TemplaVoila -‐ #t3cs12 TemplaVoila? FCE?
- 6. Der Weg weg von TemplaVoila -‐ #t3cs12 TemplaVoila? • Alterna]ver Template-‐Mechnismus • Templates können in der Regel ohne Anpassung integriert werden
- 7. Der Weg weg von TemplaVoila -‐ #t3cs12 TemplaVoila?
- 8. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE? • Flexible Content Element • Wird in der Regel verwendet für • mehrspal]ge Container • besondere Inhaltselemente
- 9. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE?
- 10. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE?
- 11. Der Weg weg von TemplaVoila -‐ #t3cs12 Inhaltselemente „advanced“
- 12. Der Weg weg von TemplaVoila -‐ #t3cs12 Inhaltselemente „advanced“ Möglichkeiten mit Standard-‐Elementen • Einrückung und Rahmen • über TS konfigurierbar • z. B. zus. DIV um bestehenden HTML-‐Code
- 13. Der Weg weg von TemplaVoila -‐ #t3cs12 Inhaltselemente „advanced“ Möglichkeiten mit Standard-‐Elementen -‐ Einrückung und Rahmen # Im PageTS TCEFORM.tt_content.section_frame { addItems.2 = Produkt-‐Element (Bilder mit Rahmen) addItems.3 = Teaser-‐Box gelb (Startseite) addItems.10 = Teaser-‐Box blau (Startseite) # remove additional options removeItems = 1, 4, 5, 6 , 11, 12, 20, 21 }
- 14. Der Weg weg von TemplaVoila -‐ #t3cs12 Inhaltselemente „advanced“ Möglichkeiten mit Standard-‐Elementen -‐ Einrückung und Rahmen # Im TS-‐Setup C_content.stdWrap.innerWrap.cObject.2 = TEXT C_content.stdWrap.innerWrap.cObject.2.value = <div class="productBox">|</div> C_content.stdWrap.innerWrap.cObject.3 = TEXT C_content.stdWrap.innerWrap.cObject.3.value = <div class="teaserBox">|</div> C_content.stdWrap.innerWrap.cObject.10 = TEXT C_content.stdWrap.innerWrap.cObject.10.value = <div class="teaserBoxAlt">|</div>
- 15. Der Weg weg von TemplaVoila -‐ #t3cs12 Inhaltselemente „advanced“ Möglichkeiten mit Standard-‐Elementen -‐ Layout • über TS unterscheidbar und Output entsprechend steuerbar
- 16. Der Weg weg von TemplaVoila -‐ #t3cs12 Inhaltselemente „advanced“ Möglichkeiten mit Standard-‐Elementen -‐ Layout
- 17. Der Weg weg von TemplaVoila -‐ #t3cs12 Backend-‐Layouts mit FLUIDTEMPLATE
- 18. Der Weg weg von TemplaVoila -‐ #t3cs12 Backend-‐Layouts mit FLUIDTEMPLATE • Backend-‐Layout über den „Grid wizard“ anlegen (im System-‐Ordner „Allgemeine Datensatzsammlung“)
- 19. Der Weg weg von TemplaVoila -‐ #t3cs12 Backend-‐Layouts mit FLUIDTEMPLATE • Neues Backend-‐Layout in den Seiteneigenschanen über den Reiter „Erscheinungsbild“ auswählen
- 20. Der Weg weg von TemplaVoila -‐ #t3cs12 Backend-‐Layouts mit FLUIDTEMPLATE • Ansicht im Backend entspricht dem ausgewählten Backend-‐Layout
- 21. Der Weg weg von TemplaVoila -‐ #t3cs12 Backend-‐Layouts mit FLUIDTEMPLATE • Verknüpfung mit dem Frontend page = PAGE page.10 = FLUIDTEMPLATE page.10 { file.stdWrap.cObject = CASE file.stdWrap.cObject { # slide the template key.data = levelfield:-‐1, backend_layout_next_level, slide key.override.field = backend_layout # default template file default = TEXT default.value = fileadmin/templates/index.html # template file for backend-‐layout with ID 2 2 = TEXT 2.value = fileadmin/templates/subpage.html } }
- 22. Der Weg weg von TemplaVoila -‐ #t3cs12 Backend-‐Layouts mit FLUIDTEMPLATE • Inhalte für das Template vorbereiten lib.field_header < styles.content.get lib.field_header.select.where = colPos = 2 page.10 { variables { content < styles.content.get } }
- 23. Der Weg weg von TemplaVoila -‐ #t3cs12 Backend-‐Layouts mit FLUIDTEMPLATE • Die Template-‐Datei <div id="header"> <f:cObject typoscriptObjectPath="lib.field_header" /> </div> <div id="content"> {content -‐> f:format.raw()} </div>
- 24. Der Weg weg von TemplaVoila -‐ #t3cs12 MehrspalQge Struktur-‐Elemente mit „gridelements“
- 25. Der Weg weg von TemplaVoila -‐ #t3cs12 MehrspalQge Struktur-‐Elemente mit „gridelements“ • Extension von Jo Hasenau • Im TER erhältlich • Alterna]ve zur Extension mul]column • Gute Zusatzfeatures von gridelements • Drag&Drop für das Backend • Drag-‐In Wizard für Inhaltselemente • „Elemente verknüpfen“ ähnlich wie bei TemplaVoila
- 26. Der Weg weg von TemplaVoila -‐ #t3cs12 MehrspalQge Struktur-‐Elemente mit „gridelements“ • Mehrspal]ge Raster-‐Elemente • Erstellung funk]oniert analog zu Backend-‐Layouts • Mitgeliefertes sta]sches Template einbinden
- 27. Der Weg weg von TemplaVoila -‐ #t3cs12 MehrspalQge Struktur-‐Elemente mit „gridelements“ • Ausgabesteuerung nur per TS – kein HTML-‐Template nö]g tt_content.gridelements_pi1.20.10.setup { # ID of gridelement 1 < temp.gridelements.defaultGridSetup 1 { columns { # colPos ID 11 < .default 11.wrap = <div class="firstcol">|</div> # colPos ID 12 < .default 12.wrap = <div class="secondcol">|</div> } wrap = <div class="element2cols">|</div> } }
- 28. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid
- 29. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid
- 30. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid EXT:extension_builder installieren
- 31. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid • Domain Modelling wählen • Extension-‐Infos angeben • Personen-‐Daten angeben • Speichern
- 32. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid -‐ /ext_tables.php // Fügt Element im Backend hinzu // Titel, tt_content Eintrag, Content Type (kein Plugin) t3lib_extMgm::addPlugin(array('Ansprechpartner', 'contentelements_contactbox'), 'CType'); // Felder konfigurieren $TCA['tt_content']['types']['contentelements_contactbox']['showitem'] = 'CType;;4;button;1-‐1-‐1, header, bodytext;; 9;richtext:rte_transform[flag=rte_enabled|mode=ts_css];, image, -‐-‐div-‐-‐;LLL:EXT:cms/locallang_tca.xml:pages.tabs.access, starttime, endtime, fe_group'; Dokumenta]on hCp://typo3.org/documenta]on/document-‐library/core-‐documenta]on/doc_core_tca/current/
- 33. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid
- 34. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid -‐ /ext_localconf.php <?php if (!defined ('TYPO3_MODE')) { die ('Access denied.'); } Tx_Extbase_Utility_Extension::configurePlugin ( // unique plugin name $_EXTKEY, 'ContentRenderer', // accessible controller-‐action-‐combinations array ( 'Elements' => 'contactbox' ), // non-‐cachable controller-‐action-‐combinations (they must already be enabled) array ( 'Elements' => '' ) ); t3lib_extMgm::addTypoScript($_EXTKEY,'setup', '[GLOBAL] tt_content.contentelements_contactbox < tt_content.list.20.contentelements_contentrenderer tt_content.contentelements_contactbox.switchableControllerActions.Elements.1 = contactbox', true ); ?>
- 35. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid -‐ /Classes/Controller/ElementsController.php <?php /** * Elements Controller */ class Tx_Contentelements_Controller_ElementsController extends Tx_Extbase_MVC_Controller_ActionController { /** * Displays the element * * @return string The rendered view */ public function contactboxAction() { // get data of the content object $data = $this-‐>request-‐>getContentObjectData(); // assign the data to the fluid template $this-‐>view-‐>assign('data', $data); } } ?>
- 36. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid -‐ /Resources/Private/Templates/Elements/Contactbox.html <div class="contactbox"> <h4>{data.header}</h4> <f:if condition="{data.image}"> <f:image src="uploads/pics/{data.image}" alt="" width="76" /> </f:if> <f:format.html>{data.bodytext}</f:format.html> </div>
- 37. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid – Page TS # render content element selec]on in tabs mod.wizards.newContentElement.renderMode = tabs mod.wizards.newContentElement.wizardItems.common { elements.contentelements_contactbox { icon = gfx/c_wiz/user_defined.gif ]tle = Ansprechpartner descrip]on = Ansprechpartner mit Bild C_content_defValues { CType = contentelements_contactbox } } show := addToList(contentelements_contactbox) }
- 38. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid
- 39. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid • Um ein zusätzliches Element hinzuzufügen nur noch: • ext_tables.php anpassen • Methode im Controller duplizieren • Template anlegen • ext_localconf.php anpassen • PageTS anpassen
- 40. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid • Vorteile • geht rela]v schnell • Kontrolle über HTML-‐Code • Templates mit Fluid • Inhaltselement einfach auswählbar • Typ des Inhaltselements einfach zu wechseln
- 41. Der Weg weg von TemplaVoila -‐ #t3cs12 FCE mit extbase/fluid – Felder reichen nicht aus? Flexform! /ext_tables.php um FlexForm erweitern $TCA['tt_content']['columns']['pi_flexform']['config']['ds'] [',contentelements_contactbox'] = 'FILE:EXT:‘.$_EXTKEY.'/Configuration/FlexForms/ flexform_contactbox.xml'; /ConfiguraQon/FlexForms/flexform_contactbox.xml Variablen im Flexform mit „sevngs.“ bezeichnen wg. einfacher Verwendung in Fluid Templates <settings.products type="array“> Template anpassen Variablen im Flexform mit „sevngs.“ können in Fluid Templates direkt wieder mit „sevngs.“ abgegriffen werden <f:for each="{settings.products}" as="productContainer">
- 42. Der Weg weg von TemplaVoila -‐ #t3cs12 Danke für die Aufmerksamkeit! Fragen?
- 43. Danke für die Aufmerksamkeit! Fragen?