Hi,

I'm using:
CKEditor 6.x-1.0 with CKEditor 3.1
Drupal 6.15
Lightbox2 6.x-1.9
IMCE 6.x-1.3

All works perfectly except when I set an image border in the CKEditor interface. Then a border is indeed created, but image resize filter resizes the image to the same number of pixels as the border and stretches it.

So: upload image of 480x640 via CKEditor and IMCE, set height and width to 48x64 with no border. Check and everything is fine: 48x64 image which when clicked on opens a lightbox with a 480x640 image.

Go back to edit and set a border of 1. Check and there is a 1x64 resized image stretched to fit a 48x64 box with a 1 pixel border.

Let me know if more information or pix are required - thanks for a great module!

CommentFileSizeAuthor
#5 image_resize_filter_border_width.patch969 bytesquicksketch

Comments

quicksketch’s picture

quicksketch
he/him
commented

Wow, that's pretty interesting. My guess is that CKEditor is creating HTML that is something like this:

<img src="something.png" style="width: 200px; height: 200px; border-width: 2px" />

Image Resize Filter's regexs then probably match the "width: 2px" at the tail end of "border-width: 2px" and assumes that's the width.

However to confirm my theory, could you post the raw HTML created by CKEditor? Do this by disabling the editor on the node form, or use the HTML button in the toolbar. Please don't use the generated HTML on node view, since clearly this will be modified by Image Resize Filter. Make sure to post it in <code> tags in your reply.

ozish’s picture

ozish commented

OK firstly here goes with what you asked for (I think - assuming that "Source" button is the same as "HTML" button?):

<img alt="" src="/sites/dorset/files/b38.gif" style="border-style: solid; border-width: 1px; width: 42px; height: 43px;" />

In this case I haven't even resized the image - thought that might be an important clue - it's the original size (just a button I uploaded) and Image Resize Filter has created a file "b38-1x43.gif" which is being displayed in the page with the following HTML.

<a href="/sites/dorset/files/b38.gif" rel="lightbox"><img alt="" src="/sites/dorset/files/resize/b38-1x43.gif" style="border-style: solid; border-width: 1px; width: 42px; height: 43px;"  height="43" /></a>

As you can see I am using the Image Resize Filter "Link to the original" and addition of rel attribute "lightbox" which is working perfectly.

Just to clarify - I have created a new "Story" with just an image in the body using CKEditor and setting a border of 1. I haven't resized the image, just left the default width and height. Then clicked the "Source" button in CKEditor and copied the source in the first code segment above. Then I've checked the files/resize directory and found that the above 1x43 file was created. Then I've copied the source from the displayed page which shows a stretched 1x43 gif.

ozish’s picture

ozish commented

Is there any other information or action required on my part? I would volunteer to look into this myself, but I am already overcommitted elsewhere at the moment!

quicksketch’s picture

quicksketch
he/him
commented

Nope, I can figure it out from here. I'll look into this next time I'm working on Image Resize Filter.

quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Fixed
StatusFileSize
new image_resize_filter_border_width.patch969 bytes

This should correct the issue, requiring that the words "width" and "height" be self-standing words, with the only characters allowed before them being a space, a semi-colon, quote (single or double), or angle bracket. I think this should prevent any unexpected matching things like borderWidth (HTML 4) or border-width (CSS property). It should work with tags structured like any of the following:

<img width="x" height="y" style="border-width: zpx" />
<img width="x"height="y"style="border-width: zpx" />
<img width='x' height='y' style='border-width: zpx' />
<img width='x'height='y' style='border-width: zpx' />
<img width=x height=y style="border-width: zpx" />
<img style="width: xpx; height=ypx; border-width: zpx" />
<img style="height=ypx;width: xpx;border-width: zpx" />

Hopefully we won't see any more mangled HTML formats than any of those.

ozish’s picture

ozish commented

Yahoo! Works for me - thank you very much for your time.

Status: Fixed » Closed (fixed)

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