Allow editing of Width and Height of embedded <drupal-media> images

phenaproxima → credited Austin986 → .

Transferring credit for @Austin986's very extensive prior work in ✨ CKEditor5, Provide a way to embed Media Image as primitive image in editor, to enable image edit functions Closed: duplicate .

xjm → credited lauriii → .

xjm → credited seanB → .

xjm → credited smustgrave → .

xjm → credited Wim Leers → .

Adding credits for contributors who helped with the discussion in ✨ CKEditor5, Provide a way to embed Media Image as primitive image in editor, to enable image edit functions Closed: duplicate . Thanks everyone!

(I closed a number of duplicate issues so the work can be consolidated here)

The idea of adding that option with the checkbox to render the media as an <img> tag seems interesting.

We also needed the resize of <drupal-media> embeds, but found another way to solve it. We took CKEditor5's WidgetResize module and applied that onto the <drupal-media> tag/model in ckeditor. This is basically what the ckeditor5 core image plugin does for <img> tags in order to make them resizable. That will allow resizing using handles around the corners of the media element just as it works for images, so there's no need for having fields for width and height, although resizing works only proportionally and upscaling is possible (at least now still, we might fix this later too).

@s_leu It would be interesting to see that in action. Keep us posted if you end up publishing that somewhere 😊

@s_leu I'm also super interested in your approach. Are you planing to release it somewhere?

@laurii @AgathaCrystal

You can find the module here: https://www.drupal.org/project/ckeditor_media_resize →

It appears ckeditor 5 has Image Resize capability, and adding it might just take changing some settings in the media and image plugins.

The methodology in Media Embed Extra is flawed enough that I would hesitate to reference it.

What is the thought for how view modes will be used? If I select a large view mode and resize to a token. Should it change view mode?

View modes is great if you're building a site as an admin, using modes to ensure consistency. However, when you have a bunch of content editors wanting to put images on pages and resize them, a view mode is useless, because only admins might be able to configure view modes.

This is a separate issue, but I really don't like the fact that media images aren't deleted when a node is deleted. They are left orphaned. That's another reason why I don't like Media right now. I have site editors who cannot remove unused media once they are orphaned. In my case, images are almost always used in a single place. I don't want orphaned entities to remain forever.

Agree with solideogloria. These types of issues need to be viewed (and remedied) from a content editor's perspective. They are the ones that really matter with this issue.

For the time being will go for https://www.drupal.org/project/ckeditor_media_resize → , as mentioned in #17 ✨ Allow editing of Width and Height of embedded images Active by @s_leu.

Thanks!

I was trying out CKEditor inserting, re-scaling and floating images using the Bootstrap5 theme, but the ratio was off. So I searched and found this issue, and thought that I maybe needed a module. But it looks like a general Bootstrap issue, so just leaving a comment in case anyone with the same problem ends up here, searching for words like ckeditor, resize, image, width, height, etc. 🐛 Floated, resized images inserted via CKEditor are distorted, height is kept Active .

Tried out CKEditor Media Resize → ( 1.0.0-beta1 → ) and it works great!

Bumping priority given how many people are requesting this, and @s_leu's module proves it's viable!

@s_leu: would you be interested in converting your module to a Drupal core merge request? 🙏😄 That would mean there would be one less module for you to maintain!

I'd be quite happy to see this in core. @s_leu's module looks like a viable approach to me as well.

Chiming in here to say that @s_leu has also put in an MR for ✨ Add ability to insert Media inline in CKEditor widget Needs work by taking the same approach of CKEditor5's Image plugin(s) and having both a block and inline schema for media embeds. I'm not suggesting the issues should be combined, or to increase scope significantly either way, but it'd be great if there's a way to reduce potential merge conflicts or duplicate work between both efforts.

Checking the images overview in CKEditor5 docs itself, seems like we have the width change possibility which would be a nice addition in core: