Problem/Motivation

The "align-center" class added by CK Editor on images gets overwritten by the "ct-figure" class when used with Media.

Steps to reproduce

1. Add a photo Media item (for example, in Rich Text mode). Note that I do not mean a basic inserted image, like in the case of Basic HTML
2. In CK Editor, set it to align center and break text (or any other align-center mode).
3. It will be left alligned.

Weirdly, align-right does seem to work.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#8 alignment-modes-civictheme.png482.98 KBdanielgry
#8 center-aligned.png560.92 KBdanielgry

Comments

iulianrotaru created an issue. See original summary.

fionamorrison23’s picture

fionamorrison23 commented
Version: 1.11.0 » 1.x-dev
Assigned: Unassigned » joshua1234511
fionamorrison23’s picture

fionamorrison23 commented
Assigned: joshua1234511 » richardgaunt
Status: Active » Needs review
Issue tags: +civictheme-release-1.12
fionamorrison23’s picture

fionamorrison23 commented
Issue tags: -civictheme-release-1.12 +civictheme-release-1.13
alan.cole’s picture

alan.cole commented

PR: https://github.com/civictheme/monorepo-drupal/pull/1397

1. Fixed alignment for center when using Drupal's 'align-center' class on a ct-figure.
2. Fixed margin around left and right aligned ct-figure.

richardgaunt’s picture

richardgaunt commented
Assigned: richardgaunt » danielgry

  • 1cfdf834 committed on 1.x 
    Issue #3526953 by richardgaunt, alan.cole, fionamorrison23, iulianrotaru...
danielgry’s picture

danielgry commented
StatusFileSize
new center-aligned.png560.92 KB
new alignment-modes-civictheme.png482.98 KB

Verified and tested on latest dev version

Testing Results:
1. Verified that media images that are aligned to center in CKEditor will have the "align-center" class correctly applied on the frontend. Image will also visually display in the center
2. Confirmed other alignments display as intended as well

Screenshots:
Center aligned images
image

Left and Right aligned images
image

danielgry’s picture

danielgry commented
Assigned: danielgry » richardgaunt
Status: Needs review » Reviewed & tested by the community
richardgaunt’s picture

richardgaunt commented
Version: 1.x-dev » 1.13.0
Assigned: richardgaunt » Unassigned
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.