Generate scaled cached image when scaling in WYSIWYG editor

One way this could be done would be to separate wysiwyg related stuf into media_wysiwyg and require it to have Image Resize Filter

Seems that Image Resize Filter could work fine with Media module, it is only matter of configuration.
I'm using media-1.0-beta5 and image_resize_filter-1.12 and is necesary reorder the filters in 'Text formats' configuration. 'Image resize filter' must be after 'Converts Media tags to Markup', is nice too have 'Limit allowed HTML tags' before the media filter for not have problems when inserting videos from internet.
With this configuration work fine for me.

Hi @tsvenson, I'm not sure exactly which table look at, I'm just starting to see code on modules, I will keep looking for have a better answer, but for now i can tell:
- When select the 'Full HTML' text format while editing, in wich i don't have any wysiwyg configured (just plain text) i see something like this where the image is placed:

[[{"type":"media","view_mode":"media_large","fid":"241","attributes":{"alt":"","class":"media-image","style":"width: 163px; height: 200px; float: right;","typeof":"foaf:Image"}}]]

- When i click over the contextual browser menu and select "See image" the URL for the selected rezised image is something like 'http://mysite.com/sites/default/files/resize/styles/large/public/image-1...'

@tsvenson, yes the embedded media tag is still there, i have resized the image many times and i didn't have problems.

@tsvenson, I can verify that Image Resize Filter does work with Media 2.x. The particular setup that was used to validate:

• drupal-7.14
• media-7.x-2.x-dev (7.x-2.0-unstable5+0-dev)
• wysiwyg-7.x-2.1 (project page)
• image_resize_filter-7.x-1.13 (project page)

Here's how to do it:

Set up the input format with the resize filter

1. Install Image Resize Filter module in the normal way.
2. Head to your site's input format config screen, i.e., example.com/admin/config/content/formats.
3. Click 'configure' for the text format you wish to set up for image resizing with WYSIWYG.
4. Under "Enabled filters" make sure you select "Image resize filter" and "Convert Media tags to markup" [see screenshot #1].
5. Under "Filter processing order", make sure "Image resize filter" is AFTER "Convert Media tags to markup" [see screenshot #1].
6. Under "filter settings", you can twiddle as you wish, but i chose to store locally and add a link if the image has been resized. [see screenshot #1].

In order to get Image Resize Filter to pick up the fact that an image has been resized, and create a thumbnail, the Media markup must change from ...
[[{"type":"media","view_mode":"media_original","fid":"25","attributes":{"alt":"","class":"media-image","height":"244","typeof":"foaf:Image","width":"261"}}]]
... to ...
[[{"type":"media","view_mode":"media_original","fid":"25","attributes":{"alt":"","class":"media-image","height":"244","style":"width: 150px; height: 140px;","typeof":"foaf:Image","width":"261"}}]]

Note that the new width and new height are recorded in the style attribute. This is what Image Resize Filter looks for. When found, a thumbnail will be created at...
files/resize/{original_filename}-{new_width}x{new_height}.{extension}
... and the resized image will be displayed instead of the original, and possibly linked to the original image (depending upon how you set up the filter).

This resizing change can be effected with just the input format setup and editing the HTML accordingly via your WYSIWYG editor of choice in "source" mode. If you'd like to set this up point-n-click style (give users buttons so HTML editing is not required), then you have a little bit more work to do, depending upon your chosen editor.

CKEditor (v3.6.3.7474)

CKEditor is the easiest editor to get working. Not much needs to be done to the WYSIWYG profile other than to be sure you've added the Media browser plugin. Visit the setup screen at example.com/admin/config/content/wysiwyg/profile/{YOUR_PROFILE_NAME}/edit, and make sure the "Media browser" checkbox is selected [See screenshot #2].

Editing workflow

1. go edit your node of choice, insert/upload an image via the Media button.
2. secondary-click on the image and choose "Image Properties".
3. enter a new width
4. tab into the height field and it should be autofilled with an aspect-ratio-respecting height [see screenshot #3].
5. click ok, you will be returned to editing the node
6. save the node

You should see a resized image in the display, and if you inspect the HTML, you will see that thumbnail has in fact been created, displayed, and possibly wrapped with a link to the original image (if thats how you configured the filter).

TinyMCE (v3.5.0.1)

TinyMCE is a little harder in that even if you are using the Context Menu TinyMCE plugin, the context menu that enables you to edit the image width and height is written directly into the width and height attributes of the Media markup instead of the style attribute. So you need a way to edit the style attribute.

To do this you can either use the "Style properties" or "Advanced Image" TinyMCE plugins. Head to example.com/admin/config/content/wysiwyg/profile/{YOUR_PROFILE_NAME}/edit, and select at least one of those two [see screenshot #4]. The steps outlined below assume you chose to use "Style properties" (easier), but the process is the same for "Advanced Image."

Editing steps

1. go edit your node of choice, insert/upload an image via the Media button.
2. select the image by clicking on it, then click the "Style properties" button [see screenshot #5].
3. in the dialog that pops up, enter the width and height in the "Style" field, i.e. "width:87px; height:81px" [without quotes, see screenshot #6].
4. click insert
5. save the node

You should see the sized image in the display, and inspecting the element should reveal that a thumbnail has been created.

This should work for other editors assuming you can find a way to edit the style attribute in the UI. Or, you can just edit the HTML source and add the sizing info "manually".

FYI the above setup in #9 also works with 7.x-2.0-unstable3+24-dev + CKEditor 3.4.2.6041 and TinyMCE 3.3.9.3 libs.

Feel free to open back up if the steps aren't working for you.

Posted: http://drupal.org/node/1599070.

Great work around solution here in #9 and http://drupal.org/node/1599070. However this doesn't cover the case where you're dealing with a WYSIWYG editor like TinyMCE which only generates width and height attributes on the img tag (rather than as CSS properties of the style attribute). If that's your issue then have a look at #1411340-12: Resizing images in WYSIWYG broken in media-7.x-1.0-rc3+ & 2.0-unstable3+.

Now that mobile (and even non-mobile) “retina” devices are all the rage, this issue should perhaps be revisited. Physically scaling images to the reported pixel sizes is no longer the optimal solution in many cases.

For photos, doing this is still generally a decent solution, but in some cases it may be better to size it to 2× of the displayed dimensions. This would normally mean a 4× increase in data size were it not for compression, but using a lower .JPG quality can compensate for this. Since the actual pixels are much smaller, the artifacts will be as well and not be anywhere near as objectionable as they would otherwise be.

For .GIFs and .PNGs (which are usually logos and UX elements), sizing to 2× is best these days. They really should be hand-crafted to 2× the desired display size (assuming a standard 1× display) for best results rather than relying on algorithmic scalers built into browsers and in PHP libraries.

With this in mind, perhaps for now it would be nice to have such an autoscaling feature only apply to .JPGs (which are usually photos), not to .GIFs or .PNGs.