der weg weg von templavoila

DESIGN + DIPLOMATIE Wir pflegen gute Beziehungen.

Der Weg weg von TemplaVoila -‐ #t3cs12

Der Weg weg von TemplaVoila ;-‐)

• Tobias Liegl

• TwiCer: @chapi

• arbeitet bei JANDA+ROSCHER in Regensburg

• www.janda-‐roscher.de

• schreibt auf typo3blogger.de


Wer bin ich?

• TemplaVoila? FCE?

• Inhaltselemente „advanced“

• Backend-‐Layouts mit FLUIDTEMPLATE

• Mehrspal]ge Struktur-‐Elemente mit „gridelements“

• FCE mit extbase/fluid


Session-‐Überblick


TemplaVoila? FCE?

• Alterna]ver Template-‐Mechnismus • Templates können in der Regel ohne Anpassung integriert werden


TemplaVoila?


TemplaVoila?

• Flexible Content Element

• Wird in der Regel verwendet für

• mehrspal]ge Container

• besondere Inhaltselemente


FCE?


FCE?


Inhaltselemente „advanced“

Möglichkeiten mit Standard-‐Elementen • Einrückung und Rahmen • über TS konfigurierbar • z. B. zus. DIV um bestehenden HTML-‐Code



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

}



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>



Möglichkeiten mit Standard-‐Elementen -‐ Layout • über TS unterscheidbar und Output entsprechend steuerbar




Inhaltselemente „advanced“ Möglichkeiten mit Standard-‐Elementen -‐ Layout


Backend-‐Layouts mit FLUIDTEMPLATE


Backend-‐Layouts mit FLUIDTEMPLATE • Backend-‐Layout über den „Grid wizard“ anlegen (im System-‐Ordner „Allgemeine Datensatzsammlung“)


Backend-‐Layouts mit FLUIDTEMPLATE • Neues Backend-‐Layout in den Seiteneigenschanen über den Reiter „Erscheinungsbild“ auswählen


Backend-‐Layouts mit FLUIDTEMPLATE • Ansicht im Backend entspricht dem ausgewählten Backend-‐Layout


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 }

}


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 }

}


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>


MehrspalQge Struktur-‐Elemente mit „gridelements“


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


MehrspalQge Struktur-‐Elemente mit „gridelements“ • Mehrspal]ge Raster-‐Elemente • Erstellung funk]oniert analog zu Backend-‐Layouts • Mitgeliefertes sta]sches Template einbinden


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

}


FCE mit extbase/fluid


FCE mit extbase/fluid EXT:extension_builder installieren



• Domain Modelling wählen

• Extension-‐Infos angeben

• Personen-‐Daten angeben

• Speichern


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/


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

?>


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

} ?>


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>


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)

}

• 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



• Vorteile

• geht rela]v schnell

• Kontrolle über HTML-‐Code

• Templates mit Fluid

• Inhaltselement einfach auswählbar

• Typ des Inhaltselements einfach zu wechseln




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


Danke für die Aufmerksamkeit! Fragen?

der weg weg von templavoila

Technology