You are hereBlogs / Kevin Carbonaro's blog / Image Resizer Filter for Drupal is working
Image Resizer Filter for Drupal is working
Today I managed to get the Image Resizer module working which completed my Drupal Create/Edit content solution using a WYSIWSYG editor, an image uploader, and an Auto Image Resizer.
During content creation, when an image is inserted into the editor area and the image is resized by dragging its corners to make it smaller, the image resizer filter works its magic upon saving the article.
A new resized image is created and this image is automatically linked to the original image. Not only that, but I configured it to add the lightbox attribute to the link, so that when clicked, the original image is displayed using the lightbox module.
How cool is that! :)
Hey Kevin, i just started using this module configuration too, but can't figure out how to get the images to link to the original. Did you do anything special to make that happen?
Thanks, joe
jlmillr at gmail.com
Hi!
I had the same problem. Two things:
1. ckeditor is NOT compatible with image resize filter. In case replace it with the "old" fckeditor.
2. Input filters. I use HTML purifier. Image resize filter must be arranged AFTER it. Of course, only if you use filtered html.
Regards
Panos
Panos,
I do not fully agree about ckeditor not being compatible with image resize filter. I have been using both of them together successfully without any problems.
As you mentioned Input filters are a bit tricky to use and it is there that one will have problems with the configuration. I have quite a lot of time logged trying to figure out how to set them up. Once they are working as required I always create a full backup of the website :)
Kevin
Joe,
1. Make sure in the input formats, the Image resizer is enabled.
2. Click the Configure Tab.
3. You will find a few settings related to the image resizer.
click image to enlarge
I hope the above helps you in configuring Image resize filter.
Kevin
I set up a site on my devel box with colorbox, insert and image resize filter (HTML purifier). The exact same page on a sandbox server. The src attribute was partially stripped off in the sandbox server, I could only see the image border, however on click it displayed correctly the lightbox. Also, it pointed (correctly) to the resize directory. On the other server, however, it pointed to the image cache directory, and everything was displayed correctly.
After experimenting a while with input formats and colorbox setting, I simply turned off image resize filter, and the image was displayed correctly! I uninstalled the module, emptied cache etc. and there was no problem in resizing the image (wysiwyg module, ckeditor 3).
The same applied to a fresh drupal installation without image resize filter and without colorbox.
Now, I am really confused: why do I need the filter if image resizing works out of the box?
panos
Panos,
You mentioned image cache directory. Did you mean that you are using image cache module?
The image cache module (which does not come out of the box) works similarly to image resize filter module, but generates the images dynamically when the page is loaded andthen temporarily stored in its cache directory so that they can be served to other requests when needed again.
The only problem that I see is when there is a lot of traffic on the website. The server will take a longer time to generate the image if it does not exist yet due to less resources available. The advantage is that it is probably easier to manage.
On the other hand, image resize filter module generates the image when content is created. The images are stored permanently.
I never use image cache module myself in such a requirement when I need the images saved for future use, even in other created content. I also think that there is a possibility of image cache conflicting with image resize filter due to their similar functionalities.
Still you may have found a workable solution for your requirements :)
That is the power of Drupal and its thousand of modules (and why I am a big fan)... there are a lot of different module recipes to get what you want :)
I hope I answered as much as possible what you asked for. Let me know if you have any more queries.
Kevin.
Kevin,
thanks for your quick response. I am a drupal-newbie and a lot things have to be "digested". As far as I understand the image handling, there are three (actually countless) possibilities for inline handling.
You can use a wysiwyg editor, resize your image and hit save. The drawback is that the image is dynamically resized, which means that big images are downloaded, with the corresponding traffic.
You can use image cache (or IMCE, Image Browser etc.) to create dynamically the images and cache them, as you explained above.
You can use Insert and Image Resize Filter to create new pictures (nodes) on-the-fly, which are permanently stored. This gives you more flexibility than image cache (no presets), less traffic problems and the price you pay is more wasted space on your server, since these images are not reused. And less worries about removing images from your site.
I like this approach but I like ckeditor too. And they do NOT work together.
The src attribute is broken in ck editor. An example:
This is the image tag with FCKeditor (2.6.6)
img width="233" height="155" style="width: 233px; height: 155px;" src="http://ktima-arodamos.sandbox/sites/ktima-arodamos.sandbox/files/resize/posted_images/img_9281_0-233x155.jpg" alt="" title="Bed"
And this is the
same tag for ckeditor (all 3.x versions).
img width="221" height="147" title="Bed" style="width: 221px; height: 147px;" src="/sites/ktima-arodamos.sandbox/files/resize/-221x147." alt=""
Anything else equal. Note that this also happens without html filtering (I use HTML purifier), and that I also do not use image cache in this example. Rearranging the filters results in simply not applying image resize filter at all (as it should be, of course).
Hence, I conclude that either I am missing something important in the configuration of ckeditor, or it simply doesn't play nicely with image resize filter. So, lastly, I am thinking that maybe image resize filter is not needed at all.
If you think I am wrong (hopefully), please correct me.
Panos
PS
I have no issues with colorbox in any of the above scenarios.
Panos,
From what I am understanding, some HTML tags are being stripped from the src links. Image resize filter does not strip tags, but insert tags or link for the image.
Stripping of tags is usually done by filters that are filtering out possibly dangerous HTML tags from the saved content. In your case it may be that the HTML filter or HTML Purifier is removing or partially removing tha tags.
You mentioned switching off these filters are giving the same results. Do make sure they are not called separately from the ckeditor profiles.
HTML filters may also have configuration settings where you can specify which tags not to strip from the saved content.
I have ckeditor 3.x working successfully on one of my new projects (coming soon), with lightbox, imce and image resize filter.
What I can suggest (if your location is in my timezone), is to use teamviewer software and I show you on test site how I install my preferred modules. Maybe that will help you recognise where the setup is going wrong and find the ultimate solution :)
Just use the contact me page to send me an email and include your email as well so we can correspond more easily.
Kevin
I turned off every filter except of image resize - nothing. I uninstalled image resize filter, disabled all filter settings in ckeditor, emptied caches etc. then reinstalled image resize filter, and ... nothing again. Note that all this happened without filtered html.
Then, I replicated your setup, i.e. I installed IMCE. Bang! Now I have two inline pictures, one of them properly displayed the other one an empty frame. Hence, (at least for me) CKeditor does not work with the Imagefield-Insert combination but it works with IMCE. However, I can not say what exactly is responsible.
Panos
Apologies for not replying sooner...
For ckeditor to work you do not need the wysiwyg module, I do not use it.
Instead use the following:
ckeditor module - http://drupal.org/project/ckeditor
ckeditor 3.x - http://ckeditor.com
IMCE - http://drupal.org/project/imce
Image Resize Filter - http://drupal.org/project/image_resize_filter
If the teaser break button does not work... try the latest ckeditor module (dev version)
You might need to fix the left align button if it does not work:
ckeditor.config.js (Line 88) - config.extraCss = 'body{text-align:left;}';
You may also find the following very useful:
Better Formats: http://drupal.org/project/better_formats
Kevin