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
l’Arte del Templating:
TypoScript, Fluid e
Grid Elements di Elena Bartolotti
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?
Cosa voglio ottenere da
TYPO3?
gli Obiettivi
Un ambiente facile e intuitivo per ogni content editor
gli Obiettivi
Un sistema che permetta al content editor
di disporre liberamente i contenuti nelle pagine
gli Obiettivi
Un modo per impedire che il content editor faccia
DISASTRI
gli Obiettivi
Come posso ottenere tutto questo con
TYPO3?
gli Strumenti
gli Strumenti
Creo un ambiente facile e intuitivo con i
BackEnd Layout
gli Strumenti
Metto a disposizione del content editor
diversi modi per impaginare i contenuti con i
GridElements
gli Strumenti
Limito i disastri con una progettazione mirata,
associando i BackEnd Layout alle pagine con
Fluid
<f:abracadabra> --- </f:abracadabra>
Partiamo da un mockup
in Pratica
in Pratica
in Pratica
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
Esempio su sito reale
analizzare la Grafica
analizzare la Grafica
Esempio su sito reale
analizzare la Grafica
Esempio su sito reale
Template HTML : t3camp.html <div id=”intestazione”> </div> <div id=”centrale”> </div> <div id=”piede”> </div>
il Template
Per ogni “blocco” di elementi
può esserci più di una tipologia
il Template
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
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
<div id=”intestazione”> </div> <div id=”centrale”> </div> <div id=”piede”> </div>
Realizziamo ogni tipologia
aggiungendo Fluid al tremplate HTML
Fluid <f:section>
<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>
<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>
Come applico questo codice
alle pagine del mio sito?
BackEnd Layout
BackEnd Layout
BackEnd Layout
1 - Home Intestazione grande e animata
+ spazio full-size per i contenuti
+ footer automatico
BackEnd Layout
lib.Slider
lib.content
2 - Pagine Interne Intestazione bassa per immagine fissa
+ spazio full-size per i contenuti
+ footer automatico
BackEnd Layout
lib.header
lib.content
3 – Pagine con Navigazione Laterale Intestazione bassa per immagine fissa
+ colonna laterale per la navigazione
+ colonna per i contenuti
+ footer automatico
BackEnd Layout
Assegnazione del BackEnd Layout
nelle proprietà delle pagine
BackEnd Layout
L'ambiente di lavoro del Content Editor
deve rispecchiare il layout del sito
BackEnd Layout
TypoScript
TypoScript
page.10 = FLUIDTEMPLATE
page.10.file = fileadmin/templates/t3camp.html
TypoScript
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
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
<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>
<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>
Fluid <f:if condition> Vista Backend e Frontend
di una pagina con layout per pagine interne con navigazione
Ora è il momento dei contenuti!
i Contenuti
i Contenuti
4 colonne con bordi
1 colonna
2 colonne
3 colonne
Creare i record GridElements
GridElements
Il content editor può scegliere
come disporre i contenuti
GridElements
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
il Risultato
il Risultato
il Risultato
Non solo BackEnd Layout e GridElements
MultiColumn Multiple Content
TemplaVoila
Fluid Content Engine
Flux
le Alternative
Progettare pensando anche al Content Editor
le Conclusioni
le Conclusioni
La Forza è nulla senza il controllo
le Conclusioni
the End
Grazie per l’attenzione