SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Wir leben TYPO3




     Backend-Layout mit FLUID-Templates
Wir leben TYPO3                        In2code.de
Was machen die bei in2code?                               Stefan Busemann
                                               David Richter
                                                                    Markus Rodler
                  Workshops            Tina Gasteiger
   TYPO3                                                                      Alex Kellner


            Security
                          Consulting
Wir leben TYPO3

Wir unterstützen TYPO3- , Internet-
und Full-Service-Agenturen
genauso wie große und mittelgroße
Firmen, die auf TYPO3
Spezialwissen angewiesen sind.

                      Entwicklung
  Performance
                                          Michael Cannon
                                                                              Martin Huber
Extensions                  FLOW3                       Marcus Schwemer
                  Fluid



 Wir leben TYPO3                                                          in2code.de
Ablauf
• Backend – Layouts
  – Um was geht’s?
  – BE-Layout erstellen
• FLUID – Templates
  – Um was geht’s?
  – FLUID – Template: HTML
  – FLUID – Template: TypoScript
• Jetzt beides zusammen
 Wir leben TYPO3                   in2code.de
BE – Layout: Um was geht’s?
• Standard: 4 Spalten
  => unflexibel
• Keine visuelle Entsprechung zwischen
  Frontend und Backend
  => nicht intuitiv
• Backend – Layouts beheben das



 Wir leben TYPO3                     in2code.de
BE – Layout: Wie geht's? (1)
• Page TS (optional)

   TCEFORM {
               pages {
                         #------------------------------------------------
                         # page-uid, where backend layouts are saved
                         #------------------------------------------------
                         backend_layout.PAGE_TSCONFIG_ID=2
                         backend_layout_next_level.PAGE_TSCONFIG_ID=2
               }
   }




 Wir leben TYPO3                                                             in2code.de
BE – Layout: Wie geht's? (2)
• Anlegen


 1.                2.




 Wir leben TYPO3               in2code.de
BE-Layout : Wie geht’s? (3)
• Layout der Seite und Unterseiten zuweisen




 Wir leben TYPO3                     in2code.de
FLUID–Templates: Um was geht’s?
• Bis TYPO3 4.5:
   – Templates mit Subparts und Markern
   – Relativ unflexibel
• Seit TYPO3 4.5:
   – Fluid-Templates
   – Bekannt aus der Extension-Entwicklung
   – Alle ViewHelper verfügbar



 Wir leben TYPO3                          in2code.de
FLUID – Templates: Wie geht’s? (1)
• HTML – Template erstellen




 Wir leben TYPO3              in2code.de
FLUID – Templates: Wie geht’s? (2)

TypoScript – Top Level Object                                            TypoScript – Inhalt eines Elements
page = PAGE                                                              lib.column-right = COA
page.includeCSS {                                                        lib.column-right {
               10 = fileadmin/system/css/layout.css                        10 = CONTENT
}                                                                          10 {
                                                                             table = tt_content
page.10 = FLUIDTEMPLATE                                                      select {
page.10 {                                                                      where = colPos=2
              file = fileadmin/system/templates/layout-startseite.html         orderBy = sorting
              variables {                                                    }
                               header < lib.header                         }
                               column-right < lib.column-right           }
                               content-left < lib.content-left
                               content-right < lib.content-right
                               footer < lib.footer
              }
}




     Wir leben TYPO3                                                                               in2code.de
Backend-Layout mit Fluid-Template
 Darstellung im Frontend in Anhängigkeit des Backend-Layouts

 page = PAGE
 page.10 = FLUIDTEMPLATE
 page.10 {
               file.cObject = CASE
               file.cObject {
                                key.field = backend_layout
                                key.ifEmpty.data = levelfield:-2, backend_layout_next_level, slide

                                 # Ziffer ist die ID des Backendlayout
                                 1 = TEXT
                                 1.value = fileadmin/system/templates/layout-startseite.html

                                 2 = TEXT
                                 2.value = fileadmin/system/templates/layout-unterseiten.html

                 }
 }




Wir leben TYPO3                                                                                      in2code.de
Ausblick
• Fluid-Cheatsheets von typovision://
 http://www.typovision.de/typo3-agentur/flow3-extbase-fluid/extbase-fluid-cheat-sheet.html

• Extension „gridelements“
  – Strukturierte Inhaltselemente
  – Drag and Drop im Modul „Seite“
  – T. Löffler auf der T3AK
     http://www.slideshare.net/thomas_loeffler/templating-30-in-typo3
     (ab Folie 19)

• FCE mit Extbase und Fluid
  – T. Liegl auf dem TYPO3Camp München 2011
     http://www.slideshare.net/TobiasLiegl/fce-ohne-templavoila


 Wir leben TYPO3                                                                  in2code.de
Vielen Dank




www.in2code.de
Stefan Busemann
TinaWir leben TYPO3
     Gasteiger                       in2code.de
Alex Kellner                        In2code.

Weitere ähnliche Inhalte

Ähnlich wie Backendlayout mit FLUID-Templates

Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0
Alex Kellner
 
Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner
Eine Website in einer Stunde mit TYPO3 bauen, Gernot PloinerEine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner
Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner
DeveloperConference
 
FAL in Extbase-Extensions
FAL in Extbase-ExtensionsFAL in Extbase-Extensions
FAL in Extbase-Extensions
in2code
 

Ähnlich wie Backendlayout mit FLUID-Templates (20)

Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0
 
TYPO3 Translations
TYPO3 Translations TYPO3 Translations
TYPO3 Translations
 
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 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerkTYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
 
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty RosenheimVorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
Vorstellung TYPO3 Neos - Release 1.0 - Releaseparty Rosenheim
 
jQuery in TYPO3 nutzen
jQuery in TYPO3 nutzenjQuery in TYPO3 nutzen
jQuery in TYPO3 nutzen
 
TYPO3 Dokumentation mit ReStructuredText
TYPO3 Dokumentation mit ReStructuredTextTYPO3 Dokumentation mit ReStructuredText
TYPO3 Dokumentation mit ReStructuredText
 
TYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein WissenTYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein Wissen
 
Eine Website in einer Stunde mit TYPO3 bauen
Eine Website in einer Stunde mit TYPO3 bauenEine Website in einer Stunde mit TYPO3 bauen
Eine Website in einer Stunde mit TYPO3 bauen
 
Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner
Eine Website in einer Stunde mit TYPO3 bauen, Gernot PloinerEine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner
Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner
 
Powermail 2.0
Powermail 2.0Powermail 2.0
Powermail 2.0
 
FCE ohne TemplaVoila
FCE ohne TemplaVoilaFCE ohne TemplaVoila
FCE ohne TemplaVoila
 
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerkTYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
 
FAL in Extbase-Extensions
FAL in Extbase-ExtensionsFAL in Extbase-Extensions
FAL in Extbase-Extensions
 
Extbase/Fluid: Kennenlernen und ausprobieren
Extbase/Fluid: Kennenlernen und ausprobierenExtbase/Fluid: Kennenlernen und ausprobieren
Extbase/Fluid: Kennenlernen und ausprobieren
 
Shibboleth Single-Sign-On mit TYPO3
Shibboleth Single-Sign-On mit TYPO3Shibboleth Single-Sign-On mit TYPO3
Shibboleth Single-Sign-On mit TYPO3
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
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
 

Backendlayout mit FLUID-Templates

  • 1. Wir leben TYPO3 Backend-Layout mit FLUID-Templates Wir leben TYPO3 In2code.de
  • 2. Was machen die bei in2code? Stefan Busemann David Richter Markus Rodler Workshops Tina Gasteiger TYPO3 Alex Kellner Security Consulting Wir leben TYPO3 Wir unterstützen TYPO3- , Internet- und Full-Service-Agenturen genauso wie große und mittelgroße Firmen, die auf TYPO3 Spezialwissen angewiesen sind. Entwicklung Performance Michael Cannon Martin Huber Extensions FLOW3 Marcus Schwemer Fluid Wir leben TYPO3 in2code.de
  • 3. Ablauf • Backend – Layouts – Um was geht’s? – BE-Layout erstellen • FLUID – Templates – Um was geht’s? – FLUID – Template: HTML – FLUID – Template: TypoScript • Jetzt beides zusammen Wir leben TYPO3 in2code.de
  • 4. BE – Layout: Um was geht’s? • Standard: 4 Spalten => unflexibel • Keine visuelle Entsprechung zwischen Frontend und Backend => nicht intuitiv • Backend – Layouts beheben das Wir leben TYPO3 in2code.de
  • 5. BE – Layout: Wie geht's? (1) • Page TS (optional) TCEFORM { pages { #------------------------------------------------ # page-uid, where backend layouts are saved #------------------------------------------------ backend_layout.PAGE_TSCONFIG_ID=2 backend_layout_next_level.PAGE_TSCONFIG_ID=2 } } Wir leben TYPO3 in2code.de
  • 6. BE – Layout: Wie geht's? (2) • Anlegen 1. 2. Wir leben TYPO3 in2code.de
  • 7. BE-Layout : Wie geht’s? (3) • Layout der Seite und Unterseiten zuweisen Wir leben TYPO3 in2code.de
  • 8. FLUID–Templates: Um was geht’s? • Bis TYPO3 4.5: – Templates mit Subparts und Markern – Relativ unflexibel • Seit TYPO3 4.5: – Fluid-Templates – Bekannt aus der Extension-Entwicklung – Alle ViewHelper verfügbar Wir leben TYPO3 in2code.de
  • 9. FLUID – Templates: Wie geht’s? (1) • HTML – Template erstellen Wir leben TYPO3 in2code.de
  • 10. FLUID – Templates: Wie geht’s? (2) TypoScript – Top Level Object TypoScript – Inhalt eines Elements page = PAGE lib.column-right = COA page.includeCSS { lib.column-right { 10 = fileadmin/system/css/layout.css 10 = CONTENT } 10 { table = tt_content page.10 = FLUIDTEMPLATE select { page.10 { where = colPos=2 file = fileadmin/system/templates/layout-startseite.html orderBy = sorting variables { } header < lib.header } column-right < lib.column-right } content-left < lib.content-left content-right < lib.content-right footer < lib.footer } } Wir leben TYPO3 in2code.de
  • 11. Backend-Layout mit Fluid-Template Darstellung im Frontend in Anhängigkeit des Backend-Layouts page = PAGE page.10 = FLUIDTEMPLATE page.10 { file.cObject = CASE file.cObject { key.field = backend_layout key.ifEmpty.data = levelfield:-2, backend_layout_next_level, slide # Ziffer ist die ID des Backendlayout 1 = TEXT 1.value = fileadmin/system/templates/layout-startseite.html 2 = TEXT 2.value = fileadmin/system/templates/layout-unterseiten.html } } Wir leben TYPO3 in2code.de
  • 12. Ausblick • Fluid-Cheatsheets von typovision:// http://www.typovision.de/typo3-agentur/flow3-extbase-fluid/extbase-fluid-cheat-sheet.html • Extension „gridelements“ – Strukturierte Inhaltselemente – Drag and Drop im Modul „Seite“ – T. Löffler auf der T3AK http://www.slideshare.net/thomas_loeffler/templating-30-in-typo3 (ab Folie 19) • FCE mit Extbase und Fluid – T. Liegl auf dem TYPO3Camp München 2011 http://www.slideshare.net/TobiasLiegl/fce-ohne-templavoila Wir leben TYPO3 in2code.de
  • 13. Vielen Dank www.in2code.de Stefan Busemann TinaWir leben TYPO3 Gasteiger in2code.de Alex Kellner In2code.