Post on 19-May-2015
description
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
Der Weg weg von TemplaVoila -‐ #t3cs12
Wer bin ich?
• TemplaVoila? FCE?
• Inhaltselemente „advanced“
• Backend-‐Layouts mit FLUIDTEMPLATE
• Mehrspal]ge Struktur-‐Elemente mit „gridelements“
• FCE mit extbase/fluid
Der Weg weg von TemplaVoila -‐ #t3cs12
Session-‐Überblick
Der Weg weg von TemplaVoila -‐ #t3cs12
TemplaVoila? FCE?
• Alterna]ver Template-‐Mechnismus • Templates können in der Regel ohne Anpassung integriert werden
Der Weg weg von TemplaVoila -‐ #t3cs12
TemplaVoila?
Der Weg weg von TemplaVoila -‐ #t3cs12
TemplaVoila?
• Flexible Content Element
• Wird in der Regel verwendet für
• mehrspal]ge Container
• besondere Inhaltselemente
Der Weg weg von TemplaVoila -‐ #t3cs12
FCE?
Der Weg weg von TemplaVoila -‐ #t3cs12
FCE?
Der Weg weg von TemplaVoila -‐ #t3cs12
FCE?
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
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
}
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>
Der Weg weg von TemplaVoila -‐ #t3cs12
Inhaltselemente „advanced“
Möglichkeiten mit Standard-‐Elementen -‐ Layout • über TS unterscheidbar und Output entsprechend steuerbar
Der Weg weg von TemplaVoila -‐ #t3cs12
Inhaltselemente „advanced“
Der Weg weg von TemplaVoila -‐ #t3cs12
Inhaltselemente „advanced“ Möglichkeiten mit Standard-‐Elementen -‐ Layout
Der Weg weg von TemplaVoila -‐ #t3cs12
Backend-‐Layouts mit FLUIDTEMPLATE
Der Weg weg von TemplaVoila -‐ #t3cs12
Backend-‐Layouts mit FLUIDTEMPLATE • Backend-‐Layout über den „Grid wizard“ anlegen (im System-‐Ordner „Allgemeine Datensatzsammlung“)
Der Weg weg von TemplaVoila -‐ #t3cs12
Backend-‐Layouts mit FLUIDTEMPLATE • Neues Backend-‐Layout in den Seiteneigenschanen über den Reiter „Erscheinungsbild“ auswählen
Der Weg weg von TemplaVoila -‐ #t3cs12
Backend-‐Layouts mit FLUIDTEMPLATE • Ansicht im Backend entspricht dem ausgewählten Backend-‐Layout
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 }
}
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 }
}
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>
Der Weg weg von TemplaVoila -‐ #t3cs12
MehrspalQge Struktur-‐Elemente mit „gridelements“
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
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
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> }
}
Der Weg weg von TemplaVoila -‐ #t3cs12
FCE mit extbase/fluid
Der Weg weg von TemplaVoila -‐ #t3cs12
FCE mit extbase/fluid
Der Weg weg von TemplaVoila -‐ #t3cs12
FCE mit extbase/fluid EXT:extension_builder installieren
Der Weg weg von TemplaVoila -‐ #t3cs12
FCE mit extbase/fluid
• Domain Modelling wählen
• Extension-‐Infos angeben
• Personen-‐Daten angeben
• Speichern
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/
Der Weg weg von TemplaVoila -‐ #t3cs12
FCE mit extbase/fluid
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 );
?>
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); }
} ?>
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>
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)
}
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
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
Der Weg weg von TemplaVoila -‐ #t3cs12
FCE mit extbase/fluid
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">
Der Weg weg von TemplaVoila -‐ #t3cs12
Danke für die Aufmerksamkeit! Fragen?
Danke für die Aufmerksamkeit! Fragen?