SlideShare ist ein Scribd-Unternehmen logo
1 von 39
FCE OHNE TEMPLAVOILA


TOBIAS LIEGL – TYPO3CAMP MÜNCHEN 2011
02

FCE OHNE TEMPLAVOILA




INHALT
• Was ist TemplaVoila?
• Was sind FCEs?
• FCE mit extbase/fluid
• multicolumn
• fedext
03

FCE OHNE TEMPLAVOILA




WER BIN ICH?
• Tobias Liegl
• JANDA+ROSCHER aus Regensburg
• www.janda-roscher.de
• schreibt auf typo3blogger.de
04

FCE OHNE TEMPLAVOILA – TEMPLAVOILA?




TEMPLAVOILA?
• Alternativer Template-Mechanismus
• Templates können in der Regel ohne
  Anpassung integriert werden
05

FCE OHNE TEMPLAVOILA – TEMPLAVOILA?
06

FCE OHNE TEMPLAVOILA – TEMPLAVOILA?
07

FCE OHNE TEMPLAVOILA – FCE?




FCE?
• Flexible Content Element
• Wird in der Regel verwendet für
  • besondere Inhaltselemente
  • mehrspaltige Container
08

FCE OHNE TEMPLAVOILA – FCE?
09

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

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

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

FCE OHNE TEMPLAVOILA – INHALTSELEMENTE „ADVANCED“




MÖGLICHKEITEN MIT STANDARD-ELEMENTEN
• Layout
  • über TS unterscheidbar und Output
    entsprechend steuerbar
15

FCE OHNE TEMPLAVOILA – INHALTSELEMENTE „ADVANCED“




LAYOUT
FCE MIT EXTBASE/FLUID
17

FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID
18

FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID




• EXT:extension_builder installieren
19

FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID




• Domain Modelling wählen
• Extension-Infos angeben
• Personen-Daten angeben
• Speichern
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

FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID
22

FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID
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

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

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

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

FCE OHNE TEMPLAVOILA – FCE MIT EXTBASE/FLUID
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

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

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

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">
ALTERNATIVE FÜR
MEHRSPALTIGE CONTAINER
33

FCE OHNE TEMPLAVOILA – EXT:MULTICOLUMN
34

FCE OHNE TEMPLAVOILA – EXT:MULTICOLUMN
35

FCE OHNE TEMPLAVOILA – EXT:MULTICOLUMN
36

FCE OHNE TEMPLAVOILA – EXT:MULTICOLUMN




• Auswahl der Mehrspalter in einem Element
• Konfiguration über TypoScript
• HTML-Output frei konfigurierbar
EXT:FEDEXT
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
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

Weitere ähnliche Inhalte

Andere mochten auch

Fce speaking test part 2
Fce speaking test part 2Fce speaking test part 2
Fce speaking test part 2Blanca Ortecho
 
Fce speaking test part 1
Fce speaking test part 1Fce speaking test part 1
Fce speaking test part 1Blanca Ortecho
 
Food Safety Authority Ireland - E-Learning Journey
Food Safety Authority Ireland - E-Learning JourneyFood Safety Authority Ireland - E-Learning Journey
Food Safety Authority Ireland - E-Learning JourneyAurion Learning
 
Company Profile
Company ProfileCompany Profile
Company ProfileSadam Doka
 
Cantate barcelona 2014 esp
Cantate barcelona 2014 espCantate barcelona 2014 esp
Cantate barcelona 2014 espcordexativa
 
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventHTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventRobert Nyman
 
Politicas Demandas Civiles Sociedad Interconectada
Politicas Demandas Civiles Sociedad InterconectadaPoliticas Demandas Civiles Sociedad Interconectada
Politicas Demandas Civiles Sociedad InterconectadaAlejandro Pisanty
 
Booklet sawasdee thailand project summer 2015
Booklet sawasdee thailand project summer 2015Booklet sawasdee thailand project summer 2015
Booklet sawasdee thailand project summer 2015Gigi Su
 
Portfolio Diseño Gráfico Esther Sales
Portfolio Diseño Gráfico Esther SalesPortfolio Diseño Gráfico Esther Sales
Portfolio Diseño Gráfico Esther SalesEstherSC
 
Web Technology and Standards Tutorial
Web Technology and Standards Tutorial Web Technology and Standards Tutorial
Web Technology and Standards Tutorial Jonathan Jeon
 

Andere mochten auch (20)

Fce speaking test part 2
Fce speaking test part 2Fce speaking test part 2
Fce speaking test part 2
 
Fce speaking test part 1
Fce speaking test part 1Fce speaking test part 1
Fce speaking test part 1
 
Humidificador Bebe
Humidificador Bebe
Humidificador Bebe
Humidificador Bebe
 
Informatica
Informatica Informatica
Informatica
 
Cloudcomputingkennisnet
CloudcomputingkennisnetCloudcomputingkennisnet
Cloudcomputingkennisnet
 
Food Safety Authority Ireland - E-Learning Journey
Food Safety Authority Ireland - E-Learning JourneyFood Safety Authority Ireland - E-Learning Journey
Food Safety Authority Ireland - E-Learning Journey
 
Vwag werkschau1 72 (4)
Vwag werkschau1 72 (4)Vwag werkschau1 72 (4)
Vwag werkschau1 72 (4)
 
Ficha tecnica gregorio
Ficha tecnica gregorioFicha tecnica gregorio
Ficha tecnica gregorio
 
Company Profile
Company ProfileCompany Profile
Company Profile
 
Cantate barcelona 2014 esp
Cantate barcelona 2014 espCantate barcelona 2014 esp
Cantate barcelona 2014 esp
 
Fansubbing 1
Fansubbing 1Fansubbing 1
Fansubbing 1
 
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventHTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
 
Salve Rociera
Salve  RocieraSalve  Rociera
Salve Rociera
 
datenwerk Cookbook: webdesign trends 2014 (en)
datenwerk Cookbook: webdesign trends 2014 (en)datenwerk Cookbook: webdesign trends 2014 (en)
datenwerk Cookbook: webdesign trends 2014 (en)
 
Politicas Demandas Civiles Sociedad Interconectada
Politicas Demandas Civiles Sociedad InterconectadaPoliticas Demandas Civiles Sociedad Interconectada
Politicas Demandas Civiles Sociedad Interconectada
 
Booklet sawasdee thailand project summer 2015
Booklet sawasdee thailand project summer 2015Booklet sawasdee thailand project summer 2015
Booklet sawasdee thailand project summer 2015
 
Usability-Testing - nichts leichter als das!
Usability-Testing - nichts leichter als das!Usability-Testing - nichts leichter als das!
Usability-Testing - nichts leichter als das!
 
Ácidos Y Bases
Ácidos Y BasesÁcidos Y Bases
Ácidos Y Bases
 
Portfolio Diseño Gráfico Esther Sales
Portfolio Diseño Gráfico Esther SalesPortfolio Diseño Gráfico Esther Sales
Portfolio Diseño Gráfico Esther Sales
 
Web Technology and Standards Tutorial
Web Technology and Standards Tutorial Web Technology and Standards Tutorial
Web Technology and Standards Tutorial
 

Ähnlich wie FCE ohne TemplaVoila

DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDNUG e.V.
 
Extreme Fluid - Status Quo der modernen Templating Engine
Extreme Fluid - Status Quo der modernen Templating EngineExtreme Fluid - Status Quo der modernen Templating Engine
Extreme Fluid - Status Quo der modernen Templating Enginedie.agilen GmbH
 
Domino 12(.0.2) Lessons learned - DNUG Stammtisch Hamburg
Domino 12(.0.2) Lessons learned - DNUG Stammtisch HamburgDomino 12(.0.2) Lessons learned - DNUG Stammtisch Hamburg
Domino 12(.0.2) Lessons learned - DNUG Stammtisch HamburgDNUG e.V.
 
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkdie.agilen GmbH
 
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbHTYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbHdie.agilen GmbH
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigerThomas Kratz
 
Visuelle Gestaltung und Testdatenentwicklung mit BizDataX
Visuelle Gestaltung und Testdatenentwicklung mit BizDataXVisuelle Gestaltung und Testdatenentwicklung mit BizDataX
Visuelle Gestaltung und Testdatenentwicklung mit BizDataXDragan Kinkela
 
TYPO3 CMS 6.0 - Die Neuerungen (typovision GmbH)
TYPO3 CMS 6.0 - Die Neuerungen (typovision GmbH)TYPO3 CMS 6.0 - Die Neuerungen (typovision GmbH)
TYPO3 CMS 6.0 - Die Neuerungen (typovision GmbH)die.agilen GmbH
 
Typo3 cms-6-0-die-neuerungen
Typo3 cms-6-0-die-neuerungenTypo3 cms-6-0-die-neuerungen
Typo3 cms-6-0-die-neuerungenMokhtar Slama
 
Typo3 4.3 Die Neuerungen im Überblick
Typo3 4.3 Die Neuerungen im ÜberblickTypo3 4.3 Die Neuerungen im Überblick
Typo3 4.3 Die Neuerungen im Überblickdie.agilen GmbH
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkdie.agilen GmbH
 
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...Verein FM Konferenz
 
Flexforms made simple
Flexforms made simpleFlexforms made simple
Flexforms made simplekaivogel
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkdie.agilen GmbH
 
Polymorphic Table Functions in 18c
Polymorphic Table Functions in 18cPolymorphic Table Functions in 18c
Polymorphic Table Functions in 18cAndrej Pashchenko
 
PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3marco-huber
 

Ähnlich wie FCE ohne TemplaVoila (20)

DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdf
 
Extreme Fluid - Status Quo der modernen Templating Engine
Extreme Fluid - Status Quo der modernen Templating EngineExtreme Fluid - Status Quo der modernen Templating Engine
Extreme Fluid - Status Quo der modernen Templating Engine
 
Domino 12(.0.2) Lessons learned - DNUG Stammtisch Hamburg
Domino 12(.0.2) Lessons learned - DNUG Stammtisch HamburgDomino 12(.0.2) Lessons learned - DNUG Stammtisch Hamburg
Domino 12(.0.2) Lessons learned - DNUG Stammtisch Hamburg
 
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerkTYPO3 CMS 7.5 - Die Neuerungen - pluswerk
TYPO3 CMS 7.5 - Die Neuerungen - pluswerk
 
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbHTYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH
TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
SQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" EntwicklerSQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" Entwickler
 
Visuelle Gestaltung und Testdatenentwicklung mit BizDataX
Visuelle Gestaltung und Testdatenentwicklung mit BizDataXVisuelle Gestaltung und Testdatenentwicklung mit BizDataX
Visuelle Gestaltung und Testdatenentwicklung mit BizDataX
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
TYPO3 CMS 6.0 - Die Neuerungen (typovision GmbH)
TYPO3 CMS 6.0 - Die Neuerungen (typovision GmbH)TYPO3 CMS 6.0 - Die Neuerungen (typovision GmbH)
TYPO3 CMS 6.0 - Die Neuerungen (typovision GmbH)
 
Typo3 cms-6-0-die-neuerungen
Typo3 cms-6-0-die-neuerungenTypo3 cms-6-0-die-neuerungen
Typo3 cms-6-0-die-neuerungen
 
Typo3 4.3 Die Neuerungen im Überblick
Typo3 4.3 Die Neuerungen im ÜberblickTypo3 4.3 Die Neuerungen im Überblick
Typo3 4.3 Die Neuerungen im Überblick
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
 
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...
FMK2014: Ein Warenwirtschaftssystem, das mit Scannern, Waagen und Mitarbeiter...
 
Drupal und twig
Drupal und twigDrupal und twig
Drupal und twig
 
Flexforms made simple
Flexforms made simpleFlexforms made simple
Flexforms made simple
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 
Polymorphic Table Functions in 18c
Polymorphic Table Functions in 18cPolymorphic Table Functions in 18c
Polymorphic Table Functions in 18c
 
PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3
 
htaccess SEO Tipps
htaccess SEO Tippshtaccess SEO Tipps
htaccess SEO Tipps
 

FCE ohne TemplaVoila

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