File Entity Browser

This module takes some time to install, but it is a useful tool. You need to install 5 modules and 3 third parties. You can use composer, but it can be done manually too.

For those who use composer. Look at the link on the module site. You need to use these commands. 

"drupal/file_browser"
"drupal/entity_embed"
"drupal/entity_browser"
"drupal/dropzonejs"
"enyo/dropzone"
"desandro/masonry"
"desandro/imagesloaded"

Once installed the fun begins.. 2 buttons appear in the CKEditor settings. Apply them. There is one for images and one for embedding files (and even nodes).


Drupal8_002620.png

Add them to your buttons and don't forget te check the visibility

Drupal8_002629.png

Now you get someting like that..

Drupal8_002619.png

The image browser allows you to upload...


Drupal8_002621.png

or select the images already in your files folder. They are presented in a responsive, masonry view

Drupal8_002622.png

When selecting images you can add an image style. This gives us the possibility to change the images format afterwards. Just like they were in an image field! Unfortunally you can only add one image at one time using the buttons.

Drupal8_002617.png

You can als use the module adding images to an image field. Here you can select multiple images. Use the entity browser widget.

Drupal8_002630.png

Drupal8_002623.png

Change the order if you want.


Drupal8_002624.png

The widtget can be set in several ways. The module gives us 2 content types to play with as an example.

Drupal8_002631.png

At last, yu can use the module to embed files and nodes. Use the E-button


Drupal8_002625.png

Choose the display


Drupal8_002626.png

An example... A node in a node as teaser.
Drupal8_002627.png

Or choose an other display...


Drupal8_002628.png