User Level: 

This Entity Browser is going to be used in the CKEditor toolbar. Since we can never be sure what a user wants to upload and embed into the text editor, we're going to add a few different widgets to it to handle the different types of media that a user will commonly want to embed: images, documents, and video.

Click on an image to make it bigger.
D8 Entity Browser - Configure - Navigation

1. Navigate to Entity Browser Configuration

Go to Admin Menu > Configuration > Content Authoring > Entity Browsers.

D8 Entity Browser - Configure - Click Add Entity Browser Link

2. Add Entity Browser

Click the Add Entity Browser button.

D8 Entity Browser - Configure - Select Display Plugin

3. Add General Information

In the screen that appears, complete the following:

Label text box = enter a name for your entity browser - a machine name will be auto-generated.

Display Plugin select box = select iFrame (note that at the time of this documentation the Modal option was buggy).

Widget Selector Plugin select box = select Tabs.

Selection Display Plugin select box = select No Selection Display.

Click the Next button.

D8 Entity Browser - Configure - Adjust Text Check Auto Open

4. Display Configuration

The next screen controls the display of the Entity Browser.

Width of the iFrame text box = 650 (units are pixels).

Height of the iFrame select box = 500 (units are pixels).

Link Text text field = change to Select Media.

Auto Open Entity Browser checkbox = checked.

Click the Next button.

D8 Entity Browser - Configure - Proceed Through Widget Selector

5. Widget Selector Configuration

On the Widget Selector screen, the options that we're using don't have any configuration options.

Click the Next button to advance.

D8 Entity Browser - Configure - Proceed Through Selection Display

6. Selection Display Configuration

On the Selection Display screen, the options that we're using don't have any configuration options.

Click the Next button to advance.

D8 Entity Browser - Configure - Select View Widget

7. Add a View Widget

On the Widgets screen, the first widget that we'll add will be to handle all of the assets in our Media Library. To do this, we need to make use of the Entity Browser View that we made previously.

Add Widget Plugin select box = choose View

A group of fields will appear

D8 Entity Browser - Configure - Configure View Widget

8. Configure View Widget

Now let's configure the View widget:

Label field = Library.

Submit Button text field = Select Media.

View: View Display select field = Media Browsers: WYSIWYG Media Entity Browser (or whatever you named your view).

Select Enhancer select field = Enhanced Multiselect.

D8 Entity Browser - Configure - Select Media Entity Dropzone with Edit Widget

9. Add a DropzoneJS Widget

Now let's create a tab just for uploading images.

Add Widget Plugin select box = Media Entity DropzoneJS with Edit.

You'll see a new group of fields appear.

D8 Entity Browser - Configure - Configure Media Entity Dropzone with Edit Widget for Images

10. Configure DropzoneJS Widget for Images

Now to configure the fields:

Label text box = Upload Images(s).

Submit Button Text text field = Select Image(s).

Upload Location field = is autofilled with tokens - leave this as is.

Dropzone Drag-n-Drop Zone Text text field = leave as is.

Maximum Size of Files select field = adjust as necessary - we leave ours pretty high at 128 MB.

Allowed File Extensions text field = we have jpg jpeg gif and png - add or remove as you see fit.

Media Type select box = Image.

Form Mode select box = Default.

D8 Entity Browser - Configure - Select Entity Form Widget

11. Add Entity Form Widget for Video

Now we'll handle our video embed field, which will embed video from third-party sources like YouTube and Vimeo.

Add Widget Plugin select field = Entity Form.

A new group of fields will appear.

D8 Entity Browser - Configure - Configure Entity Form Widget For Video

12. Configure Entity Form Widget for Video

For our video embed configurations:

Label text field = Add Video Embed.

Submit Button Text text field = Save Video Embed.

Entity Type select field = Media.

Bundle select field = Video.

Form Mode select field = Default.

D8 Entity Browser - Configure - Select Media Entity Dropzone with Edit Widget

13. Add Another DropzoneJS Widget

Now let's create a tab just for uploading documents using another DropzoneJS widget.

Add Widget Plugin select box = Media Entity DropzoneJS with Edit.

You'll see a new group of fields appear.

D8 Entity Browser - Configure - Configure Media Entity Dropzone with Edit Widget For Documents

14. Configure DropzoneJS Widget for Images

Now to configure the fields:

Label text box = Upload Document(s).

Submit Button Text text field = Select Document(s).

Upload Location field = is autofilled with tokens - leave this as is.

Dropzone Drag-n-Drop Zone Text text field = leave as is.

Maximum Size of Files select field = adjust as necessary - we leave ours pretty high at 128 MB.

Allowed File Extensions text field = we have txt doc docx xls xlsx pdf ppt pptx odt ods odp - add or remove as you see fit.

Media Type select box = File.

Form Mode select box = Default.

D8 Entity Browser - Configure - Move Document Widget Over Video Widget

15. Adjust Widget Position

To position widgets, just grab a mover handle and drag the group of fields.

In our example, the Document Upload widget is dragged up underneath the Image Upload widget.

After it's positioned, click the Finish button.

D8 Entity Browser - Configure - Completed in List

16. New Entity Browser Added to List

You'll be redirected to the Entity Browser list where your new Entity Browser will appear.