l'arte del templating: typoscript, fluid e grid elements
DESCRIPTION
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/t3camp14TRANSCRIPT
![Page 1: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/1.jpg)
l’Arte del Templating:
TypoScript, Fluid e
Grid Elements di Elena Bartolotti
![Page 2: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/2.jpg)
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?
![Page 3: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/3.jpg)
Cosa voglio ottenere da
TYPO3?
gli Obiettivi
![Page 4: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/4.jpg)
Un ambiente facile e intuitivo per ogni content editor
gli Obiettivi
![Page 5: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/5.jpg)
Un sistema che permetta al content editor
di disporre liberamente i contenuti nelle pagine
gli Obiettivi
![Page 6: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/6.jpg)
Un modo per impedire che il content editor faccia
DISASTRI
gli Obiettivi
![Page 7: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/7.jpg)
Come posso ottenere tutto questo con
TYPO3?
gli Strumenti
![Page 8: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/8.jpg)
gli Strumenti
Creo un ambiente facile e intuitivo con i
BackEnd Layout
![Page 9: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/9.jpg)
gli Strumenti
Metto a disposizione del content editor
diversi modi per impaginare i contenuti con i
GridElements
![Page 10: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/10.jpg)
gli Strumenti
Limito i disastri con una progettazione mirata,
associando i BackEnd Layout alle pagine con
Fluid
<f:abracadabra> --- </f:abracadabra>
![Page 11: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/11.jpg)
Partiamo da un mockup
in Pratica
![Page 12: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/12.jpg)
in Pratica
![Page 13: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/13.jpg)
in Pratica
![Page 14: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/14.jpg)
Intestazione
Parte centrale
Piede
Intestazione
Parte centrale
Piede
Intestazione
Parte centrale
Piede
In ogni “template” posso individuare facilmente 3 blocchi di elementi: Intestazione Parte Centrale (contenuti principali) Piede
analizzare la Grafica
![Page 15: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/15.jpg)
Esempio su sito reale
analizzare la Grafica
![Page 16: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/16.jpg)
analizzare la Grafica
Esempio su sito reale
![Page 17: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/17.jpg)
analizzare la Grafica
Esempio su sito reale
![Page 18: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/18.jpg)
Template HTML : t3camp.html <div id=”intestazione”> </div> <div id=”centrale”> </div> <div id=”piede”> </div>
il Template
![Page 19: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/19.jpg)
Per ogni “blocco” di elementi
può esserci più di una tipologia
il Template
![Page 20: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/20.jpg)
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
![Page 21: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/21.jpg)
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
![Page 22: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/22.jpg)
<div id=”intestazione”> </div> <div id=”centrale”> </div> <div id=”piede”> </div>
Realizziamo ogni tipologia
aggiungendo Fluid al tremplate HTML
Fluid <f:section>
![Page 23: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/23.jpg)
<div id=”intestazione”> </div>
Fluid <f:section>
<f:section name="HeaderHome"> <div id="header" class="home"> <f:cObject typoscriptObjectPath="lib.Slider" /> <f:cObject typoscriptObjectPath="lib.TopNav"/> </div> </f:section>
<f:section name="HeaderInterne"> <div id="header"> <f:cObject typoscriptObjectPath="lib.header" /> <f:cObject typoscriptObjectPath="lib.TopNav"/> </div> </f:section>
![Page 24: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/24.jpg)
<div id=”centrale”> </div> <f:section name=”MainHome”> <div id=”content” class=”home”> <f:cObject typoscriptObjectPath=”lib.pagetitle" /> <f:cObject typoscriptObjectPath=”lib.content” /> </div> </f:section> <f:section name=”MainInterne”> <div id=”content”> <f:cObject typoscriptObjectPath=”lib.pagetitle” /> <f:cObject typoscriptObjectPath=”lib.content” /> </div> </f:section> <f:section name=”MainNav”> <div id=”sidebar”> <f:cObject typoscriptObjectPath=”lib.LeftNav” /> </div> <div id=”content”> <f:cObject typoscriptObjectPath=”lib.pagetitle” /> <f:cObject typoscriptObjectPath=”lib.content” /> </div> </f:section>
Fluid <f:section>
![Page 25: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/25.jpg)
Come applico questo codice
alle pagine del mio sito?
BackEnd Layout
![Page 26: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/26.jpg)
BackEnd Layout
BackEnd Layout
![Page 27: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/27.jpg)
1 - Home Intestazione grande e animata
+ spazio full-size per i contenuti
+ footer automatico
BackEnd Layout
lib.Slider
lib.content
![Page 28: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/28.jpg)
2 - Pagine Interne Intestazione bassa per immagine fissa
+ spazio full-size per i contenuti
+ footer automatico
BackEnd Layout
lib.header
lib.content
![Page 29: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/29.jpg)
3 – Pagine con Navigazione Laterale Intestazione bassa per immagine fissa
+ colonna laterale per la navigazione
+ colonna per i contenuti
+ footer automatico
BackEnd Layout
![Page 30: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/30.jpg)
Assegnazione del BackEnd Layout
nelle proprietà delle pagine
BackEnd Layout
![Page 31: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/31.jpg)
L'ambiente di lavoro del Content Editor
deve rispecchiare il layout del sito
BackEnd Layout
![Page 32: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/32.jpg)
TypoScript
TypoScript
![Page 33: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/33.jpg)
page.10 = FLUIDTEMPLATE
page.10.file = fileadmin/templates/t3camp.html
TypoScript
![Page 34: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/34.jpg)
Come comunicano
BackEnd Layout dentro TYPO3
con
le <f:section> nel template HTML?
TypoScript
t3camp.html
<f:section>
BeLayout 3
BeLayout 2
TYPO3
BeLayout 1
![Page 35: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/35.jpg)
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
![Page 36: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/36.jpg)
<div id=”intestazione”> <f:if condition=”{f:cObject(typoscriptObjectPath:'lib.BElayoutUID')} == 1”> <f:then> <f:render section="HeaderHome" /> </f:then> <f:else> <f:render section="Header" /> </f:else> </f:if> </div> <f:section name="HeaderHome"> <div id="header" class="home"> <f:cObject typoscriptObjectPath="lib.Slider" /> <f:cObject typoscriptObjectPath="lib.TopNav" /> </div> </f:section> <f:section name="Header"> <div id="header"> <f:cObject typoscriptObjectPath="lib.header" /> <f:cObject typoscriptObjectPath="lib.TopNav" /> </div> </f:section>
Fluid <f:if condition>
![Page 37: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/37.jpg)
<div id="centrale"> <f:if condition="{f:cObject(typoscriptObjectPath:'lib.BElayoutUID')} == 1"> <f:then> <f:render section="MainHome" /> </f:then> </f:if> <f:if condition="{f:cObject(typoscriptObjectPath:'lib.BElayoutUID')} == 2"> <f:then> <f:render section="MainInterne" /> </f:then> </f:if> <f:if condition="{f:cObject(typoscriptObjectPath:'lib.BElayoutUID')} == 3"> <f:then> <f:render section="MainNav" /> </f:then> </f:if> </div>
Fluid <f:if condition>
![Page 38: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/38.jpg)
Fluid <f:if condition> Vista Backend e Frontend
di una pagina con layout per pagine interne con navigazione
![Page 39: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/39.jpg)
Ora è il momento dei contenuti!
i Contenuti
![Page 40: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/40.jpg)
i Contenuti
4 colonne con bordi
1 colonna
2 colonne
3 colonne
![Page 41: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/41.jpg)
Creare i record GridElements
GridElements
![Page 42: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/42.jpg)
Il content editor può scegliere
come disporre i contenuti
GridElements
![Page 43: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/43.jpg)
tt_content.gridelements_pi1.10=<lib.stdheader tt_content.gridelements_pi1.20.10.setup { # ID 1 – Grid a 1 colonna 1 < lib.gridelements.defaultGridSetup 1.columns { 0 < .default 0.wrap = <div class="large-12 columns">|</div> } 1.wrap = <div class="row nospace">|</div> # ID 2 - Grid a 2 colonne 50 50 2 < lib.gridelements.defaultGridSetup 2.columns { 0 < .default 0.wrap = <div class="large-6 columns">|</div> 1 < .default 1.wrap = <div class="large-6 columns">|</div> } 2.wrap = <div class="row nospace">|</div> … }
GridElements
![Page 44: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/44.jpg)
il Risultato
![Page 45: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/45.jpg)
il Risultato
![Page 46: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/46.jpg)
il Risultato
![Page 47: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/47.jpg)
Non solo BackEnd Layout e GridElements
MultiColumn Multiple Content
TemplaVoila
Fluid Content Engine
Flux
le Alternative
![Page 48: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/48.jpg)
Progettare pensando anche al Content Editor
le Conclusioni
![Page 49: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/49.jpg)
le Conclusioni
![Page 50: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/50.jpg)
La Forza è nulla senza il controllo
le Conclusioni
![Page 51: L'Arte del Templating: Typoscript, Fluid e Grid Elements](https://reader033.vdocuments.mx/reader033/viewer/2022042715/55958a271a28ab15638b459e/html5/thumbnails/51.jpg)
the End
Grazie per l’attenzione