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

1 Like
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.