Improve image alignment left/right/center in wysiwyg

Created on 5 June 2024, 24 days ago
Updated 19 June 2024, 9 days 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

Fixed

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.69.0 2024