1

When I embed an image into CKEditor text I can choose alignment options. When I embed a Media Image I cannot choose alignment, but a Media View. A media View allows me to specify image size (via image style) but not alignment

Embedding an Image does not add the image to the Media Library and it would be nice to only use Media Image embedding so as to manage the site's media library of images.

What is the preferred way of specifying the alignment of embedded Media?

Background

I am switching over to simply using core Media modules in Drupal 8.8. I have ditched what I was previously using:
* Embed
* Entity Embed
* DropzoneJS entity browser widget
* Entity Browser
* Entity Browser IEF

Improve this question

1 Answer 1

Reset to default
2

The easiest to resolve (and most likely) issue is:

You are limiting the allowed HTML tags for the text format you're using and you haven't allowed the align (and also caption, if you want captions) attributes for the drupal-entity HTML element. (I'm assuming you do have the Align images and Caption images filters enabled because you said those features were working for non-media embeds. If they're not enabled, enable them.)

Solution:

In the "Limit allowed HTML tags and correct faulty HTML" section (/admin/config/content/formats/manage/MY_FORMAT#edit-filters-filter-html-settings), make sure the drupal-entity has at least the data-align (and data-caption for captions) attributes. E.g. <drupal-entity data-align data-caption data-etc...>.

Improve this answer
3
  • Thank you so much for your prompt reply. I am pretty sure you correctly identified the solution to my issue. I’ll verify that this is the correct answer tomorrow on my dev site. Thanks to your pointer I found the documentation page that I’d not found before (drupal.org/docs/8/core/modules/media-library-module/…)
    – iainH
    Commented Dec 27, 2019 at 23:40
  • I then edited the Drupal docs to include the data-view-mode attribute thus: "Additionally, if you have the "Limit allowed HTML tags and correct faulty HTML" filter enabled, you must ensure that the drupal-media tag also allows the alt, data-align, data-caption, and data-view-mode attributes in order for Alternate text, Align, Caption and Display options, respectively, to be effective in the "Edit media" dialog."
    – iainH
    Commented Dec 28, 2019 at 18:59
  • 1
    Thank you for editing the docs! I moved your paragraph to the middle of the doc where other edits to filter settings are discussed because I missed it initially. This actually wasn't enough to fix this for me however. Left and right alignment worked, but center did not. Center worked within CKEditor, but not when the page was rendered. In order to get images centered aligned, within the CSS of my theme I had to add .align-center { text-align: center; }. I can't explain why this is the case and since this seems to work for everyone else I won't open a bug report.
    – maskedjellybean
    Commented Jan 31, 2020 at 23:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.