�ݺ�ߣ

TypoScript:
personalizzare la
configurazione di
css_styled_content

2
TYPO3 CMS 6.2 LTS – Le novità Roberto Torresani @RobTorresani
Roberto Torresani
● Libero professionista
● Presidente di Posit s.c. (Trento)
● TYPO3 dal 2004
● Certified TYPO3 Integrator
● Membro attivo della comunità italiana di TYPO3
● Ideatore e Promotore del T3Camp Italia
● Membro da gennaio 2013 del Business Control
Committee della TYPO3 Association
roberto.torresani@typo3.org
twitter: @RobTorresani
www.torresani.eu

2
TYPO3 CMS 6.2 LTS – Le novità Roberto Torresani @RobTorresaniTypoScript
Agenda
● Personalizzazione css_styled_content
● Novità TypoScript in TYPO3 6.2 LTS
● Estensione Content Designer

2
Cos'è css_styled_content?
Qualcosa che viene inserito per fare andare i template

2
Cos'è css_styled_content?
● Libreria di codice TypoScript per la renderizzazione
dei contenuti delle pagine
● 155 righe di file constant (con commenti e righe bianche)
● 2251 righe di file setup (con commenti e righe bianche)

2
Utilizzare css_styled_content?

2
Modificare css_styled_content?
● Constat Editor
● TypoScript Object Browser
● Codice TypoScript

css_styled_content:
personalizzare
constants

2
Modificare il tag header da usare
per Type = Default
content.defaultHeaderType = 2
Risultato: <h2>Chi sono</h2>

2
Impostare un top e bottom margin
content.spaceBefore = 10
content.spaceAfter = 20
Spazio aggiunto prima e dopo i contenuti

2
Impostare target dei link
Link esterni
styles.content.links.extTarget = _blank
Link interni
styles.content.links.target = _blank

css_styled_content:
personalizzare
setup

2
Visualizzazione contenuti colonne
ColPos per identificare colonne contenuti:
NORMAL (0) – LEFT (1) – RIGHT (2) – BORDER (3)
Personalizzati in Backend Layout

2
Visualizzazione contenuti colonne (2)
styles.content.get = CONTENT
styles.content.get {
table = tt_content
select.orderBy = sorting
select.where = colPos=0
select.languageField = sys_language_uid
}
page.10.subparts.COL_DX < styles.content.getRight
page.10.subparts.COL_5 < styles.content.get
page.10.subparts.COL_5.select.where= colPos = 5

2
lib.parseFunc_RTE
Istruzioni per la “parserizzazione” del testo (es. Tag
html consentiti e non consenti)
E' utilizzato per i contenuti di TYPO3
lib.TESTO.parseFunc = < lib.parseFunc_RTE

2
lib.stdheader
Definisce la renderizzazione dei TITOLI dei contenuti
E' qui che viene definito Hx tag, csc-firstHeader
Eventuale sottotitolo

2
tt_content
E' il cuore di css_styled_content
La renderizzazione dei contenuti di TYPO3 sono gestiti
con un CASE sul campo “CType” (Tipo di contenuto)

2
tt_content.stdWrap.innerWrap
Istruzioni per gestire il campo section_frame

2
tt_content.stdWrap.innerWrap (2)
Inserisce le classi csc-default, csc-frame, …
Inserisce il tag <div id=”cxxx”> ….. </div>
Gestisce gli spazi prima e dopo il contenuto

2
tt_content.stdWrap.prepend
Inserisce un ancora prima di ogni contenuto
prepend = TEXT
prepend.dataWrap = <a id="c{field:_LOCALIZED_UID}"></a>
prepend.if.isTrue.field = _LOCALIZED_UID

2
Codice di definizione dei contenuti
text image
textpic bullet
uploads table
multimedia swfobject
qtobject media
mailform search
menu shortcut
list div
html

2
Codice per il contenuto text
tt_content.text = COA
tt_content.text {
10 = < lib.stdheader
20 = TEXT
20 {
field = bodytext
required = 1
parseFunc = < lib.parseFunc_RTE
editIcons = tt_content:bodytext, rte_enabled
editIcons.beforeLastTag = 1
editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/localla (...)
prefixComment = 2 | Text:
}
}

2
Definizione di codice CSS
Il codice è inserito nella pagina:
<link rel="stylesheet" type="text/css"
href="typo3temp/stylesheet_bcd352657f.css?1374765566"
media="all">
Può essere disabilitato con (> 4.6):
config.removeDefaultCss = 1

Novità TypoScript
in
TYPO3 6.2 LTS

2
Inclusione TypoScript

2
strPad

2
Ma cos'è strPad? (da TYPO3 CMS 6.1)

2
_DEFAULT_PI_VARS

2
Debug dell'output

2
File links

2
Funzione replacement di stdWrap

2
Funzione replacement di stdWrap (2)

2
Cobject FILE

2
Menù di categorie

2
Condizioni

2
Condizioni (2)

2
Condizioni (3)

2
cObject FILE

2
Escludere doctype da albero pagine

2
Disabilitare moduli nel backend

2
Condizioni nel Layout di Backend

2
Content Designer
● Autore: Hendrix Reimers
● Ultima versione: 2.3.2
● Data ultimo rilascio: 14 marzo 2014
● Numero download: 1714
● Sviluppo basato su extbase
● Già autore dell'estensione TypoScript Content

2
Cosa fa Content Designer
● Permette di creare nuovi tipi di contenuto
semplicemente con del codice TypoScript
● Non è necessario scrivere del codice PHP

2
Utilizzare Content Designer
● Installare l'estensione
● Includere codice statico
● Scrivere il proprio codice TypoScript

2
�ݺ�ߣr

2
Quesito
● E' disponibile il codice di esempio dello slider
con HTML, css, JavaScript
● Necessità di fornire al cliente un interfaccia semplice
per modificare le foto

2
Risultato (1)

2
Risultato (2)

2
Codice TypoScript (1)
tt_content.tx_contentdesigner_homepage_slider <
plugin.tx_contentdesigner
tt_content.tx_contentdesigner_homepage_slider.settings {
title = Home Page �ݺ�ߣr
description = Lo slider nell'homepage

2
Codice TypoScript (2)cObject {
sTEMP {
sheetTitle = Impostazione
el {
immagine {
label = Immagine
config {
type = group
internal_type = file
allowed = gif,jpg,jpeg,png
max_size = 5000
uploadfolder = fileadmin/slider_homepage/
size = 10
maxitems = 20
show_thumbs = 1
selectedliststyle = Width:180px
} } } } }

2
renderObj {
10 = COA
10 {
10 = TEXT
10 {
field = immagine
split {
token = ,
cObjNum = 1
1.cObject = IMAGE
1.cObject {
file.import.current = 1
file.import = fileadmin/slider_homepage/
file.width = 871c
file.height = 405c
wrap = <li>|</li>
}
}
wrap = <div id="slide"><ul class="slides">|</ul></div>
}

2
25 = TEXT
25 {
field = immagine
split {
token = ,
cObjNum = 1
1.cObject = IMAGE
1.cObject {
file.import.current = 1
file.import = fileadmin/slider_homepage/
file.width = 103c
file.height = 52c
wrap = <li><figure>|</figure></li>
}
}
wrap = <div id="carousel" class="flexslider"><ul class="slides">|
</ul></div>
}
wrap = <div class="slider-block">|</div>
} } }

Se possibile
non inserite codice
PHP nel vostro sito:
dovrà essere
mantenuto

ROBERTO TORRESANI
roberto.torresani@typo3.org
twitter: @RobTorresani
G+: http://plus.google.com/+RobertoTorresani

�ݺ�ߣ

T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styled_content

More Related Content

T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styled_content