ckeditor_media_image_style

This module lets beginners in Drupal apply image styles (e.g., thumbnail, large) to embedded media images right in CKEditor 5, via a simple selector button, for flexible display without global changes.

This module allows content editors, even those new to Drupal, to easily apply different image styles (like thumbnail, medium, or large) to embedded media images directly within the CKEditor 5 editor. It adds a simple button to select the desired style for each image embed, without needing to configure global view modes or code.

What solution does this module provide?

In Drupal, images are often managed as "Media" entities and embedded into content using CKEditor 5. By default, all embedded images use the same fixed display settings. This module solves that by letting editors choose a specific image style per embed, giving flexibility for layout and performance while keeping things simple and reusable.

Features

Basic functionality: When you embed a media image in CKEditor 5, a new toolbar button appears on the selected image. Clicking it opens a dropdown to choose from available image styles (or "Original" to remove any style).

Unique features:

• Per-embed image style selection – independent of global media view modes.
• Automatic preview in the editor with dynamic CSS for style dimensions.
• Works seamlessly with Drupal's Media system and image styles (scale, crop, resize).
• Simple configuration: enable per text format and choose which styles to offer.

When and why would someone use this module?

Use it when editors need to display the same image in different sizes within one page or across content (e.g., thumbnail in a teaser, full-width in body). It's ideal for sites prioritizing editorial flexibility without forcing developers to create multiple view modes for every use case.

Use cases:

• Blog posts with mixed thumbnail and large hero images.
• News articles embedding galleries or inline images at varying widths.
• Any content-heavy site where non-technical editors manage layouts.

Post-Installation

After installing and enabling the module, nothing appears automatically – you must configure it per text format.

1. Go to Configuration > Content authoring > Text formats and editors (/admin/config/content/formats).
2. Edit the desired text format (e.g., Full HTML or Basic HTML).
3. In Enabled filters, check "Extract image styles from embedded media".
   
   Important: Drag it in the processing order so it runs before "Embed media".
4. In CKEditor 5 plugin settings, find "Media Image Style Selector": check "Enable media image style selector" and select which image styles to make available (or leave empty for all).
5. Save the text format.

Now, when editing content:

• Insert a media image via the Media button.
• Select the embedded image – a new style icon button appears in the media toolbar.
• Click it, choose a style, and save.

Special considerations: The filter order is critical for correct rendering. Changes invalidate caches for pages with affected media.

Additional Requirements

This module requires:

• Drupal core ^10 or ^11
• CKEditor 5 (included in core)
• Media module (included in core)
• Image module (included in core)

No external libraries, APIs, or additional contributed modules are needed.

Recommended modules/libraries

• CKEditor Media Resize: Allows drag-to-resize images in the editor, complementary for more dynamic sizing.
• Editor Advanced Link or other CKEditor 5 enhancement modules.
• Modules adding advanced image effects (e.g., Focal Point, ImageMagick) pair well for better cropping options.

Similar projects

CKEditor Media Resize[](https://www.drupal.org/project/ckeditor_media_resize): Provides very similar functionality – per-embed image style selection in CKEditor 5. The core feature set is nearly identical. Choose based on which one has better maintenance, fewer open issues, or fits your Drupal version best.

Core Media view modes: The default Drupal approach is to create multiple view modes with different image styles and allow overriding the view mode on embed. This is more rigid and requires developer intervention for each new style combination.

Other approaches (patches or modules that render media as plain <img> tags) enable native CKEditor resizing but lose the benefits of the Media entity system (reuse, alt text management, etc.).

Supporting this Module

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

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