- OSU Drupal 8 Overview
- Technical Manual
- Working with Content
- Working with Structure
- Working with Appearance
- Working with Configuration
- Working with People
- Working with Groups
- Advanced Topics
OREGON STATE UNIVERSITY
Open search box
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.
Go to Admin Menu > Configuration > Content Authoring > Entity Browsers.
Click the Add Entity Browser button.
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.
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.
On the Widget Selector screen, the options that we're using don't have any configuration options.
Click the Next button to advance.
On the Selection Display screen, the options that we're using don't have any configuration options.
Click the Next button to advance.
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
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.
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.
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.
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.
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.
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.
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.
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.
You'll be redirected to the Entity Browser list where your new Entity Browser will appear.