Editor image styles
This module automatically applies Drupal image styles to images inserted directly into text editor content, ensuring consistency and optimization. It works with various editors and can be configured to use specific image styles for inline and background images.
Editor Image Styles automatically applies Drupal image styles to inline images and background images in text editor content.
It helps site builders ensure images added through editors like CKEditor 5 and Gutenberg are optimized and consistently styled.
Features
- Applies Drupal image styles to inline
<img>tags and CSSbackground-imageURLs. - Configurable image style selection (e.g., thumbnail, large, custom).
- Supports a base path setting to detect images in content.
- Optional support for background images.
- Works with any filter-enabled editor such as CKEditor 5 and Gutenberg.
This module is useful when editors insert images directly in text areas but you still want those images delivered through Drupal’s image style system for better performance and design consistency.
Post-Installation
- Go to Configuration → Content Authoring → Editor Image Styles and select your preferred settings.
- Navigate to Configuration → Content Authoring → Text formats and editors.
- Edit the text format you want (e.g., Full HTML or Gutenberg).
- Enable the Editor Image Styles filter and place it in the correct filter order (after HTML filtering, before cache filters).
Once configured, images in your text editor content will automatically use the defined image style.
Additional Requirements
- No additional modules beyond Drupal core are required.
- Compatible with Drupal 10 and Drupal 11.
Recommended modules/libraries
- Responsive Image (core) – for advanced responsive image handling.
- Image Optimize – for further image delivery optimization.
Similar projects
- Filter module (core) – Provides generic filtering but does not support Drupal image styles in editor content.
- Responsive Image (core) – Focused on
<picture>elements and breakpoints, not inline or background images inside editors.
Editor Image Styles fills the gap by applying Drupal image styles directly to text editor content.
Supporting this Module
Development is community-driven. Feedback, contributions, and issue reports are welcome via the issue queue.
Community Documentation
Project page: Editor Image Styles on Drupal.org
Contributions, demos, and documentation can be shared through the issue queue.