1

Similar question to How to set width to Media entity image in CKEditor BUT I am trying to do more than insert various sizes of images, I want to add classes to the actual img tag. So when I insert an image that I've already added to my media into ckeditor, it shows up as drupal-entity instead of img. Specifically:

<drupal-entity alt="test" data-embed-button="media_browser" data-entity-embed-display="media_image" data-entity-embed-display-settings="{&quot;image_style&quot;:&quot;&quot;,&quot;image_link&quot;:&quot;&quot;}" data-entity-type="media" data-entity-uuid="9467197e-1088-45eb-bbf4-c3970d45fd6e" title="test" class="lightbox"></drupal-entity>

When I save the page it renders as something like

<article class="embedded-entity"><img src="/sites/default/files/2018-08-18%2019_42_02-Road%20Bike%20Cycling%2021%20Speed%2026%20Inch%20_%20700CC%20TX30%20BB8%20Double%20Disc%20Brake%20Non-Dampin.png" alt="test" title="test" typeof="foaf:Image" class="img-responsive" /></article>

If I add a class like lightbox or dropshadow to drupal-entity it gets applied to the article tag instead of the img tag. Any way to add classes to inserted images that live in the cool new media functionality? Seems like there are an endless number of use cases where adding classes to inserted images would be crucial.

Thanks to anyone who can help!

  • I upvoted this question because I see a relevant problem here. But I'd recommend to use drupal.org/project/paragraphs or any other modular approach instead to build content. IMHO you should not use CKEditor (or body fields) to place anything else than text in it. Especially when it comes to images. Desired media fields add so much more flexibility to handle them. Thinking of responsive image styles at first. – leymannx Sep 4 '18 at 21:46
  • Someone in the drupal community whipped up a contrib module to move the class from the article tag to the subordinate image tag, and their solution seems to work: drupal.org/forum/support/post-installation/2018-08-31/… (PS, yes we do also use paragraphs) – Patrick Man Sep 5 '18 at 19:23
  • Not bad! Maybe you can ask them to drop their answer here so we can upvote and accept it. – leymannx Sep 5 '18 at 19:47
  • Darn it, I discovered his contrib module was also adding whatever class I would add to drupal-entity(like lightbox) to other images on the same page (but not all of them), so we're not quite there yet. – Patrick Man Sep 5 '18 at 21:20

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.