Append image style to an inline image in CKEditor

Question

With views, for example, I'm able to set the image size which is to be loaded (using image styles). Is it in any way possible to do such thing in CKEditor? At the moment, Drupal is loading the original image and scales it down in the browser. I need to set an image style so all the inline images are resized to a width of x pixels.

Answer 1

Use insert module

Insert is a utility that makes inserting images and links to files into text areas or WYSIWYGs much easier. It adds a simple JavaScript-based button to FileField and ImageField widgets. When used with ImageField and ImageCache, images may be inserted into text areas with a specific ImageCache preset.

This module was previously known as FileField Insert.

Features

Support for all major WYSIWYG editors, including tinyMCE, CKeditor, the WYSIWYG project (the recommended approach), and plain

text areas. Insert images using ImageCache presets Maximum width setting for inserted images (for combined use with the Image Resize Filter module) Per-field insert configuration

I used that on drupal 7 in several projects and it's what you want.I don't used Drupal 8 version yet,but hope works well.

Hopefully, in Drupal >= 8.8 it's on the core.

https://www.drupal.org/docs/8/core/modules/media-library-module/embedding-media-with-ckeditor

Answer 2

There are a lot of modules around:

• You really should use entity_embed, it's quite out of the box, optionally with the file_browser or even more sophisticated with the media_entity. (Could also be used in combination with core's responsive images)

• Layouter let's you insert one file in a layout, choosing the image style .. Insert has a similar approach. (see answer from @zhilevan)

  I'm not so friend with this approach, as it can be messed up by the user while re-editing.

• IMCE is the simpler approach, but not automated, not image styles, so uploaded images, need to be thumb nailed.

---

And a different approach would be to use paragraphs. Not (only) directly in but combinable with CKeditor.

Answer 3

In Drupal 8 you can employ the Media module and Entity Embed suite of modules. This makes embedding media more Drupal native in CKEditor - and one of the things you can do is select which view mode to render the media in.

This view mode configuration can set which image style to use on its field formatter display.

Therefore, you can create a couple of view modes for inserting media and have those map to image styles in different use cases. It makes it easy for the user, all they have to do is select an option when embedding.