Jump to content

Responsive Images with max-width issue


Christoph
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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).

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by apeisa
  • Like 2
Link to comment
Share on other sites

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
Link to comment
Share on other sites

  • 4 months later...

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.

Link to comment
Share on other sites

  • 8 months later...

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...