Contrib.social

Constrain the width of aligned images, media, blockquotes etc to a max of 75%

Open on Drupal.org →
Created on 30 August 2019, almost 5 years ago
Updated 30 January 2023, over 1 year ago

Problem/Motivation

Given that alignable elements are:

  • Media Embeds aligned-left or aligned-right
  • Media Embeds with captions aligned-left or aligned-right
  • Images aligned-left or aligned-right
  • Images with captions aligned-left or aligned-right
  • Blockquote text aligned-left or aligned-right

Alignable elements can be aligned-right or align-left (as well as aligned-center or not aligned). When align-right or aligned-left, there is an implicit assumption that there will be space opposite of the alignment.

  • If aligned-right, it makes sense to allow space to the left of the alignable element.
  • If aligned-left, it makes sense to allow space to the right of the alignable element.

This is arguable essential within the text editor to allow:

  • a visual representation of the alignment
  • space to edit the text wrapping around the aligned embed
  • to prevent bizarre squished text

Text without much horizontal space for editing:

Text with the words exploded into letters:

This from feedback from @effulgentsia here #2801307-54: [META] Support WYSIWYG embedding of media entities → :

[...] add CSS along the lines of max-width: 75% on media that's aligned left or right. It's fine for the media to be smaller. It's just that if you're explicitly choosing to align it left or right, then you're choosing to put something else beside it, which means leaving some amount of room for that something else.

Proposed resolution

  • Must-have: Add a max-width for embedded media in CKEditor when aligned-left or aligned-right (only).

Additional suggested improvements:

  • Add a max-width for alignable elements when aligned-left or aligned-right in Classy theme and themes that extend Classy.
  • Add some margin between alignable elements and the elements opposite in the CKEditor.
  • Add some margin between alignable elements and the elements opposite in the Classy theme and themes that extend Classy.

Remaining tasks

  1. Review
  3. Commit.

User interface changes

TBD

API changes

None.

Data model changes

None.

Release notes snippet

Draft Change record:
https://www.drupal.org/node/3085749 →

📌 Task
Status

Needs work

Version

10.1 ✨

Component
Filter  →

Last updated about 3 hours ago

No maintainer
Created by

🇺🇸United States oknate Greater New York City Area

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • Needs subsystem maintainer review

    It is used to alert the maintainer(s) of a particular core subsystem that an issue significantly impacts their subsystem, and their signoff is needed (see the governance policy draft for more information). Also, if you use this tag, make sure the issue component is set to the correct subsystem. If an issue significantly impacts more than one subsystem, use needs framework manager review instead.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment over 1 year ago →
    needs-review-queue-bot

    The Needs Review Queue Bot → tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

    Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

    Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024