Adaptive images in TinyMCE

When adaptive images have been enabled for TinyMCE, a user may add an adaptive image in one of two ways:

  1. Drag-and-drop an image from the Media component, i.e. an image uploaded to the CMS
  2. Drag-and-drop an image from the Image bank component, assuming at least one searchable image provider has been registered

When an image is drag-and-dropped from the Image bank component, the image is always inserted as an adaptive image.

When an image is drag-and-dropped from the Media component, the user is presented with an option to convert the image to an adaptive image.

Note: This behavior can be changed to always convert images from the Media component, without prompting the user.

Behind the scenes

When an adaptive image is added to TinyMCE, the following happens automatically:

  1. A block with an AdaptiveImage property is created in the assets folder for the current page or block
  2. The block is inserted wherever the image was dropped in the TinyMCE editor

Note: The default block type used to insert adaptive images in TinyMCE does not impose any size or proportions constraints. This can be changed by using a custom block type.

Code samples