Alignment of inline images in CKEditor 5

[alisonjo315]

To do:

• Update the "media" and "media--image" template files in cwd_base -- probably just copy from vpue/classe (see below).
  • IN PROGRESS, on inl-imgs-cke5 branch (see draft PR associated with this issue).
  • We're very clear that cwd_base isn't backwards-compatible. That said...
  • Recommendation: Try updating a template file on a site that uses entity embed, and see what the consequences are.
• Write release notes: Include a warning about this ^^ ideally with an explanation of what to look out for on sites with entity embed.

---

Background

Our inline images in CKEditor 4 use a template that's specific to entity embed, which we won't need (or want) in CKEditor 5.

We have CKEditor 5 on the new VPUE site, and the in-development CLASSE site. "Out of the box," inline images don't get aligned properly when you use the image alignment thingy in CKE 5. (I don't have an example handy, because we fixed it on those two sites, and I don't have a CD Demo multidev with CKE 5 right now.)

To fix

On VPUE and CLASSE, we added new versions of media.html.twig and media--image.html.twig, adding the div with attributes back in (that was removed in the cwd_base versions of these templates).

• Pantheon site machine name "vpue-new"
  • web/themes/custom/cwd_vpue/templates/overrides/media.html.twig
  • web/themes/custom/cwd_vpue/templates/overrides/media--image.html.twig
• Pantheon site machine name "classe"
  • web/themes/custom/cwd_classe/templates/overrides/media.html.twig
  • web/themes/custom/cwd_classe/templates/overrides/media--image.html.twig

See it in action

At the time of writing, the outcome of these ^^ template files can be seen on these demo pages:

• VPUE > small clocktower thumbnail near the end of this page: https://dev-vpue-new.pantheonsite.io/demo-page-ckeditor-5
• CLASSE > small "bubble" thumbnail at the top of this page: https://dev-classe.pantheonsite.io/research/particle-physics-and-astrophysics