Jump to content
Christoph

Responsive Images with max-width issue

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!

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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).

Share this post


Link to post
Share on other sites

Thanks, Adam.

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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]

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

  • Like 3

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...