Eine kurze Einführung in die Backend-Layouts und FLUID-Templates bei TYPO3. Hionweise auf weiterführende Vorträge zu diesem Thema.

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.