Molto spesso, soprattutto con l'avvento di siti responsive e sviluppati con bootstrap, si ha la necessità di mettere mani e quindi modificare la struttura e le classi di default di TYPO3 per le immaigni presenti nei tt_content.
Nel mio caso avevo la necessità di cambiare la classe all'immagine con allineamento centrale, caricata con un tt_content di tipo image.
La procedura è la seguente:
Nel TSref andiamo a inserire le seguenti linee di codice che vanno a sovrascrivere la normale struttura del tt_content di tipo image con orientamento "sopra e centrale". In questo modo andiamo a sostituire la class "csc-textpic csc-textpic-center csc-textpic-above" con "imageAboveCenter" o con la classe che serve:
tt_content.image.20{
layout = CASE
layout {
key.field = imageorient
# above-center
default = TEXT
default.value = <div
class="imageAboveCenter">###IMAGES######TEXT###</div>
}
}
Nel mio caso inoltre ho modificato solo il tt_content di tipo image. Se si vuole modificare il tt_content con image bisogna andare a sostituire la prima riga del codice postato sopra con la seguente:
tt_content.textpic.20{ ... }
Ovviamente possiamo andare a sovrascrivere la classe per ogni caso relativo all'orientamento dell'immagine. Basta inserire nel TSref le seguenti linee di codice e modificare i diversi casi in base alle esigenze.
tt_content.textpic.20.default {
layout = CASE
layout {
key.field = imageorient
# above-center
default = TEXT
default.value = <div class=" csc-textpic csc-textpic-center csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
# above-right
1 = TEXT
1.value = <div class=" csc-textpic csc-textpic-right csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
# above-left
2 = TEXT
2.value = <div class=" csc-textpic csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div>
# below-center
8 = TEXT
8.value = <div class=" csc-textpic csc-textpic-center csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
# below-right
9 = TEXT
9.value = <div class=" csc-textpic csc-textpic-right csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
# below-left
10 = TEXT
10.value = <div class=" csc-textpic csc-textpic-left csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div>
# intext-right
17 = TEXT
17.value = <div class=" csc-textpic csc-textpic-intext-right###CLASSES###">###IMAGES######TEXT###</div>
# intext-left
18 = TEXT
18.value = <div class=" csc-textpic csc-textpic-intext-left###CLASSES###">###IMAGES######TEXT###</div>
# intext-right-nowrap
25 = TEXT
25.value = <div class=" csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES######TEXT###</div>
# intext-left-nowrap
26 = TEXT
26.value = <div class=" csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES######TEXT###</div>
}
}