Contrib.social

Image with caption overlaps other content in CKEditor

Open on Drupal.org →
Created on 19 March 2025, 3 months ago

Problem/Motivation

When an image with a caption is (1) added with CKEditor, (2) resized, (3) saved, then (4) edited again, the height of the resulting <figure> markup is set incorrectly resulting in the caption overlapping the content below the image.

This is only seen in the editor, not on the viewing of pages.

I've reproduced this issue on simplytest.me with Drupal 10.4 and 11.2 core.

Steps to reproduce

  1. Create a Basic page.
  2. Add an image to the body field via the "Upload image..." button in the CKEditor 5 toolbar.
  3. Add a caption.
  4. Resize the image to make it smaller.
  5. Add some text below the image.
  6. Save the page.
  7. Edit the page again.
  8. See that the caption box overlaps the text below the image.

In some cases (maybe, if the image is not resized or depending on the aspect ratio of the image), the caption doesn't overlap, but instead a large amount of space is present between the image and the content below.

Resizing the image by dragging the blue square on the outline fixes the issue until the page is reloaded or the image is dragged to a new position.

Proposed resolution

The problem is that drupalimageediting.js sets the height and width of the <figure> element to the height and width of the image using a style attribute. If there's a <figcaption>, that height is not correct because it doesn't take the height of the caption into account.

Per above, if the image is resized, the problem is temporarily fixed because that style attribute is updated with only the width set (not the height).

To fix this, we need it to not try to set the height at all. Note that CKEditor's own image plugin does exactly this-- it sets the <figure> width only.

Remaining tasks

  1. Update drupalimageediting.js and the compiled drupalImage.js so that it does not try to set the height.
  2. Create MR/patch.
  3. Add tests.

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.1 🔥

Component

ckeditor5.module

Created by

🇺🇸United States jrb Raleigh-Durham Area, NC, USA

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

Merge Requests

Comments & Activities

  • Issue created by @jrb
  • Comment 3 months ago →
    🇳🇿New Zealand quietone
  • First commit to issue fork.
  • Comment 3 months ago →
    🇩🇪Germany seanpb

    I also see this issue, and have pushed a change to the issue fork with some preliminary changes that fix the problem.

    It removes the second of code that sets the width on images, as described by jrb, and includes the webpack'd version actually used by the editor.

  • Status changed to Needs work 9 days ago
  • Comment 9 days ago →
    🇺🇸United States abferris

    Hi, I think this might be related to an issue I found with the captions, but in a different respect. With images of a certain size, after they were saved with captions, and then revisited, the option bar for the image was placed directly over the captions. I think it has to do with how the caption is placed, and how the larger container's height does not include the options bar. When this heigh is referenced to set the options bar top value, it doesn't recognize it.

    I've tested this with the same image on multiple sites using ckeditor5, and I had the same outcome. It did not work as intended with an image that was 900x506, but it did work for an image which was 300x365.

    I think solving this issue will solve this related issue, but if I should create a new issue for this, please let me know.

    Fig. 1: CKeditor options bar overlapping caption

  • Comment 2 days ago →
    🇺🇸United States abferris

    abferris → changed the visibility of the branch 3514147-image-with-caption to hidden.

  • Merge request !12318Draft: Issue #3514147: Image with caption overlaps other content in CKEditor → (Open) created by freelock
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024