L’integrazione tra Fluid e Grid Elements permette la gestione di molteplici layout FrontEnd e BackEnd in grado di realizzare le più fantasiose richieste grafiche, senza complicare la vita ai content editors.
Nella presentazione vediamo insieme come realizzare un sito utilizzando FLUID e l'estensione GridElements, creando BackEnd Layout in base al risultato FrontEnd da ottenere.
Sito demo con codici sorgenti: t3campitalia.intera.it/elena/t3camp14
2. Elena è...
Web engineer dal 2004
Collaboratrice di Intera dal 2004
Tecnologo della Comunicazione dal 2005
Certified TYPO3 Integrator dal 2010
Relatrice al T3Camp per la seconda volta
… NERD da sempre ...
Elena Bartolotti... chi?
9. gli Strumenti
Metto a disposizione del content editor
diversi modi per impaginare i contenuti con i
GridElements
10. gli Strumenti
Limito i disastri con una progettazione mirata,
associando i BackEnd Layout alle pagine con
Fluid
<f:abracadabra> --- </f:abracadabra>
18. Template HTML : t3camp.html
<div id=”intestazione”> </div>
<div id=”centrale”> </div>
<div id=”piede”> </div>
il Template
19. Per ogni “blocco” di elementi
può esserci più di una tipologia
il Template
20. 2 tipologie per l'intestazione:
Intestazione alta con slide di immagini per Home Page (HeaderHome)
Intestazione più bassa a immagine fissa per Pagine Interne (HeaderInterne)
il Template
21. 3 tipologie per la parte centrale:
Spazio full-size per Home Page (MainHome)
Spazio full-size per Pagine Interne (MainInterne)
Spazio con Navigazione laterale sinistra (MainNav)
il Template
22. <div id=”intestazione”> </div>
<div id=”centrale”> </div>
<div id=”piede”> </div>
Realizziamo ogni tipologia
aggiungendo Fluid al tremplate HTML
Fluid <f:section>
27. 1 - Home
Intestazione grande e animata
+ spazio full-size per i contenuti
+ footer automatico
BackEnd Layout
lib.Slider
lib.content
28. 2 - Pagine Interne
Intestazione bassa per immagine fissa
+ spazio full-size per i contenuti
+ footer automatico
BackEnd Layout
lib.header
lib.content
29. 3 – Pagine con Navigazione Laterale
Intestazione bassa per immagine fissa
+ colonna laterale per la navigazione
+ colonna per i contenuti
+ footer automatico
BackEnd Layout
34. Come comunicano
BackEnd Layout dentro TYPO3
con
le <f:section> nel template HTML?
TypoScript
t3camp.htm
l
<f:section
>
BeLayou
t
3
BeLayou
t
2
TYPO3
BeLayou
t
1
35. Variabile per selezionare la “section” in base al BElayout della pagina:
lib.BElayoutUID = TEXT
lib.BElayoutUID {
data = field:backend_layout
ifEmpty.cObject = TEXT
ifEmpty.cObject {
data = levelfield:-1, backend_layout_next_level, slide
override.data = page:backend_layout
}
}
TypoScript