Drupal8 Media Configuration

Use Media Module

1. Enable/install “Media” module,

2. Navigate to “/admin/content” and select “Media” tab.

3. Click “Add Media” button to add images and other media as reusable media.

4. For Images select image and upload a reusable image, creates page for image.

Create New Media Type (video)

1. Download and enable/install “Video Embed Field” module: 

$ composer require drupal/video_embed_field

2. Enable/install “Video Embed Media” module (will also enable “Video Embed Field” module as a dependency).

3. Navigate to “/admin/structure” and select “Media types” (“/admin/structure/media”).

4. Click “+Add media type” button”, the rest almost identical to setting up a content type.

Set up a Media Field in content type

1. Navigate to “/admin/structure/types” and select “Manage Fields” on a content type, e.g. “Article”.

2. Click “Add Field” button.

3. In “Add a new field” select select “Media” (under subsection “reference”).

4. Give new field a label in the “Label” input, e.g. “Feature asset”. Save and continue.

5. On next page choose Allowed number of values, e.g. keep default of 1. Save field settings..

6. On next page select media types for this field, e.g. “Image” and “Remote Video”. Save settings.

Set up Inline Entity Form on Media Field to add media

1. Download and enable/install “Inline Entity Form” module: $ composer require drupal/inline_entity_form

2. Go to content type or paragraph type that has media field and select “Manage form display” tab, e.g. “/admin/structure/types/manage/article/form-display”.

3. From previous section “Set up a Media Field in content type”, the example field is named “Feature asset”.  Change widget select to “Inline entity form - Complex”.

4. For that same field, click gear icon on the right edge to configure the “Inline entity form - Complex” widget, e.g. check boxes “Allow users to add new media entities” and ‘Allow users to add existing media entities”. 

5. Click Update button then Save button.

Setup Entity Embed to embed media with the text editor (ckeditor)

1. Download and enable/install “Embed” module: 

$ composer require drupal/embed

2. Download and enable/install “Entity Embed” module: 

$ composer require drupal/entity_embed 

(enabling/installing this module will also enable/install “Embed” module as a 

dependency).

3. Navigate to configuration page and click link “Text editor embed buttons” (“/admin/config/content/embed”).

4. On next page click “Add embed button”.

5. On next page add Label, e.g. “Assets”.

6. For “Embed type” select “Entity”.

7. For “Entity Type” select  “Media”.

8. Optional, upload a button icon.

9. Save. 

10. Add button to editor: Navigate to configuration page and click on “Text formats and editors” link, (“/admin/config/content/formats”).

11. Select a text format to configure, e.g. “Basic HML”.

12. On next page in “TOOLBAR CONFIGURATION”, drag embed media button in “Available Buttons” into the “Active toolbar”, e.g. the “Media” box.

13. At bottom of page check to make sure “<drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-align data-caption data-embed-button>” tag is in the “Allowed HTML tags” section. (should have been automatically added).

14. In “Enabled Filters” section select the checkbox for “Display embedded entities”.

15. In “Enabled Filters” section uncheck the checkbox for “Restrict images to this site”.

16. In “Filter processing order” section move “Display embedded entities” into 2nd position from top.

17. Save configuration.

Install Entity Browser for upload and reuse Images

1. Download and enable/install “Ctools” module: 

$ composer require drupal/ctools

2. Download and enable/install “Entity Browser” module version 2.0: 

$ composer require drupal/entity_browser

3. Download and enable/install “Inline Entity Form” module: 

$ composer require drupal/inline_entity_form

(should already have this from previous section “Set up Inline Entity Form on Media Field to add media”).

4. Download and enable/install “DropzoneJS” module version 2.0: 

$ composer require drupal/dropzonejs

5. Enable/Install “DropzoneJS entity browser widget” module (this will also install/enable “DropzoneJS” module as a dependency).

6. Navigate to github and download the dropzone project.  (“https://github.com/enyo/dropzone”).

7. In docroot find or create the “libraries” directory and place in the dropzone folder. (remove “-master” from directory name).

8. Configure Entity Browser: Navigate to “Configurations” page and click on “Entity browsers” link. (“/admin/config/content/entity_browser”).

9. On next page, click on “+Add Entity Browser” button.

10. On next page, label the entity browser, e.g. “Assets Library”.

11. In “Display plugin” select “iFrame”. 

12. Click on “Next” button on bottom of page.

13. On next page select the checkbox for “Auto open entity browser”, then click “Next” button.

14. On next pages click “Next” button if no configurations are available.

15. The next page should then be the “Widgets” page.

16. In “Add widget plugin” select “Upload images as media items, this should insert a blade for this widgets configuration.  Rename the label “Upload”, then click “Finish” button.

17. Navigate to the “Configure” page and click link to “Text editor embed buttons” to edit the “Assets” button. (“/admin/config/content/embed/button/manage/assets?destination=/admin/config/content/embed”).

18. On next page, in “Entity browser” section, select newly created “Assets Library”, then save.

19. To access to existing media for the entity browser, create a view to access the media. Navigate to the views page. (“/admin/structure/views”).

20. On “Views” page click “+Add view” button.

21. Name view “Assets Library”, and in “View Settings” section for “Show” select “Media”, then click “save and edit” button.

22. On next page, the view edit page, in “Displays” header,  click “+Add” button and select “Entity browser”.

23. Add field, “Entity browser bulk select form”. To create check box for asset selection. (check “Preview” will see checkboxes in the “Content” section, if media was uploaded).

24. On next popup, click “apply” button.

25. Add field “Thumbnail” and click “Add and configure fields” button.

26. On next popup, for “Image style” select “Thumbnail (100x100)”, click “Apply “ button. (check “Preview” will see thumbnail images in “Content” section, if media was uploaded).

27. In “FORMAT” section, convert “Format” from “Unformatted list” to “Table”, click “Apply” button.

28. In next popup, click “Apply” button.

29. In “FIELDS” section click “Add” button and select “Rearrange”.

30. Move checkbox “Entity browser select form” to top/front, and “Name” to bottom/back, click “Apply” button. This should give a display of checkbox, then thumbnail, then name, in a table row.

31. Save the view.

32. Navigate to “Configurations” page and click “Entity browsers” link. (“/admin/config/content/entity_browser”).

33. Click “edit” select on entity browser named “Assets Library”.

34. On the “General information” page click the “Widgets” link at top of page.

35. On the “Widgets” page, in “Add widget plugin”, select “View”.

36. In the “View: View display” section select “Assets Library: Entity browser”.

37. For label rename to “Library”, then click the “Finish” button.

Add Inline Entity Form to Entity Browser to upload/add youtube videos

1. Navigate to Configuration page, select “Entity browsers” link, then click “edit” button to existing “Assets Library” entity browser. (“admin/config/content/entity_browser/assets_library”).

2. At top of “General information” page, click the “Widgets” link. (“/admin/config/content/entity_browser/assets_library/widgets?js=nojs”).

3. On the “Widgets” page, in the “Add widget plugin” section select “Entity Form”.

4. ReLabel the “entity_form” to “Youtube”.

5. In “Entity type” select “Media”, in “Bundle” select “Remote Video”, click “Finish” button.

6. Note: will need a new Tab/blade for each different Bundle.  This is inconvenient.

Add Dropzone to Entity Browser for drag and drop new media.

1. Download and install “DropzoneJS” module, this should have already been done in a previous section.

2. Navigate to Configuration page, select “Entity browsers” link, then click “edit” button to existing “Assets Library” entity browser. (“admin/config/content/entity_browser/assets_library”).

3. At top of “General information” page, click the “Widgets” link. (“/admin/config/content/entity_browser/assets_library/widgets?js=nojs”).

4. On the “Widgets” page, in the “Add widget plugin” section select “Media Entity DropzoneJS with edit”.

5. ReLabel the “dropzonejs_media_entity_inline_entity_form” to “Drag and Drop Image”.

6. Select “Image” for “Media type”, then click “Finish” button.

Configure “Feature Asset” Field to use Entity Browser “Asset Library”

1. Go to content type with “Feature asset” field (field widget “Inline entity form - Complex”), and click on gear widget on the right edge.

2. Select “Assets Library” for “Entity browser”, click update.

3. To avoid duplicate “Upload” button, uncheck “Allow users to add new media entities”.  The “Allow users to add existing media entities” will display the “Assets Library” which should have upload, and drag and drop image from previous sections.