WSYWIG Integration: Resizing Images

Last updated May 25, 2012. Created by mpgeek on May 24, 2012.
Edited by s.Daniel. Log in to edit this page.

Embedding images via WYSIWYG leaves the user with the ability to either insert at original size, or use any available display formatter / view mode (How to create new view modes using display suite). The problem with this when creating content bodies, the presets available can never meet every sizing need. One solution to this problem is to use Image Resize Filter as a text format to create thumbnails of arbitrary size on the fly (during node save).

The following howto covers how to set up Image Resize Filter with Media 2.x. The particular setup that was used for this process is as follows:

• 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)
• TinyMCE v3.5.0.1 -or- CKEditor v3.6.3.7474

These steps have also been validated to work with 7.x-2.0-unstable3+24-dev + (CKEditor 3.4.2.6041 || TinyMCE 3.3.9.3). Here's how:

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).

The first question that probably pops into your head is "why can't I just enter a new width and height in the media markup?" The answer is user-entered data into the 'native' width and height are overwritten with the width and height from chosen display formatter (Original, Large, etc.). This is good since it helps enforce display formatters and avoids making devices download an image larger than necessary.

Image Resize Filter provides a means for producing sized thumbnails in WYSIWYG-enabled fields without needing a slew of image styles to handle them.

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".

Caveat

Employing this method of allowing image resize in WYSIWYG, users could potentially create a lot of images. You just need to consider how much resizing is going on and monitor disk usage in that regard. We might need some drush tools for taking some action when images are not referenced anymore. Come to think of it, that could be handy for Media in general.