Wie macht man FCEs ohne TemplaVoila - sondern mit extbase/fluid.

1. FCE OHNE TEMPLAVOILA
TOBIAS LIEGL – TYPO3CAMP MÜNCHEN 2011

2. 02
FCE OHNE TEMPLAVOILA
INHALT
• Was ist TemplaVoila?
• Was sind FCEs?
• FCE mit extbase/fluid
• multicolumn
• fedext

3. 03
FCE OHNE TEMPLAVOILA
WER BIN ICH?
• Tobias Liegl
• JANDA+ROSCHER aus Regensburg
• www.janda-roscher.de
• schreibt auf typo3blogger.de

4. 04
FCE OHNE TEMPLAVOILA – TEMPLAVOILA?
TEMPLAVOILA?
• Alternativer Template-Mechanismus
• Templates können in der Regel ohne
Anpassung integriert werden

5. 05
FCE OHNE TEMPLAVOILA – TEMPLAVOILA?

6. 06
FCE OHNE TEMPLAVOILA – TEMPLAVOILA?

7. 07
FCE OHNE TEMPLAVOILA – FCE?
FCE?
• Flexible Content Element
• Wird in der Regel verwendet für
• besondere Inhaltselemente
• mehrspaltige Container

8. 08
FCE OHNE TEMPLAVOILA – FCE?

9. 09
FCE OHNE TEMPLAVOILA – FCE?

10. INHALTSELEMENTE
„ADVANCED“

11. 11
FCE OHNE TEMPLAVOILA – INHALTSELEMENTE „ADVANCED“
MÖGLICHKEITEN MIT STANDARD-ELEMENTEN
• Einrückung und Rahmen
• über TS konfigurierbar
• z. B. zus. DIV um bestehenden HTML-Code

12. 12
FCE OHNE TEMPLAVOILA – INHALTSELEMENTE „ADVANCED“
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
}

13. 13
FCE OHNE TEMPLAVOILA – INHALTSELEMENTE „ADVANCED“
EINRÜCKUNG UND RAHMEN
# Im TS-Setup
tt_content.stdWrap.innerWrap.cObject.2 = TEXT
tt_content.stdWrap.innerWrap.cObject.2.value = <div class="productBox">|</div>
tt_content.stdWrap.innerWrap.cObject.3 = TEXT
tt_content.stdWrap.innerWrap.cObject.3.value = <div class="teaserBox">|</div>
tt_content.stdWrap.innerWrap.cObject.10 = TEXT
tt_content.stdWrap.innerWrap.cObject.10.value = <div class="teaserBoxAlt">|</div>

14. 14
FCE OHNE TEMPLAVOILA – INHALTSELEMENTE „ADVANCED“
MÖGLICHKEITEN MIT STANDARD-ELEMENTEN
• Layout
• über TS unterscheidbar und Output
entsprechend steuerbar

15. 15
FCE OHNE TEMPLAVOILA – INHALTSELEMENTE „ADVANCED“
LAYOUT

16. FCE MIT EXTBASE/FLUID

17. 17
FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID

18. 18
FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID
• EXT:extension_builder installieren

19. 19
FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID
• Domain Modelling wählen
• Extension-Infos angeben
• Personen-Daten angeben
• Speichern

20. 20
FCE OHNE TEMPLAVOILA – 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';
Dokumentation:
http://typo3.org/documentation/document-library/core-documentation/
doc_core_api/4.1.0/view/4/2/#id4255417

21. 21
FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID

22. 22
FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID

23. 23
FCE OHNE TEMPLAVOILA – 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
);
?>

24. 24
FCE OHNE TEMPLAVOILA – 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);
}
}
?>

25. 25
FCE OHNE TEMPLAVOILA – 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>

26. 26
FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID
Page TS
# render content element selection in tabs
mod.wizards.newContentElement.renderMode = tabs
mod.wizards.newContentElement.wizardItems.common {
elements.contentelements_contactbox {
icon = gfx/c_wiz/user_defined.gif
title = Ansprechpartner
description = Ansprechpartner mit Bild
tt_content_defValues {
CType = contentelements_contactbox
}
}
show := addToList(contentelements_contactbox)
}

27. 27
FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID

28. 28
FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID
• Neues Element hinzufügen
• ext_tables.php anpassen
• Methode im Controller duplizieren
• Template anlegen
• ext_localconf.php anpassen
• PageTS anpassen

29. 29
FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID
• Vorteile
• geht relativ schnell
• Kontrolle über HTML-Code
• Templates mit Fluid
• Inhaltselement einfach auswählbar
• Typ des Inhaltselements einfach zu wechseln

30. 30
FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID
/ext_tables.php um FlexForm erweitern
$TCA['tt_content']['columns']['pi_flexform']['config']['ds']
[',contentelements_contactbox'] = 'FILE:EXT:'.$_EXTKEY.'/Configuration/
FlexForms/flexform_contactbox.xml';

31. 31
FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID
/Configuration/FlexForms/flexform_contactbox.xml
Variablen im Flexform mit „settings.“ bezeichnen
wg. einfacher Verwendung in Fluid Templates
<settings.products type="array">
Template anpassen
Variablen im Flexform mit „settings.“ können in Fluid Templates
direkt wieder mit „settings.“ abgegriffen werden
<f:for each="{settings.products}" as="productContainer">

32. ALTERNATIVE FÜR
MEHRSPALTIGE CONTAINER

33. 33
FCE OHNE TEMPLAVOILA – EXT:MULTICOLUMN

34. 34
FCE OHNE TEMPLAVOILA – EXT:MULTICOLUMN

35. 35
FCE OHNE TEMPLAVOILA – EXT:MULTICOLUMN

36. 36
FCE OHNE TEMPLAVOILA – EXT:MULTICOLUMN
• Auswahl der Mehrspalter in einem Element
• Konfiguration über TypoScript
• HTML-Output frei konfigurierbar

37. EXT:FEDEXT

38. 38
FCE OHNE TEMPLAVOILA – EXT:FEDEXT
• Baut auf extbase/fluid auf
• Möglichkeit zur Erstellung von FCEs
• „Content Columns“ für mehrspaltige Elemente
• Dokumentation unter: http://fedext.net

39. HAT´S GESCHMECKT?
MEHR KREATIVE IDEEN AUCH ZUM MITNEHMEN.
JANDA + ROSCHER
GmbH & Co. KG
Roritzerstraße 10 b
93047 Regensburg
Fon +49.941.595600
Fax +49.941.5956010
info@janda-roscher.de
www.janda-roscher.de