How to configure Colorbox and Insert modules for Drupal 8

When I tried to set up inserting images into the body of articles in a similar style to what I was used to in Drupal 7, I found that it wasn't quite as simple as that. In short, it involves installing the colorbox module along with the jquery.colorbox.js library itself. This module is just an image field formatter  - to actually load the necessary JavaScript on the page you still need the colorbox_inline module. Then there is the insert module, and its sub-module insert_colobox.

All of this is based on the principle of functional smaller units versus one big moloch. This makes it easier to configure just the exact components that are needed. So here we go.

Colorbox

https://www.drupal.org/project/colorbox

Nothing to worry about here, we install the module (currently version 8.x-1.4) in the usual way. The module page clearly describes that you still need to download the library itself https://github.com/jackmoore/colorbox/archive/1.x.zip and upload it to the path "libraries/colorbox/jquery.colorbox-min.js". On the Reports > Status report page we find confirmation that the Colobox library is installed.

admin/config/media/colorbox - simple setup, probably no need to change anything

Colorbox Inline

https://www.drupal.org/project/colorbox_inline

This module (version 8.x-1.1) tracks the code of the generated page, and if it finds a mention of Colorbox (data-colorbox-inline attribute), it loads the necessary JavaScript code. There is no need to set anything.

The colorbox_load and colorbox_simple_load modules work as well.

Insert (+ sub-module Insert Colorbox)

https://www.drupal.org/project/insert

Insert module allows to insert files, images, media ... into the page body, i.e. into CKEditor. Its possibilities are quite broad. 

This is true only for the "binary" version of the module, currently 8.x-2.0-beta1. It includes the insert_colorbox, insert_media and insert_responsive_image modules (the last two in experimental state).

Configuration #1 - Module

There are, of course, more ways to put all this together. The following setup works for me, and may serve as inspiration for others.

Starting on the Insert configuration page admin/config/content/insert

Here you need to choose the Text formats for which Insert will be enabled. This is necessary if you have the "Limit allowed HTML tags and correct faulty HTML" filter enabled for those text formats. As highlighted in bold, such text format must then be recompiled to enable the necessary code.

Then at the bottom of the page is a section dedicated to Insert Colorbox. I recommend setting the Image style to some style - e.g. "full hd", which will reduce the original - potentially large (e.g. from a mobile, camera ...) - to a reasonable size. After all, we don't want to impose some 4000x3000 image with 8MB file size on the users.

Configuration #2 - field

Our content type must have some sort of image type field. We can then configure the Image widget for it in the "Manage form display" tab:

Where we choose what image styles we want to have available. 

My idea is to be able to insert 

• a regular image - so no Colobox and no link to the original file. To do this, you need to set "Link image to" to "do not link". And also apply the patch (plus clear cache) https://www.drupal.org/project/insert/issues/3079702 which fixes just this. Otherwise, the link to the file would always be embedded there as well.
• Colorbox version - when clicked, the image is displayed with the image style defined globally on the Insert configuration page (see previous text).

And that should be it, we can try inserting images to the node.

By default

With a few simple steps we can configure a nice image display on our site. In the end, it is perhaps not that difficult to achieve the desired result according to our needs. It would be interesting to extend Insert for some more galleries. Maybe next time.