Skip to content

Image resize

media_directories_image_resize is a text format filter. When an <img> tag in rich-text content has both width and height attributes, the filter generates a resized derivative of the original image and rewrites the src to point at it. The result: editors who set explicit dimensions in CKEditor (via the image options plugin, for example) actually serve a physically smaller file to the front-end, instead of a full-resolution image scaled down by the browser.

The filter has no admin form. The only thing you configure is where to place it in the filter pipeline.

Install

drush en media_directories_image_resize

Dependencies: core filter, core image. No dependency on the rest of Media Directories — you can use this filter on its own.

Additional setup

Enable the filter and place it after image embeds

Open the text format that renders inline images (typically full_html) at /admin/config/content/formats/manage/full_html:

  1. Under Enabled filters, tick Resize images.
  2. In the Filter processing order section, drag Resize images to a position after any filter that produces <img> tags — most importantly Embed media and Display embedded entities. The filter is a transform (TYPE_TRANSFORM_REVERSIBLE) with a default weight of 20, so on a vanilla setup it lands in roughly the right place; double-check when you have unusual filters in the mix.

Filter processing order with Resize images placed after image-producing filters

If the filter runs before the markup that introduces the <img> tags, there's nothing to resize and the filter is a no-op for that content.

How derivatives are stored

Resized files are written to public://resize/<style-hash>/. They're generated on demand on the first render and cached on disk, so you don't need a styled image style for every possible width/height combination.

Verifying the install

  • Insert an image into rich text with explicit width and height (CKEditor's image resize handles, the Image options plugin shipped with media_directories_browser, or hand-edited HTML).
  • View the rendered output and inspect the <img>. Its src should point to a file under /sites/default/files/resize/… whose pixel dimensions match what you typed in the editor.