Dynamic image styles for resized media

Created on 31 July 2023, 11 months ago
Updated 2 August 2023, 11 months ago

Problem/Motivation

Resized media images are currently embedded using the default view mode unless the Allow the user to override the default view mode option of the ckeditor5 media plugin is enabled.

If the used view mode isn't applying an image style that will resize the image to a width that is wider than the resize width, the image will look smaller than the width it actually got resized to.

Steps to reproduce

  1. Install Vanilla Drupal
  2. Enable the ckeditor_media_resize module
  3. Edit a text format of choice to add the media embed button to the ckeditor5 toolbar
  4. Create a article node and embed a media
  5. Resize the media to a width larger than 480px (which is the width of the large image style used by default after installing Drupal)

Result the image is still only 480px wide even the resize width is wider.

Proposed resolution

If we can check the width and provide a set of default image styles the media image would be rendered width dynamically depending on the width, that would solve this problem. The image styles could be applied by using the data-view-mode attribute of the drupal-media ckeditor element.

This would happen in the filter and thus only when the content that contains the WYSIWYG field is viewed and not when the text is edited in ckeditor5. To achieve that, we'd have to alter the core media plugin which is more tedious.

✨ Feature request
Status

Fixed

Version

1.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024