ckeditor_media_resizer

When editors embed media images inside a CKEditor 5 text field, Drupal provides no built-in way to resize them — the image renders at its original size or the size dictated by the view mode, and changing dimensions requires a developer to create additional view modes or custom code. Achieving per-embed resize control otherwise means leaving the editor, manipulating image styles, or editing raw HTML.

This module solves that by adding drag handles and a dimensions form directly onto embedded media inside CKEditor 5. Editors click on an embedded image and either drag corner or edge handles to resize visually, or click a toolbar button to open a balloon form where they can type exact width and height values in multiple CSS units (px, %, em, vw, vh). The resize dimensions are stored as data attributes on the <drupal-media> tag and applied to the rendered <img> element through a text filter, without modifying the original media entity.

New to Drupal? Think of it this way: normally when you embed an image using CKEditor's media system, it shows up at one fixed size. This module lets you grab the corners of that image and drag to make it bigger or smaller — just like resizing an image in a word processor — and those dimensions are saved with your content automatically.

Features

The core functionality of this module is straightforward: it extends CKEditor 5's media embed widget with interactive resize capabilities, allowing editors to control the display dimensions of embedded media images without leaving the editor.

Key features include:

• Drag handles on selected media: When an editor clicks an embedded media image, an overlay with 8 directional handles (corners and edges) appears. Dragging any handle resizes the image in real time with a live dimension label showing the current width × height.
• Balloon dimension form: A toolbar button opens a CKEditor 5 balloon panel styled identically to native CKEditor forms (like the table properties panel). Editors can type exact width and height values with full control.
• Multiple CSS units: The dimension form supports px, %, em, vw, and vh units via a pill selector, so editors can set responsive percentage widths or fixed pixel dimensions as needed.
• Aspect ratio lock: When working in pixels, a lock button maintains the original aspect ratio automatically — changing width recalculates height proportionally, and vice versa.
• Quick scale presets: One-click buttons for 25%, 50%, 75%, 100% of the original size, plus an "Original" button that restores the image's native dimensions.
• Configurable min/max width: Administrators can set minimum and maximum width limits (in pixels) through the plugin settings form to prevent editors from making images too small or too large.
• Non-destructive storage: Resize dimensions are stored as data-media-width and data-media-height attributes on the <drupal-media> tag. The original media entity is never modified — dimensions are applied at render time through a text filter.
• Text filter for frontend rendering: The included "Apply resize dimensions to embedded media" filter reads the data attributes and applies inline width, max-width: 100%, and height: auto styles to the rendered <img> tag, ensuring responsive behavior on the frontend.
• Works inside containers: The plugin correctly detects and resizes media that is nested inside container widgets (such as CKEditor Advanced Container columns), handling the complex selection hierarchy of nested CKEditor widgets.

When and why would someone use this module? Use cases include:

• Editorial control over image size: Editors can size each embedded image appropriately for its context — a small thumbnail beside text, a full-width hero image, or anything in between — without creating multiple image styles or view modes.
• Responsive images: Using percentage or viewport units, editors can embed images that scale with the container width, improving mobile presentation without developer intervention.
• Landing pages and rich content: When combined with layout modules, editors get fine-grained control over how media appears within columns, sidebars, and multi-column layouts.
• Works in: any content type, Paragraphs, Layout Builder blocks, and any entity with a CKEditor 5 text field that uses the media embed filter.

Post-Installation

After enabling the module, no new configuration pages or content types are created — it integrates directly into the CKEditor 5 toolbar configuration and text format settings:

1. Go to Administration → Configuration → Content authoring → Text formats and editors and edit the text format that uses CKEditor 5 (e.g., Full HTML).
2. In the Toolbar section, the Resize media button is automatically added to the media widget toolbar (the contextual toolbar that appears when you select an embedded media element). No manual drag-and-drop is required.
3. Scroll down to the CKEditor 5 plugin settings section and open Media Resize. Configure: whether resize is enabled, minimum width in pixels (default: 50), and maximum width in pixels (0 = no limit).
4. Scroll down to the Enabled filters section and enable the filter "Apply resize dimensions to embedded media".
5. Important: In the filter processing order, make sure this filter runs after the "Embed media" filter. The resize filter needs the media embed filter to have already converted <drupal-media> tags into rendered HTML before it can apply dimensions to the <img> tags.
6. Save your configuration and clear caches.
7. When editors create or edit content, clicking on an embedded media image will show drag handles around it. Dragging any handle resizes the image. Clicking the resize toolbar button opens the dimension form where exact values can be entered.

Clear caches (drush cr or via the UI at Administration → Configuration → Performance) if the toolbar button or drag handles don't appear immediately after enabling the module.

Additional Requirements

This module requires no external libraries or third-party APIs. The only requirements are Drupal core modules:

• Drupal core ^10 || ^11
• CKEditor 5 (core module) — provides the editor framework this module extends.
• Media (core module) — provides the media entity system and embed functionality.
• Image (core module) — provides image processing capabilities.

All three core modules must be enabled for this module to function.

Recommended modules/libraries

The following modules enhance or complement the functionality of CKEditor Media Resize:

• CKEditor Advanced Container — Adds flexbox-based column layouts inside CKEditor 5. Combined with Media Resize, editors can place images inside columns and control both layout and image dimensions from within the editor.
• CKEditor Media Image Style — Adds an image style selector to the CKEditor 5 media toolbar. While Media Resize controls display dimensions, this module controls which Drupal image style (thumbnail, large, etc.) is used for the source image, allowing editors to optimize both quality and size.
• CKEditor Media Title — Lets editors set a custom title attribute on embedded media images directly from the media toolbar.
• Media Reference Override — Extends Drupal's standard media reference field to allow per-reference overrides of fields like alt text or title, storing the override on the referencing entity rather than the media entity itself.
• Advanced Image Media Attributes Formatter — Extends Drupal's native image field formatters to expose additional HTML attributes (alt, title, class, etc.) as configurable options.

Similar projects

• CKEditor 5 core image resize (Drupal core) — Drupal's core CKEditor 5 integration includes resize capabilities for directly uploaded images (<img> tags), but this does not extend to media-embedded images (<drupal-media> tags). This module fills that gap specifically for the media embed system.
• CKEditor Image Resize — Targets direct image uploads or the older CKEditor 4. This module is specifically built for CKEditor 5 and Drupal's media embed system (<drupal-media> elements), handling the unique challenges of widget-based media rendering where the image is loaded asynchronously inside the editor.
• Manual HTML editing — The traditional workaround used by editors who have no resize module installed: switching to source mode and adding width and height attributes by hand. This approach is error-prone, inaccessible to non-technical editors, and lost when the media embed filter re-renders the element.

If none of the above fits your workflow, this module may be worth evaluating as a straightforward, zero-dependency option that works with any Drupal theme and requires no pre-configuration beyond enabling the filter.

Supporting this Module

This module is developed and maintained by Nelo.

• drupal.org/u/nelo_drup

Check out our sponsor, Dom Host Seo, who made this module possible with their support!

Community Documentation

Currently no external videos or demo sites are available. The module includes detailed help text accessible via Help → CKEditor 5 Media Resize in the Drupal admin interface.

For questions, bug reports, or feature requests, please use the issue queue on Drupal.org.