Resizing images to the actual size used in the editor?

Question

Is there a way to resize images to the actual size they will be shown in the post? I have users that import a large image and then resize it in the visual editor. This is easy, since they can just drag the image until it is the size they want, without first opening an image editor, resizing the image, saving it, and uploading it as a separate attachment. Of course, this sometimes results in an image that is 100px wide in the post, but 1500px in reality.

Is there a plugin that does this when a new post is saved? I would like to keep the existing full-size image (for linking, or later resizes), but just add an extra size (and save it in the _wp_attachment_metadata object), so this post has the image in the correct size, and a reference to the full-size attachment.

Of course, all existing posts should also be handled once. <img> tags there might have just a width, just a height, or none of them: this should all be cleaned up, so they all have the correct width, height and an image of that size.

Answer 1

I created two plugins that together should solve my needs. They are currently in an early alpha stage, and all comments are welcome.

The base plugin is an On-Demand Resizer. This plugins monitors requests for non-existing files in the uploads dir, and creates images of the requested size if needed. For example, image-200x100.jpg will create and return image.jpg, but resized to 200 by 100 pixels. The image is saved by that name in the directory, so further requests are handled straight by the server.

The second plugin, Resize img tags, modifies <img> tags so their src attributes include width and/or height data. This allows the first plugin to serve the correct images. Together they do what I want, and I only need to create a run-once function to convert all existing posts, but that should be easy (I don't want to hook into the_content for something that should run only once).

A third "bonus" plugin, Virtual intermediate images, intercepts the creation of the intermediate images when uploading a new image in WordPress. Since they are still created by the first plugin if requested, this allows you to specify multiple image sizes without taking up disk space unless they are actually used. This is not needed for the two first to work, but it was an easy addition, and it highlights the fact that I still need to work around the WordPress image editor, but I will do that when I create my thumbnail editor, which will also use the first plugin.

Answer 2

I have searched the plugin directory for "resize" or "crop" (the latter for another question), and noted my findings in a public Google spreadsheet. The plugin search is very confusing in its result numbers (the last page of the "resize" search shows "Showing 145-150 of 273 plugins"), so I may have missed a few. Semi-related notes: everybody seems to think the world needs another slideshow plugin. Few seem to realize that content_save_pre may be a better filter to do heavy parsing than the_content.

I did not test any of these plugins yet, but here is a list of plugins that seems to do what I want. I added the "Compatible up to" version number in parentheses.

• ChoiceCuts Image Juggler, with multiple image handling functions accessible via an API (3.0.1)
• AutoThumb, rewrites URLs to a handler that uses phpThumb (2.9.2)
• Image Symlinks, via a special [img] shortcode (2.9.2)
• com_resize, rewrites URLs to a handler that uses phpThumb, also external images (2.6)
• ImageScaler, creates new sizes if needed and changes URLs in the images (2.3)
• ImageScaler Modded, a slightly modified version of ImageScaler (2.3.1)

Personal thoughts: The first four rewrite the URL to a dynamic page (something like /wp-content/plugins/my-plugin/image.php?src=[original src]&w=100&h=50), with varying forms of caching. I prefer a real image that is created as-needed, similar to the approach ImageScaler takes. However, I would split this up (and include hakre's suggestion in the comments) and first rewrite all URLs from /wp-content/uploads/2010/11/image.jpg to /wp-content/uploads/2010/11/image-100x50.jpg, and then let a script create the missing images. The first request for this image creates the image, all subsequent requests use this created image. This also allows me to split the functionality across different plugins. I will post this solution in a separate answer.

These plugins limit images to a certain maximum size (How is this different from specifying $content_width?):

• JP-redesign-images, checks both hotlinked and oversized images (only if they are too large, not if they are just resized) (3.0.1)
• Hungred Image Fit, checks too large images (3.0.0)

The following plugin is interesting for other reasons:

• TimThumb meets TinyMCE, includes a manual resize button in the TinyMCE editor (2.8.4)

This is a Community Wiki post, so it can be updated if you find new plugins.

Answer 3

What about utilizing timthumb and passing variable to automatically change the image size/dimensions and zoom levels? This way the original image sizes can still be maintained. If you need some examples down this line let me know.

Answer 4

Wordpress offers three default sizes (small, medium, large) that can be configured. If you use these, Wordpress creates resized copies. It is probably good style to use those and set the number so they fit the current style. This results in images not having different sizes all over the page and allow global adjustments when the theme changes.

Answer 5

The recently released Image Pro plugin seems to do exactly this. Hadn't tested myself yet, demo looks very impressive, note poor browser compatibility (Firefox-only at moment).