Remove attributes “height” and “width” of the imag

Question

In order to create a responsive website with Typo3 and Twitter Bootstrap, I would like to remove the height and width attributs of images

Here's how images are generated in Frontend via content element of type text & image and image

<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" />

I would like to remove the dimension attributes and get this:

<img src="typo3temp/pics/a625b79f89.jpg" alt="blaba" />

Can anyone help me ?

Answer 1

If your image has an id or another unique attribute assigned, you can easily do this:

var myImg=document.getElementById('myImage');
myImg && myImg.removeAttribute('height') && myImg.removeAttribute('width');

Answer 2

For Typo3 6.2 upwards you may set a custom image render layout (snippet belongs to TS setup):

tt_content.image.20.1 {
    layout {
        mylayout {
            # equals default rendering, except width and height removed
            element = <img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###BORDER### ###SELFCLOSINGTAGSLASH###>
        }
    }
}

Enable the custom layout for css_styled_content (snippet belongs to TS constants):

styles.content.imgtext.layoutKey = mylayout

See https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html#cobj-image-layoutkey for details on the IMAGE cObject.

Answer 3

it dont work in 6.1 :/ but u can use CSS:

img {
    display: block;
    max-width: 100%;
    height: auto;
}

Answer 4

This is a VERY simple solution with jQuery. i found the answer at wpwizard.net.

Here's the URL: http://wpwizard.net/jquery/remove-img-height-and-width-with-jquery/

Here's the jQuery:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){

    $('img').each(function(){ 
        $(this).removeAttr('width')
        $(this).removeAttr('height');
    });

});
</script>

Answer 5

It's not possible to remove the height or width image attributes with typoscript.

But you could override it with CSS in order to create a responsive website.

img { height:100% !important; width:100% !important; }

Answer 6

TypoScript to Remove "width" and "height" attributes from the source code. TYPO3 CMS 6.1+.

tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}

tt_news example: News List

plugin.tt_news.displayList.image.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}