How to remove div wraps around images in typo3 ?: Satvam Softwares

If we add the image content element, the image HTML output looks something like this.

In this case, due to that div wraps, the images are not responsive too.

So to remove that unwanted wraps around images, below typoscript helps.

# Remove some of the div wraps
tt_content.image.20.imageStdWrap.dataWrap >
tt_content.image.20.imageStdWrapNoWidth.dataWrap >
tt_content.image.20.imageColumnStdWrap.dataWrap >

# Redefine the layout switch with only one default case
tt_content.image.20.layout >
tt_content.image.20.layout = CASE
tt_content.image.20.layout.key.field = imageorient
tt_content.image.20.layout.default = TEXT
tt_content.image.20.layout.default.value = ###IMAGES### ###TEXT###

# Remove the wrap around the image subtext
tt_content.textpic.20.text.wrap = |

# Define a new rendering method without wraps
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

#add custom class to image
tt_content.image.20.1.params = class="image-responsive"

Now the out put HTML looks like below.

Here we added class "image-responsive" to image that makes the image responsive, by applying below css to that class

.image-responsive{
height:auto;
max-width:100%;
}

If we add above typoscript in main TS template, wrap around all images of the website will be removed!.

So to apply it to specific places like only on Templavoila FCE's we can use it like below

10 = RECORDS
10.source.current=1
10.tables = tt_content
10.conf.tt_content < tt_content
10.conf.tt_content.image.imageStdWrap.dataWrap >
.
.
.
.
10.conf.tt_content.image.1.params = class="image-responsive"

Back