CODEWITHSUNDEEP
htmlcontent-management-systemtypo3responsive-designtyposcript
alienlebarge
alienlebarge

Reputation: 3188

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

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 ?

Upvotes: 12

Views: 25016

Answers (12)

Mennan
Mennan

Reputation: 4497

Use jquery

set an id to your image object:

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

$('#myimage').removeAttr("height").removeAttr("width");

here is alternative javascript code:

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

Upvotes: 5

Martin Wunderlich
Martin Wunderlich

Reputation: 153

There is a solution for old TYPO3s with TYPOSCRIPT:

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

Use this stdWrap-TS where your image is rendered.

Upvotes: 1

chrisfish
chrisfish

Reputation: 21

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.

Upvotes: 1

Mitch
Mitch

Reputation: 31

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>

Upvotes: 1

Sebastian
Sebastian

Reputation: 929

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

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

Upvotes: 0

Errol
Errol

Reputation: 46

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
}

Upvotes: 2

Jpsy
Jpsy

Reputation: 20862

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

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

I suggest to do that only for the img tags where you really need the pictures to be fluid. This could be done by adding an id or class to the img tags or any surrounding tag.

E.g. if your fluid images are located in a wrapper div with class "fluid_pics" you could use: 

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

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

Upvotes: 3

user2428118
user2428118

Reputation: 8104

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');

Upvotes: 1

Christian Michael
Christian Michael

Reputation: 2316

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; }

Upvotes: 6

witrin
witrin

Reputation: 3763

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

Upvotes: 3

Sundar
Sundar

Reputation: 159

Call an image tag in document.ready function.

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

Upvotes: 10

Ivaldi
Ivaldi

Reputation: 660

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

Upvotes: 6

Related Questions