Remove the "height" and "width" attributes of the image tag

Question

To create a responsive website with Typo3 and Twitter Bootstrap , I would like to remove the image height and width attributes

Here, how images are generated in Frontend through an element of content like text and images and images

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

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

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

Can anybody help me?

Answer 1

Cannot remove image attributes of height or width using typoscript.

But you can override it with CSS to create a responsive website.

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

Answer 2

Call the image tag in the document.ready function.

 $('img').removeAttr('width').removeAttr('height'); 

Answer 3

FYI: There is no way to remove this using typoscript. The width and height attribute is hardcoded in the sysext/cms/tslib/class.tslib_content.php cImage . (Typo3 4.7)

Answer 4

This will be possible with the TYPO3 6.2 LTS. Checkout http://forge.typo3.org/issues/49723 .

Answer 5

Use jquery

set image object id:

 <img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" id="myimage" /> $('#myimage').removeAttr("heigth").removeAttr("width"); 

here is javascript alternative code:

 var myImage= document.getElementById("myimage"); myImage.removeAttribute("heigth"); myImage.removeAttribute("width"); 

Answer 6

To remove the effects of attributes of a fixed width and / or height without actually deleting these attributes, you can set them back to "auto" in your CSS definitions:

 img { height: auto !important; width: auto !important; } 

I suggest doing this only for img tags where you really need pictures. This can be done by adding an id or class to the img tags or to any surrounding tag.

eg. if your liquid images are in a wrapper div with the class "fluid_pics", you can use:

 .fluid_pics img { height: auto !important; width: auto !important; } 

Often you only need to set the height in the auto, as the width is already overwritten to be 100% your framework (e.g. Twitter Bootstrap).

Answer 7

TypoScript to remove the width and height attributes from 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 } 

Answer 8

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

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

Answer 9

For Typo3 6.2 up, you can customize your own image rendering layout (the fragment belongs to TS settings):

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

Enable custom layout for css_styled_content (fragment 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 object.

Answer 10

There is a solution for older TYPO3 with TYPOSCRIPT:

 stdWrap { replacement { 10 { search = /\s+(width|height)="[^"]+"/ useRegExp = 1 replace = } } } 

Use this stdWrap-TS where your image is displayed.

Answer 11

it does not work in 6.1: / but you can use CSS:

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

Answer 12

This is a very simple solution with jQuery. I found the answer on wpwizard.net.

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

Here's 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>