How to wrap image with div in typo3? - typo3

Question

To remove default wrap around image, i have used this template code:
tt_content.image.20.rendering.noWraps {
imageRowStdWrap.dataWrap = |
noRowsStdWrap.wrap = |
oneImageStdWrap.dataWrap = |
imgTagStdWrap.wrap = |
editIconsStdWrap.wrap = |
caption.wrap = |
}
# Set this as active rendering method
tt_content.image.20.renderMethod = noWraps
I want to override it above codes for a specific section.
Here is my code to do so:
SCREENSHOTS<styles.content.get
SCREENSHOTS.select.where = colPos = 9
SCREENSHOTS.renderObj.dataWrap = <div class="screen">|</div>
It doesn't work. How to do it?

Answer 1

According to the documentation for the CONTENT object:
Since in the above example .renderObj is not set explicitly, TYPO3 will automatically set 1.renderObj < tt_content, so that renderObj will reference the TypoScript configuration of tt_content. The according TypoScript configuration will be copied to renderObj.
Since you declare SCREENSHOTS.renderObj.dataWrap = <div class="screen">|</div> you properly wont have any configuration automatically copied to your renderObj.
If I understand your goal correct then you wish to remove all wraps around 'image only' content element and wrap it all in one div tag <div class="screen">|</div>. The following is untested but should work if your provided first code blocked worked for all your 'image only' content elements.
# Create a new renderMethod named 'noWraps' which can be used across the whole system
tt_content.image.20.rendering.noWraps {
imageRowStdWrap.dataWrap = |
noRowsStdWrap.wrap = |
oneImageStdWrap.dataWrap = |
imgTagStdWrap.wrap = |
editIconsStdWrap.wrap = |
caption.wrap = |
}
SCREENSHOTS < styles.content.get
SCREENSHOTS {
select.where = colPos = 9
renderObj < tt_content
renderObj {
# Set renderMethod to 'noWraps' only for this section
image.20.renderMethod = noWraps
# Change the default wrapping around the content element but only if it's a 'image only' contant element
stdWrap.innerWrap >
stdWrap.innerWrap.cObject = CASE
stdWrap.innerWrap.cObject {
key.field = CType
default < tt_content.stdWrap.innerWrap.cObject
image = TEXT
image.value = <div class="screen">|</div>
}
}
}
If the above code dose not work then just write a comment and then I will take a look into it.