Textformatter To Remove Annoying Image Heights

[diogo]

Hey guys!

I was having some trouble with the RTEs adding the height attribute to images, because it was distorting all my images (I'm using max-width on the CSS), and decided to do something about it. So, here's a small Textformatter module that removes all the Height attributes from RTE fields where it's activated.

https://github.com/ocorreiododiogo/PW-removeHeights

[Martijn Geerts]

Sorry to niggle here diogo, but how does the module behave if you use this one in combination with TextformatterVideoEmbed?

[diogo]

Good point Martijn! I solved that problem by finding the images, and only then removing the attribute. To make it easier I'm using PHP's native Dom parser instead of regular expressions:

$dom = new DOMDocument();
$dom->loadHTML(mb_convert_encoding($str, 'HTML-ENTITIES', 'UTF-8'));

$images = $dom->getElementsByTagName('img');

foreach ($images as $image) {
    $image->removeAttribute('height');
}

$str = $dom->saveHTML();

Beautiful, isn't it?

[adrian]

+1 for DOMDocument over regex

[Martijn Geerts]

Looks great Diogo

[Ivan Gretsky]

In TinyMCE 4 you can just add image_dimensions: false and it will solve the issue. Just tried it out on 3.5.11 and it does not seem to work, so the module is a solution until version 4+ of MCE will be integrated into PW. Did not try on CKEditor - maybe it has it already.

[diogo]

In TinyMCE 4 you can just add image_dimensions: false and it will solve the issue. Just tried it out on 3.5.11 and it does not seem to work, so the module is a solution until version 4+ of MCE will be integrated into PW. Did not try on CKEditor - maybe it has it already.

I hope there is a way to it in the RTEs themselves. Would prefer that than the stupid work of removing them in PHP for sure. But I googled it and didn't find anything for CKEditor. The module was a quick fix for my particular problem.

[Ivan Gretsky]

Nailed it! It is not in the TinyMCE but in the pwimage plugin to it (in the PW core - editor_plugin.js). You can comment out 2 strings and it will work like you want it. There is even a check on some flag "nosize" which should do the work without a hack. I just can't find a place to define it in the admin. (something else is going on here).

I guess, we could ask to add an option to leave widths but no heights to the images inserted in TInyMCE fields.

Edited July 21, 2014 by Ivan Gretsky

[Soma]

They're needed for the.image resize to be working with scaling it in editor. If image has no with or height it won't work.

[diogo]

In this particular case I'm not interested in resizing the images inside the editor, would be even nice not to have that option there. Is it that uncommon to prefer this over giving that option? We could have the option on the field settings of not allowing the resize, and in that case the image tag doesn't  need the height there.

Until then, I will continue to use the module.

[Soma]

Just remove the "advimage" from the plugins... and remove the height and width attribute from img in the "valid_elements" in the TinyMCE advanced config, and be happy

[Ivan Gretsky]

They're needed for the.image resize to be working with scaling it in editor. If image has no with or height it won't work.

Couln't we get those dimensions from the image-file itself? After loading? I guess getting those from the attributes is not even reliable.

And what is that nosize variable doing there? It is populated from "data-nosize" attribute which we should somehow be able to set... I am not so good at this yet to figure this out, but it seems like this can and should be done here, not via the module.

But diogo is surely "the man" that moves PW to be more responsive-ready.

Did not see Soma's reply. Нe is "the other man" .

Edited July 21, 2014 by Ivan Gretsky

[LostKobrakai]

You could circumvent the distortion of your images with css only. 

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

This let's the images scale propotionally. See: http://jsbin.com/yokinuke/1/edit?html,css,output

[diogo]

You could circumvent the distortion of your images with css only. 

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

This let's the images scale propotionally. See: http://jsbin.com/yokinuke/1/edit?html,css,output

The simple solutions are always the best And that's exactly what I did before in other projects 

Edit: Just a short explanation, as this was also the sort of my confusion. This solution only works because the stylesheet as precedence over the "height" attribute, if the RTE would be outputting style="height:400px" instead (like it happens sometimes), it would have precedence over the Stylesheet, and "height:auto" wouldn't work.

[Christophe]

We would/could then use "height: auto !important;", wouldn't/couldn't we ?

(I'm writing with my left hand as I can't really use my right hand for at least one month.)

[bernhard]

today i had the problem that loadHTML added doctype, html and body elements to my modified string. see http://stackoverflow.com/questions/4879946/how-to-savehtml-of-domdocument-without-html-wrapper

this worked for me:

if(!$str) return;

$dom = new DOMDocument();
$dom->loadHTML(mb_convert_encoding($str, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NODEFDTD);

$div = $dom->createElement('div');
$div->setAttribute('class', 'table-responsive');
foreach ($dom->getElementsByTagName('table') as $item) {

    // clone the wrapper div
    $div_clone = $div->cloneNode();

    // replace the table with the div
    $item->parentNode->replaceChild($div_clone, $item);

    // put the table into the div
    $div_clone->appendChild($item);

    // set table class
    $cls = $item->getAttribute('class');
    $item->setAttribute('class', 'table table-striped ' . $cls);
}

$str = $dom->saveHTML();
$str = str_replace("<html><body>", "", $str);
$str = str_replace("</body></html>", "", $str); 

i'm wrapping all tables inside responsive divs and making them look nicer with the "table-striped" class