T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styled_content

TypoScript: personalizzare la configurazione di css_styled_content

2TYPO3 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

[email protected]: @RobTorresani

www.torresani.eu

2TYPO3 CMS 6.2 LTS – Le novità Roberto Torresani @RobTorresaniTypoScript

Agenda

● Personalizzazione css_styled_content

● Novità TypoScript in TYPO3 6.2 LTS

● Estensione Content Designer


Cos'è css_styled_content?

Qualcosa che viene inserito per fare andare i template


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)


Utilizzare css_styled_content?


Modificare css_styled_content?

● Constat Editor

● TypoScript Object Browser

● Codice TypoScript

css_styled_content: personalizzare

constants


Modificare il tag header da usare per Type = Default

content.defaultHeaderType = 2

Risultato: <h2>Chi sono</h2>


Impostare un top e bottom margin

content.spaceBefore = 10 content.spaceAfter = 20

Spazio aggiunto prima e dopo i contenuti


Impostare target dei link

Link esterni styles.content.links.extTarget = _blank

Link interni styles.content.links.target = _blank

css_styled_content: personalizzare

setup


Visualizzazione contenuti colonne ColPos per identificare colonne contenuti:

NORMAL (0) – LEFT (1) – RIGHT (2) – BORDER (3)

Personalizzati in Backend Layout


Visualizzazione contenuti colonne (2)

styles.content.get = CONTENTstyles.content.get {

table = tt_contentselect.orderBy = sortingselect.where = colPos=0select.languageField = sys_language_uid

}

page.10.subparts.COL_DX < styles.content.getRight

page.10.subparts.COL_5 < styles.content.getpage.10.subparts.COL_5.select.where= colPos = 5


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


lib.stdheader

Definisce la renderizzazione dei TITOLI dei contenuti

E' qui che viene definito Hx tag, csc-firstHeader

Eventuale sottotitolo


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)


tt_content.stdWrap.innerWrap Istruzioni per gestire il campo section_frame


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


tt_content.stdWrap.prepend

Inserisce un ancora prima di ogni contenuto

prepend = TEXTprepend.dataWrap = <a id="c{field:_LOCALIZED_UID}"></a>prepend.if.isTrue.field = _LOCALIZED_UID


Codice di definizione dei contenuti

text image textpic bullet uploads table multimedia swfobject qtobject media mailform search menu shortcut list div html


Codice per il contenuto texttt_content.text = COAtt_content.text {

10 = < lib.stdheader

20 = TEXT20 {

field = bodytextrequired = 1parseFunc = < lib.parseFunc_RTEeditIcons = tt_content:bodytext, rte_enablededitIcons.beforeLastTag = 1editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/localla (...)

prefixComment = 2 | Text:}

}


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à TypoScriptin

TYPO3 6.2 LTS


Inclusione TypoScript


strPad


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


_DEFAULT_PI_VARS


Debug dell'output


File links


Funzione replacement di stdWrap


Funzione replacement di stdWrap (2)


Cobject FILE


Menù di categorie


Condizioni


Condizioni (2)


Condizioni (3)


cObject FILE


Escludere doctype da albero pagine


Disabilitare moduli nel backend


Condizioni nel Layout di Backend

EstensioneContent Designer


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


Cosa fa Content Designer

● Permette di creare nuovi tipi di contenuto semplicemente con del codice TypoScript

● Non è necessario scrivere del codice PHP


Utilizzare Content Designer

● Installare l'estensione

● Includere codice statico

● Scrivere il proprio codice TypoScript


Slider


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


Risultato (1)


Risultato (2)


Codice TypoScript (1)

tt_content.tx_contentdesigner_homepage_slider < plugin.tx_contentdesigner

tt_content.tx_contentdesigner_homepage_slider.settings { title = Home Page Slider description = Lo slider nell'homepage


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 } } } } }


Codice TypoScript (3) 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> }


Codice TypoScript (4) 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 possibilenon inserite codicePHP nel vostro sito:

dovrà esseremantenuto

ROBERTO TORRESANI [email protected]

twitter: @RobTorresani

G+: http://plus.google.com/+RobertoTorresani

T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styled_content

Technology

Transcript of T3Camp Italia 2014 - TypoScript: personalizzare la configurazione di css_styled_content