How do I get images to not have width and height attributes?

[ScotsScripts]

I have image uploads working but I'd like to keep the width and height attributes out of the image tag, but I haven't figured out a way to do that yet. Any help would be much appreciated!

I'm using the scripts from the http://getcontenttools.com/tutorials/handling-image-uploads page.

[anthonyjb]

Whilst you could modify the behaviour of the CE Image element not to render out with width and height attributes, these attributes are required (and by default will be acquired by the natural width/height parameters) for the resize behaviour - and so this isn't supported as is.

If you want to set an image as a background image for an element to support responsive sizes then you can use fixtures (see for example the images on this page: https://3dtotal.com/tutorials/t/hair-creation-with-xgen). This page is using ContentFlow so that fixtures can be added into the page dynamically so that may not be practical for you.

However, the truth is images need a major overhaul in the next release, responsive images are far better handled by browsers now than when I original wrote CT and CT needs updating to better reflect/support the features now available.

[ScotsScripts]

Thanks for the response. I guess that makes it tough to use this in a responsive css environment, although I think for my application the easiest solution will be to strip out the width and height attributes from image tags that have the data-ce-maxwidth attribute before regular output (web viewing.) I'm not familiar with the idea of fixtures, but I'll experiment with that idea as well.

[ScotsScripts]

Do you have any html/js examples of how to use image fixtures with contenttools? The site you posted seems overly complicated as far as image stuff goes.

[anthonyjb]

Typically it would look something like this in the HTML:

        <div
            class="image-banner"
            data-ce-tag="img-fixture"
            data-fixture
            >
            <img alt="" src="">
        </div>

[ScotsScripts]

Thanks for the info.

When I try to use data fixture the image shows up when viewing the content but it doesn't show up as css background image when editing.

<div 
class="ce-element ce-element--type-image-fixture" 
data-ce-tag="img-fixture" 
data-fixture="" 
style="background-image:url('/images_elements/some_image.jpg');">
</div>

It seems to be missing it's data-ce-size attribute. Any ideas?

[anthonyjb]

@ScotsScripts we typically apply styles to the image fixtures that set it's size not based on the image itself, as a fixture we expect the image to be a fixed size (though of course it may vary at different resolutions), data-ce-size isn't required as fixture images can't be resize by the user.

If you take a look at the images on this page for example: https://3dtotal.com/tutorials/t/model-a-stylized-female-rider-in-zbrush-maya#article-high-poly-zbrush you'll see that the image fixtures used for the images shown side by side are position within containers. The containers set the size of the image fixtures and are relative, where as the image fixtures are set to absolute and positioned top, bottom, left, right as 0.