Our content people are familiar with CKeditor and they even know that they can insert an image and then assign classes that we've set up for them. Some of those classes are for example, lightbox and thumbnail-lightbox. When they insert an image using ckeditor they can click on the styles dropdown and choose thumbnail-lightbox which resizes their images to 100px wide AND assigns class lightbox to it which is then processed by jQuery so that, you guessed it, when someone clicks on that thumbnail the image pops up in a lightbox. We have a variety of other classes that do nifty things that the content people use as well. Note that we do use paragraphs for structured content in quite a few places, but the content people still like being able to insert images in the articles they write, and our readers enjoy the interspersed images.
Enter the amazing new Core Media functionality. "Hey content people, you can now reuse images by saving them in this fancy new media system!" That's great but they can no longer apply classes to these saved and reused images. First issue is that there is not anyway whatsoever to apply classes to the <drupal-entity
tag this media system uses. Ckeditor won't assign our fancy classes, and if we manually add a class by editing the source, that class ends up on the <article
tag instead of the <img
tag inside of the article. I presented this conundrum to the drupal community and god-among-men wombatbuddy whipped up a contrib module here that moves the class from the article tag to the subordinate img tag. It works, it's awesome, he's awesome, that gets us halfway there! Now our content people can edit source, add a class like dropshadow to the <drupal-entity
tag and when the page is saved the class is moved to the img tag and voila, drop shadow (or lightbox or ??) and it works great. That in itself was a massive step forward for us.
Still, ideally we should be able to set up classes in ckeditor that we can apply to <drupal-entity
by simply using the style drop down box. So in the ckeditor class assignment section, where we previously had img.lightbox|Lightbox
we also attempted to add drupal-entity.lightbox|Lightbox
so as to allow assigning the lightbox class to drupal-entity tags that are inserted by the media functionality, just as we would if we used the traditional image insertion. Sadly this doesn't work, ckeditor doesn't allow drupal-entity to be a tag because of its hyphen, and ckeditor doesn't see actual drupal entities as pieces of content that can be manipulated by adding classes.
It seems like for consistency's sake and to maximize functionality, images that are inserted via the new media system should be just as versatile as images manually uploaded through ckeditor's image function. Of course other media types might also benefit from being able to assign classes, but images seem like the most pressing use case at present.
Thoughts? Better ways to approach this? We have quite a few classes that do different css and even jQuery things to images and none of these are available if the image comes from Media instead of being uploaded through ckeditor. Wombatbuddy's contrib module posted here got us a lot closer because now our content guys can at least view source and manually add class="lightbox thumbnail dropshadow"
etc. Thoughts?
Thanks guys!!!
edit: User wombatbuddy added a contrib module that gets a step closer, it basically moves classes that are assigned to <drupal-entity
to the subordinate image tag, so adding class="lightbox" to a<drupal-entity
moves it to the img tag inside upon saving. See here: https://www.drupal.org/forum/support/post-installation/2018-08-31/how-to...