Want to get Lullabot article, videocast, and podcast announcements delivered right to your in-box?
Let us know your email address (we won't share it) and we'll let you know when anything exciting happens.
Effortless Inline Thumbnails: Image Resize Filter
Drupal version: 6.x
February 1, 2009
There are a lot of approaches for resizing images (ImageCache, Image, iMCE, and many others). However when building a site for a simple user (no previous web experience), I found that all of these approaches required too much effort on the part of the end user. Why can't a user just resize an image in their WYSIWYG, and not worry about the size of the image at all? That's the goal accomplished by the Image Resize Filter. Despite its extremely techie-sounding name, it's ridiculously easy to use. It provides inline resizing of images to match any <img> tag in any HTML inserted in any Drupal textarea that supports filtering.
Image Resize Filter Project Page: http://drupal.org/project/image_resize_filter
Comments on this post will automatically be closed three months from the original post date.
Twitter
Mailing list
RSS Feed
Comments
Video incorrect URL
FYI, the file's filename seems to be loading incorrectly. The file shows up in the videocast feed as "Image resize filter.mov", but it's actual filename sees to be "Image%20resize%20filter.mov" so iTunes is getting a 404 error trying to load it directly.
That's because you can't use
That's because you can't use spaces in any type of web URL. If you try to link a file with spaces, each space is turned into %20 as you have noticed. When creating files for the web you should use either - or _ instead. Web aware software should be intelligent enough to take care of this and load files with %20 properly for those people who don't know this...
They are still using the
They are still using the crappy old Video module. It doesn't handle spaces correctly when creating the media enclosure in the rss feed.
I syndicate the feed using my video module here: http://openpackage.biz/feed-item/580 , but I had to manually enter the url for this video. You can watch the videos inline like YouTube.
woot
Hey, this is a great and simple module. Imagecache funcionality on the fly - it makes sense.
A lot of end users just scale them down no matter how big they were before - and with current pixel-mass of an average digicam this can cause a ridiculous page load time.
A candidate for Drupal's own Wysiwyg editor for sure - if we ever get one. Maybe it could be worked into FCKeditor and TinyMCE Modules as an additional Plugin - the Drupal Break Button is proprietary to Drupal also, I think.
Way to go!
According to the article the
According to the article the feature works in any text area that supports input filtering. So shouldn't it be compatible with fckeditor by default?
Yep, Works Right Away
This doesn't need to be "enabled" to work with WYSIWYGs at all, it works with FCK and tinyMCE (or any other editor).
60 seconds to bliss.
Wow. Never has a module brought so much joy to me in so little time. It took 60 seconds to install and configure, plays nicely with the Better Formats module, and eliminates the need for me to explain why/how they need to resize their photos before uploading. A million thanks to you and your kin.
Excellent work! I got those
Excellent work! I got those videos from the diwd and was immediately looking for this.
This is an issue with the FCKeditor and not this module, but just thought I'd mention the behavior.
In FCKEditor, if you edit the image using the dialog it updates the width tag, BUT if you update the image using the handlebars in the window it adds the width as an inline style: style="width:123px..." etc.
If the input is set to Filtered HTML, the width will be stripped out in this case, and the Image Resize Filter won't work.
So I'm guessing, unless FCKEditor is updated, the only option is to allow Full HTML to the editor role you want.
Now Fixed
Thanks, I got this same report in the Drupal.org issue queue (http://drupal.org/node/371864). It now works regardless of the order of the input formats and with FCKeditor's style-type tags.
Use the WYSIWYG Filter
@hairybrew
You can use the WYSIWYG Filter to get the Image Resize Filter working with FCKEditor without allowing Full HTML.
Guys, no-one on iTunes is
Guys, no-one on iTunes is able to see this episode. It's been broken for over a week now.
Feed Fixed
Sorry, our old video module doesn't support spaces in file names. How embarrassing. The feed is now updated with a space-free file name for the video.
What about transliteration
Doesn´t your "old" video module work together with transliteration?
Anyway - thanks for this brandnew Image-Resize Filter!!
4k
Thanks Nate
Thanks Nate. I've had many instances where I could use this module. It's going straight into my toolbox!
An ambitious idea?
Nate:
This is cool and great for most uses. What would you think about extending it to more than "resize" to also include "crop". With the already included connection to the original image, I think this would be the "killer" image include tool, because then you'd be able to select what part of the image to show, in what scale, without losing the complete image.
Cheers, and congratulations on another excellent addition to Drupal's already formidable arsenal.
Image resize filter needs absolute paths?
Hi,
what a wonderful little and powerful module. Is there a chance to be able to use relative paths to images as well?
i.e. if you use
<img src="path/to/my/image.jpg" />the filter does not resize the image If you use<img src="/path/to/my/image.jpg" />it obviously does.Is this done on purpose and is there any way to change it to resize images with relative paths as well?
Wonderful image resize module
Thanks to Nate Haug for His outstanding stuff. I love this module. This actually reduce a lot of time mine. I am also using drupal to make my drupal website and use this image resize module.
Nice work mate
Nice work mate
Wow
WOW! What a great, elegant module!
Great usability!
Easy administration!
Works with and without WYSIWYG!
IMCE won't allow images to auto-delete
I love this module, but the resized images do not auto-delete if uploaded with IMCE. Any chance of that being implemented?
can't get it to work
no matter what i do within drupal (6.10)
with or with out tinymce module i can't get it to work
image resize filter and YUI editor
The image resize filter seems to do its work on an image after the image resize handles have changed via user input.
Has anyone used the image resize filter to set a width and/or height to an image being posted which is not dependent upon the user input?
For example, if a user forgets to resize a 800x600 image, a way to have the image resize filter scale it down to 480x360 automatically upon publishing would be really neat. I wonder if there might be a simple solution for that.
For me the question is largely in regard to integration with the YUI WYSIWYG editor.
When using YUI i am able to use the image resize filter in posts no problem. However if the user neglects to resize the image at all i lose the nifty lightbox/thickbox overlay (Link to the original) and i also end up with an image which is too big for the post until the user gets in there to re-edit and resize.
This very handy module is so cool! Thanks Nate!
image resize filter and YUI editor follow up
to hopefully simplify my previous post
might there be a way to incorporate a setting whereas
if no user input via image handles has occurred,
then enable image resize filter to scale image to xwidth X xheight (thereby also initializing the lightbox/thickbox overlay)
cheers
image resize filter and YUI editor -- answer
I was pointed in this direction in answer to this question.
http://drupal.org/node/433116
Many Thanks
Id also request an automatic
Id also request an automatic resize feature when someone puts any img link in their post.
I used vbulletin for a time and they have a great module for this called The Image Resizer: http://www.vbulletin.org/forum/showthread.php?t=184571&highlight=resize
Thanks for the effort on this great module :)
It would be nice if you
It would be nice if you could re-use your thumbnails. So if you have created a thumbnail for eg. Drupal, you can simply choose that thumbnail from an imagebank the next time you need it.
Thanks!
Thank you very much for this module, Nate. Nicely done, and the video is a nice documentation for it. Piece o' cake!
Does it use Imagecache?
Hi, great idea you have there, I have a question though. Does your module use imagecache to resize images or it's independent from imagecache ?
I think it would be nice if it would be using imagecache profiles. For example if it's an embedded (inline) image on forums for example it would have dimensions of 500 width maximum.
Also it would be a very nice feature a lightbox or thickbox intergration, to show the full image on a popup box.
Good jop keep it up !!
this module
Very good module, il like it
That's a excellent work,easy
That's a excellent work,easy to install and you can fast use it.
Maybe core team should think to implement it by default in Drupal.
This filter is a must have in my point of view.
This is cool,
but what wysiwyg text editor are you using ?
This is a nice tips,thank
This is a nice tips,thank you to have make me discover it :)
nice
Thanks for the help. I use thumbnails on my website.
FCKEditor's image resizing fails in Safari
The image resizing functionality of FCKEditor fails in Safari. At least in Safari 4, with FCKEditor 2.6.5.
Also see http://cksource.com/forums/viewtopic.php?f=6&t=11623.
Fantastic!
Great idea, well implemented, simple screencast. Thank you! I'm currently struggling with the best inline image solution for my needs. This module is now a serious contender.