How to change structure and image class in tt_content element

Very often, especially with the advent of responsive and bootstrap website, one needs to change the structure and default classes of TYPO3 for images present in tt_content.

In my case I had the need to change the image class with alignment "above center", loaded with an image type tt_content.

The procedure is as follows: In TSref, let's add the following code lines that go to overwrite the normal structure of tt_content type image orientation "above and Central". In this way we are going to replace the class "csc-textpic csc-textpic-center csc-textpic-above" with "imageAboveCenter" :

tt_content.image.20{
 layout = CASE
 layout {
 key.field = imageorient
 # above-center
 default = TEXT
 default.value = <div
 class="imageAboveCenter">###IMAGES######TEXT###</div>
 }
 }

In my case I also only changed tt_content with image case (image). If you want to change the case tt_content/image (textpic) we must go to replace the first line of the code posted above with the following:

tt_content.textpic.20{ ... }

Of course we can go to overwrite the class for each case related to the orientation of the image. Just drop in TSref the following lines of code and modify the different cases as needed.

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