CKEditor (Successor to FCKEditor) no longer uses width and height attributes to resize images. Instead it uses inline styles, e.g., style="width: 100px; height="100px".

Unfortunately there is no setting in the config that can be overridden.

See: Ticket #4246 Avoid deprecated image attributes (closed bug: fixed)

(Note: width and height were not among the deprecated attributes for img in XHTML strict, nor are the deprecated in HTML5, so I'm not sure why they were included in the fix)

Ironically, I used to hate how these editors used width/ height attributes instead of css, but I finally came around to it in certain situations.

Regardless of their decision to use style, CKEditor is one of the best editors around and it would be great if there was some way to use it in conjunction with image_resize_filter.

Does image_resize_filter have to use width/ height attributes, or is there a way it could support style properties? Any thoughts?

Comments

quicksketch’s picture

Category: bug » support

Image Resize filter already works with CSS height/width instead of properties if they are available. However there's an existing issue relating to border (see #698506: Setting border width causes image to resize as that width).

okeedoak’s picture

subscribing - CKEditor is impressive.

blasthaus’s picture

Oddly enough, I have Image Resize working with latest stable version of CKEditor when using Firefox and Drupal 6.16, but it won't work using Safari on a Mac. Maybe its a java thing because when you click on the inserted image, it selects the whole thing like text.

quicksketch’s picture

Image Resize Filter has nothing to do with what browser you're using. It reads the HTML on save. If you can't resize an image in your WYSIWYG, it's an issue with the WYSIWYG. Safari in particular doesn't support the resize handles within FCK/CKeditor.

willemtaildeman’s picture

You need to download the latest version with CVS Zach Harkey

quicksketch’s picture

Status: Active » Fixed

I've confirmed again that Image Resize Filter works fine with style tags instead of width/height, and checked that it works with CKeditor just fine.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

eelke’s picture

Version: » 6.x-1.8
Category: support » bug
Status: Closed (fixed) » Active

It doesn't seem to work for me though, when I resize an image in CKeditor, the resized image image gets created just fine after I save the node. But when I re-edit the node, the orginal image is displayed in CKeditor so I have to resize the image again.
When I manually edit the HTML to set the img width/height attributes it works just fine.
Is this an issue with CKeditor and the style attributes?

quicksketch’s picture

Status: Active » Closed (fixed)

Image Resize Filter does absolutely nothing to the original HTML or the editing page, so I don't believe this issue is related.

lunk rat’s picture

I found this after trying to resize using Chrome. I tried with Firefox and all was well ...

protools’s picture

It doesn't seem to work for me though, when I resize an image in CKeditor, the resized image image gets created just fine after I save the node. But when I re-edit the node, the orginal image is displayed in CKeditor so I have to resize the image again.
When I manually edit the HTML to set the img width/height attributes it works just fine.
Is this an issue with CKeditor and the style attributes?

it's really difficult when 10 image on node, every edit resize again ?

protools’s picture

Version: 6.x-1.8 » 7.x-1.13

i find this happend when Limit allowed HTML tags was enabled

How I can configurate "allowed HTML tags" right ?

petu’s picture

Status: Closed (fixed) » Active

I have the same case. Inline size for images resets inside CKEditor if "Limit allowed HTML tags" was enabled.

How to configure "allowed HTML tags"?

I've solved this issue for me. http://drupal.org/project/htmlpurifier helps me filter tags instead of "Limit allowed HTML tags" option.

quicksketch’s picture

Status: Active » Closed (fixed)

How I can configurate "allowed HTML tags" right ?

Per the README.txt, you need to put Image Resize Filter *before* "Limit allowed HTML tags" in the filter order. It is in this position by default, but may need to be adjusted if you have reordered your filters previously.