Responsive Images

[DV-JF]

Hello,

I wanne make my templates responsive but have a little problem with the images because the height and width are stored in the outputted code like:

<img class="align_center" width="982" height="655" alt="" src="/site/assets/files/1024/start.jpg">

Is it possible to delete those attributes in the generated code by default?

Greets... Jens.

[Luis]

By default Processwire doesn´t generate any markup.

Could you please provide us more information about your site setup?

Do you use any site profile oder module?

[arjen]

Could this thread be of any help?

[Harmster]

You can try to use JQuery?

Though its not really a pw answer

removeAttr

[diogo]

By default Processwire doesn´t generate any markup.

Could you please provide us more information about your site setup?

Do you use any site profile oder module?

@Luis, must be on tinyMce.

@Jens, this is how tinyMCE treats images and there are more people requesting the ability to od what you want. You can read about it here http://www.tinymce.com/develop/bugtracker_view.php?id=4770.

Make sure to use images on tinyMCE only when you need them. I suspect that for this case it would be more suitable to output the images directly from the image fields. If you still want to have them in the middle of the text, you can use my Image Tags module as it doesn't assume any size for the images http://modules.processwire.com/modules/textformatter-image-tags/.

[Luis]

@Luis, must be on tinyMce.

yes right, never thaugt about images via tinyMCE

[alan]

Not tried it yet, but this may be of interest http://adaptive-images.com/ as it is to do with images in responsive design even though it is not strictly to do with responsive images.

Edited December 21, 2012 by alanfluff

[adamspruijt]

As I posted in the thread Arjen link to, the height and width being output is a non-issue.

Am I missing something here? I've never had a problem with this working

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

No need to remove attributes, this is (from what I've read) the best way to handle this. Height will go back to being relative to the image proportions and the width will max out at 1oo% of its parent. Since the "width" attribute is equivalent to the "width" css property we know then that the "max-width" property has the power to override this.

[Soma]

Not tried it yet, but this may be of interest http://adaptive-images.com/

This is just to serve different image sizes depending on viewport size, I've used it here http://www.the-omnia.com and it works well but has nothing to do with responsive images.

[alan]

it works well but has nothing to do with responsive images.

Thanks Soma, edited

[onjegolders]

On Arjen's thread, Apeisa's solution works for me with the caveat he mentions.

[netcarver]

The v2.5.1 version of textile just gained better support for responsive layouts by optionally omitting dimensions from images. I'll have to work out how to make the TextileTextformatter modules configurable before I can add a control into the module for this feature. I'm beginning to think that I might just make omitting the dimensions the default in PW for now.

[adamspruijt]

Not to get too pushy with this one but as I've already mentioned, you are solving a problem that never existed. The best approach from a semantic/usability standpoint is to include this in you CSS:

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

max-width: 100% will ensure that an image cannot be larger than it's parent and height: auto will override the height attribute on the image allowing its height to be based on the original aspect ratio.

[apeisa]

Not to get too pushy with this one but as I've already mentioned, you are solving a problem that never existed.

I edited my post in linked topic trying to make this fact more clear and avoid further confusion

[adamspruijt]

I edited my post in linked topic trying to make this fact more clear and avoid further confusion

Thanks Apeisa! It's not as though from anything I've read there is a problem with removing the attributes I just feel that it's a lot nicer to use a simple piece of css and avoid the troubles all together.

[onjegolders]

I've always used max-width: 100% before but pretty sure I ran into a problem anyway though I can't remember why...

[apeisa]

Height auto is the magic.

[onjegolders]

Height auto is the magic.

Sorry, yes I mean I always used both max-width and height auto since building responsive sites, don't know what the issue I had was but I could've sworn there was one!