Problem/Motivation

The caption image filter is not compatible with image resizing (i.e. <img width>). This is because with CKEditor 5, the width is provided in percentages. After wrapping the <img> with a <figure> element, the width attribute is still applied on the <img>. This means that the width is now calculated relative to the <figure> element.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Comments

lauriii created an issue. See original summary.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: Caption images filter incompatible with CKEditor 5 image resizing » [drupalImage] Caption images filter incompatible with CKEditor 5 image resizing
Issue tags: +JavaScript, +Needs tests

Great catch!

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Related issues: +#3336446: EditorFileReference should compute a px <img height> if a % <img width> is specified, even though % <img width> is not allowed in HTML5

AFAICT https://github.com/ckeditor/ckeditor5/issues/5154 would fix this, which would make it related to #3336446: EditorFileReference should compute a px <img height> if a % <img width> is specified, even though % <img width> is not allowed in HTML5.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: [drupalImage] Caption images filter incompatible with CKEditor 5 image resizing » [upstream] [drupalImage] Caption images filter incompatible with CKEditor 5 image resizing
Assigned: Unassigned » lauriii
Status: Active » Postponed (maintainer needs more info)
Issue tags: +Needs upstream bugfix

On second thought, this would actually mean that this is an upstream bug: it looks like CKEditor 5 blindly assumes that the <figure> wrapping an <img> has the same width as the figure?!

Assigning to @lauriii for confirmation.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Title: [upstream] [drupalImage] Caption images filter incompatible with CKEditor 5 image resizing » [drupalImage] Caption images filter incompatible with CKEditor 5 image resizing
Status: Postponed (maintainer needs more info) » Active
Issue tags: -Needs upstream bugfix

I was trying to point out a bug that is happening when the content is being processed into \Drupal\filter\Render\FilteredMarkup. As part of that process, <figure> element is created in \Drupal\filter\Plugin\Filter\FilterCaption::process based off data-caption. It sounds like there are two separate bugs, one within CKEditor 5, and one that is related to \Drupal\filter\Plugin\Filter\FilterCaption.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

dabley’s picture

dabley commented
Issue tags: -JavaScript +JavaScript

This looks like a duplicate of #3348603: CKEditor 5 resizes images with % width instead of px width (the CKEditor 4 default): breaks image captions *and* is a regression.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: lauriii » Unassigned
Status: Active » Closed (duplicate)
Related issues: +#3348603: CKEditor 5 resizes images with % width instead of px width (the CKEditor 4 default): breaks image captions *and* is a regression

Well, #3348603: CKEditor 5 resizes images with % width instead of px width (the CKEditor 4 default): breaks image captions *and* is a regression will fix it for all images as soon as they are resized again.

#3336446: EditorFileReference should compute a px <img height> if a % <img width> is specified, even though % <img width> is not allowed in HTML5 would still be appropriate hardening, but I agree there's nothing left to do here (besides, this really does belong in the filter.module component, even though it's typically caused by CKEditor 5).

Agreed with the course of action that @dabley proposed though, and crediting him for it! 😊🙏 One less issue!