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:

Maybe this issue could be considered for inclusion in The Bounty program: Starshot edition →

Pushed an initial port of the code from ckeditor_media_resize → . This will definitely need some more work (at least cleaning up spaces) but it would be good to get some initial feedback on it before proceeding further, so setting NR to get some feedback.

I've used ckeditor_media_resize on and off on a few projects now.

The module has a few open bugs but I experienced a few times the resizing would break things.

If I remember correctly the resize creates dynamic image styles?

Wonder if it would be easier to do the screenshot of setting the width/height to the drupal-media tag.

I think having this as an option could be good for many people but I do also think it’s not for everyone.

The case for editors to have control is clear but the case why some people might not want this feature might be less than clear, such as:

Those site owners who want consistently sized images across pages and don’t want editors to have easy custom control.
Performance (if resizing a large image file could still serve a large image file)
Cases where CSS and layout restrict or alter the size of images so results are unexpected.

I think most likely those sites where control is important are using structured content for images rather than CKeditor.

I am interested to learn more about how this works.

Something I did do before ckeditor5 was using a plugin to wrap the image embed with a container div that you could set the max-width. Then using a module like https://www.drupal.org/project/easy_responsive_images → it would load decently sized images.

Ckeditor5 broke that.

@smustgrave

Wonder if it would be easier to do the screenshot of setting the width/height to the drupal-media tag.

Of course my view on this is a bit biased, but using drag and drop handles as in the native ckeditor5 image plugin for resizing seems much more editor friendly to me.

This is also true if comparing the drag and drop resize to the current state i saw in the Drupal CMS media track where you have like a dozen image styles to select from. If the goal is to make things easier for people that don't know Drupal, then selecting image styles is the wrong path to take IMO.

The module has a few open bugs but I experienced a few times the resizing would break things.

Did you report the bugs in the issue queue of the module?

If I remember correctly the resize creates dynamic image styles?

No. A resize has a width and based on that width, the image is then rendered in one of the avaialble (and for now not configurable) image styles based on the width. I.e. if the resize is 150px wide, an image size with a small width up to 300px (no upscaling) is used. If it's 500px the image style with max width of 650px is used (again, no upscaling).

The case for editors to have control is clear but the case why some people might not want this feature might be less than clear, such as:

In case of the MR I posted above, admins can simply disable the resize filter on the text format and resizing won't be applied. So different formats could be used to control this as each format has a corresponding permission as well.

This is also true if comparing the drag and drop resize to the current state i saw in the Drupal CMS media track where you have like a dozen image styles to select from. If the goal is to make things easier for people that don't know Drupal, then selecting image styles is the wrong path to take IMO.

Competitor CMS make available cropping to some common aspect ratios. The UI in Drupal CMS is not ideal just now because we don’t have a way to separate orientation from aspect ratio from resizing and that means there are too many options presented in the dropdown. I think we can have the best of all worlds. To be able to crop to an aspect ratio (selectable first by orientation) and to be able to go custom.