Responsive Images with max-width issue

[Christoph]

Hi there!

Is there a way of getting rid of the width and height attributes in img-tags?

I want to use my images uploaded in ProcessWire in a responsive website, but when width and height dimensions are specified, the max-width approach doesn't work.

Thanks for help!

[Adam Kiss]

It depends on what images are you talking about. It can be either image field, or images used in tinymce (text) field. In case of image field, the answer is simple - just generate your output without those attributes. As with TinyMce, this will be tiny bit harder-you'll have to run preg_replace on your text field, like so:

  <?php
    $content = preg_replace('<<<regexp>>>', '', $body->content_field);

instead of <<<regexp>>> will be your image attributes targetting regexp-i'm on iphone so it would kill me to come with it, but i'm sure you'll find something acceptable on google

[ryan]

This should work:

$page->body = preg_replace('/ (width|height)=.\d+./', '', $page->body); 

I just kept it simple since I don't think there are any other tags with width/height attributes that PW's TinyMCE would use.

[slkwrm]

Ryan, doesn't it delete all the width=dd occurences on a page, not just in html attributes? Just in case.  

[Adam Kiss]

@slkwrm: yes it does, although not on page per se, only in '$page->body' field. Not to make assumptions, but there shouldn't be much more other width='' occurences, if you use HTML5/XHTML1–those are generally only used on images (and I can see valid use on table/tr/td elements).

[slkwrm]

Thanks, Adam.

Still, it's a good thing to remember in case some of your output's gone

[Christoph]

Thanks for your help guys!

Ryans's method works great. There's one more question:

Do I need to use it on every field were the editor is involved or is there a way to get rid of it for the whole site/template?

[ryan]

In this case you are modifying content at runtime to change it before it's output. You could setup something in your header include (if you using one) to take care of all your fields at once. Or you could create a Textformatter module to do it for you. This one would be particularly simple:

/site/modules/TextformatterResponsiveImages.module

<?php
class TextformatterResponsiveImages extends Textformatter {

        public static function getModuleInfo() {
                return array(
                        'title' => "Responsive Images",
                        'version' => 100,
                        'summary' => "Remove the width tags from images so they can be responsive."
                );
        }

        public function format(&$str) {
            $str = preg_replace('/ (width|height)=.\d+./', '', $str);
        }
}

Place in /site/modules/, install it, and then select it for any of your fields where you want it to apply.

[Christoph]

Thanks again, Ryan!

The module works great!

[apeisa]

I just edited the TinyMCE settings and removed width and height from valid elements (input tab). I left img like this:

img[src|id|class|alt]

EDIT: There is much better solution than this. Just leave width and height intact and use max-width: 100%, height: auto on your css.

More info here:

Edited January 3, 2013 by apeisa

[ryan]

Great solution! This is a far superior solution to using the module.

[Christoph]

Apeisa, could you tell me where to make these changes for TinyMCE?

THX!

[apeisa]

Apeisa, could you tell me where to make these changes for TinyMCE?

THX!

This can be made through PW admin - just edit the field where you have tinyMCE inputfield, then under Input tab there is "TinyMCE Advanced Configuration Options" label and under that there is "Valid elements". Remove img[width,height] or just replace everything with this:

@[id|class],a[href|target|name],strong/b,em/i,br,img[src|id|class|alt],ul,ol,li,p[class],h2,h3,h4,blockquote,-p,-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],#th[colspan|rowspan|width|height|align|valign|scope],code,pre

[apeisa]

I just edited the TinyMCE settings and removed width and height from valid elements (input tab). I left img like this:

img[src|id|class|alt]

There is one big drawback using this method: after this if you edit image, tinyMCE/PW loses the image width/height setting you have gave it, and image has it's original size again.

[97s]

This worked perfect for me. I build responsive websites, and basically I just took out the height parameter out of the tinyMCE. I left the width, as my clients can still use it to determine the maximum size they want the image to be, then with the CSS rules for fluid images it shrinks and automatically adjust the height on its own.

[adamspruijt]

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

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

I've never needed to remove either the height or width attributes, or are you trying to accomplish something different than what I am thinking?

[apeisa]

I just recently discovered the height: auto; trick myself, and yes, it does solve the problem very nicely.

[adamspruijt]

Ok good to hear Apeisa, I was going to mention it but started wondering if I was misunderstanding what the desired result was.

[NooseLadder]

I can confirm as well that height:auto works without making the other changes.