Inserting and resizing large image in rich text editor

Questions
1

There are two issues I’ve ran into.

  1. Inserting an image via the image button, and selecting an image from the media library that is let’s say, 1200px wide, inserts and overflows the editor preview on the back-office node view.
  2. There is no way to change the image’s size when it’s inserted, whether typing a size or dragging.

Is this the correct behavior?

2

Hi @jason-delaplain

Personally, I normally avoid inserting images into the RTE for exactly this reason - you have less control and they aren’t responsive.

Instead, use either RTE blocks or add the image outside the RTE in a Block List/Grid so you have full control of the image in the view when rendering.

Also, what version of Umbraco are you using with which RTE (TinyMCE or TipTap?)

Justin

3

Interesting. Ok, I’ll switch to creating an RTE Image block and remove the tiptap media insert. I’ll probably do this for embedded videos too, so there’s control over responsive sizing view.

It’s Umbraco 17. It’s been a challenge with multiple places to style editor preview, tiptap slideout view, etc.

4

Hi @jason-delaplain

There was mention of image resizing in TipTap coming in Umbraco 17 in the near future, although I’m not sure which release this will be in.

Justin

5

The feature was added in Umbraco 17.4.0:

To resize an image, you select it with the cursor, then click the ‘Image’ icon in the toolbar, and you should see a width x height field show up in the sidebar.

6

There was a good article by Luuk Peters about this:

7

Agree with the comments here, and will add that you could try the TinyMCE Umbraco package for v17 and that may have a bit more functionality with images.

8

I would echo @justin-nevitech 's suggestion of using an inline block element in the RTE for all images (TipTap or TinyMCE). with full control of the rendering, you can:

  • ensure the correct resolution is served for the device, improving performance
  • handle contextual alt text for accessibility purposes
  • ensure that the aspect ratio of the image is available before the image is loaded to eliminate CLS issues.

This is the only approach I have found to fully optimise inline images