Improve image alignment left/right/center in wysiwyg

Created on 5 June 2024, 7 months ago

Problem/Motivation

There are some issues with the out-of-the-box Drupal CKEditor image alignment feature:

Bugs

  • The align left/right float is unnecessary on mobile screen sizes.
  • Whitespace above/below images is inconsistent when there is a caption versus when the image has no caption.
  • On desktop, left/right aligned images need additional whitespace around the inner and bottom edges to allow text to flow around it comfortably.
  • On desktop, left/right aligned images take up too much space if the image is too big, leaving little room for text to flow around.

Features

  • Support three sizes of images: Full Width, Half Width, Break Out.
  • Support off-width image placement on large screens. (Single column example, Two column example)
    • Mimic rvt-layout__break-out for images using the "Break Out" image style.
    • Mimic rvt-layout__feature-slot for images floated to the left or right.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

📌 Task
Status

Active

Version

1.0

Component

Code

Created by

🇪🇨Ecuador jwilson3

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

Merge Requests

Comments & Activities

Production build 0.71.5 2024