Inline image options UI is not sized correctly

Created on 5 February 2025, 2 months ago

Problem/Motivation

When a relatively large image is uploaded via CKEditor, the image is correctly scaled down to fit the editor and its options UI (which lets editors modify layout options and add paragraphs above and below the image) outlines the image tightly, as one would expect. However, after saving the page and going back to the editing form, the options UI no longer outlines the image tightly. Instead it stretches below the image because the options UI element (usually a figure element) receives a style attribute with height and width properties that correspond to the uploaded image’s original file dimensions. The width of the figure is usually

Another difference between a freshly-uploaded image and one that was already present when loading the edit form is that a freshly-uploaded image’s sizing dropdown is set to “Original”, while the dropdown for images that were already present has a pixel size pre-selected (corresponding to the width of the original image).

Note that this only affects the way images are rendered in CKEditor, and not how they are rendered on the node URL once it has been saved.

Steps to reproduce

  1. Spin up a fresh Drupal install and create a page using the Basic Page content type.
  2. Add an image to the CKEditor WYSIWYG. Ensure the image is wide enough to cause it to be scaled down to fix within the WYSIWYG editor.
  3. Observe that the image options UI outline is tight around the image and the sizing dropdown reads “Original”.
  4. Save the node and re-enter the Editing form.
  5. Click on the image and observe that the options UI outline is taller than the image and the sizing dropdown shows the width of the image you uploaded in pixels.
  6. Select “Original” in the sizing dropdown.
  7. Observe that the options UI looks correct now.
  8. Save the node and re-enter the Editing form.
  9. Observe that the options UI is rendering incorrectly once again.

Proposed resolution

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.0 🔥

Component

ckeditor5.module

Created by

🇺🇸United States agarzola

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

Comments & Activities

Production build 0.71.5 2024