htmltypo3typo3-7.x

How to remove div around an image in typo3?


I added an image in typo3. It showed up with extra div in page.

  <div class="csc-textpic csc-textpic-center csc-textpic-above">
    <div class="csc-textpic-imagewrap" data-csc-images="1" data-csc-cols="2">
        <div class="csc-textpic-center-outer">
            <div class="csc-textpic-center-inner">
            <figure class="csc-textpic-image csc-textpic-last">
                <img src="fileadmin/user_upload/aetuts.jpg" width="200" height="50" alt=""></figure>
            </div>
        </div>
    </div>
</div>

I want something like this

 <img src="fileadmin/user_upload/aetuts.jpg" width="200" height="50" alt="">  

with no extra wrapper.

I can do something like this for removing extra wapper around content.

tt_content.stdWrap.innerWrap >

How to do it for image?


Solution

  • Regarding your specific question

    The following code should remove all wraps around the image. Keep in mind that this also removes the positioning and floating abilities.

    # Remove some 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
    

    .

    How to do that for any content element

    1. Use the Template view in Typo3
    2. Go to the page with your template
    3. Edit your template
    4. Select the Typoscript-Object-Browser at the top (instead of Info/Edit)
    5. Use the search form to find a wrap, e.g. "csc-textpic"
    6. Identify the wraps or templates that you want to remove
    7. Overwrite or delete > them in you Typoscript code