The easiest end-user solution for resizing inline images.

This filter makes it easy to resize images, especially when combined with a WYSIWYG editor such as tinyMCE, CKeditor etc. Users never have to worry about scaling image sizes again, just insert an image and set it's height and width properties in HTML (this is done automatically by WYSIWYG editors) and the image is resized on output to match the HTML.

Features:

  • Automatically resizes both local and (optionally) remote images.
  • Optionally create a link to full size images from the resized inline versions.
  • Prevents inline "hot linking" of images from other sites by storing them locally.
  • Adds height and width attributes to inline images when your users are too lazy to add them.

Demos:
Image Resize Filter demo and configuration options by Lullabot.
Demo combining FileField Insert with Image Resize Filter by MustardSeed Media.

Webkit/Chrome/Safari Users:
The "resize handles" typically shown in WYSIWYGs do NOT work in Webkit-based browsers (which includes Safari and Chrome) due to a shortcoming in the implementation of these browsers. See https://bugs.webkit.org/show_bug.cgi?id=12250 and this issue for discussion: #1102294: Webkit-based browsers (Safari/Chrome) do not support resize handles.

Requirements:

  • PHP 5 or higher

Drupal 8 Installation:

  1. Install the module https://www.drupal.org/docs/extending-drupal/installing-drupal-modules..
  2. Visit Configuration->Content authoring-> Text formats and editors (/admin/config/content/formats). Click "Configure" next to the text format you want to enable the image resize filter on.
  3. Check the box for "Image Resize Filter: Resize images based on their given height and width attributes" for resize the images automatically and "Image Resize Filter: Link images derivates to source" to link the images to their original image.
  4. IMPORTANT: Re-order your enabled filters under "Filter processing order". The Image resize filters must be the last filters in the list.
  5. Optional. Click "configure" next to the text format the image resize filter has been enabled on, then click the "Configure" tab to set additional configuration for the the image resize filter.

Drupal 7 Installation:

  1. Place image_resize_filter directory in sites/all/modules. Then enable the module in Drupal.
  2. Visit the Administration»Configuration»Content authoring»Text formats (admin/config/content/formats). Click "configure" next to the text format you want to enable the image resize filter on.
  3. Check the box for "Image resize filter" under the list of filters and save the configuration.
  4. Click the "Rearrange" tab to check the order of the filters.

    If using the Image Resize Filter on the "Filtered HTML" text format, you MUST ensure:

    1. <img> tag is in the list of allowed tags.
    2. The "Image resize filter" is run BEFORE the "HTML filter".
    3. If using the Image Resize Filter with BBCode or some other non-HTML filter, the "Image resize filter" must be run AFTER the non-HTML filter.
    4. If using Pathologic, Image Resize Filter must be run AFTER the Pathologic filter too.
  5. Optional. Click "configure" next to the text format the image resize filter has been enabled on, then click the "Configure" tab to set additional configuration for the the image resize filter.

D7CX: This module had a full, stable release the day Drupal 7 was released!

Supporting organizations: 
This module was created by Nate Haug
Co-Maintainance by Ra Mänd
Help in maintaining Drupal 8/9/10 versions
Ongoing maintenance

Project information

Releases