Media Files Management in Drupal 8 with IMCE Module

Drupal is among the top three content management systems that power millions of websites on the internet. It is especially popular in large-scale enterprise projects. However, the standard installation for Drupal does not include file or media assets management. In this tutorial, we will teach you how to install the IMCE module in Drupal 8 which you can use to browse and embed media files from the WYSIWYG editor.

Installation and Image Field Integration

1. Install and activate the IMCE module. (Refer to the tutorial How to Install a Module in Drupal 8.)

2. Click on the Structure tab at the top menu.

3. The Structure page will appear. Click on Content types.

4. The Content types page will appear. Go to the Operations column on the right of the page.

Drupal 8 Content Types

5. Click on the arrow pointing down on the Manage fields button for Article.

6. The button will expand downwards to display other buttons. Click on Manage form display.

Drupal 8 Content Types Manage form display

7. The Manage form display page will appear. Look for Image in the Field column (first column).

8. On the right of the page (last column) are buttons that look like stars or gears. Click on the button for Image.

9. The Image row will expand. Tick the checkbox for Allow users to select files from Imce File Manager for this field.

Drupal 8 Image Field

10. Click on the Update button.

WYSIWYG Editor Integration

11. Click on the Configuration tab at the top menu.

12. The Configuration page will appear. Look for the Content Authoring section.

13. Click on Text formats and editors.

14. The Text formats and editors page will appear. The first column on the page is called Name and the last column is called Operations.

Drupal 8 Text formats and editors

15. Look for the Configure button for Basic HTML in the Operations column. Click open it on a new browser tab.

16. The Basic HTML page will appear. Look for the IMCE File Manager button (picture icon) from among the icons listed in the Tool Configuration section. In our case, it was the second to the last icon.

Drupal 8 Image Icon

Drupal 8 Text Editors Tool Configuration

17. Drag it from the Available buttons subsection down to the Active toolbar subsection.

18. Click on the Save configuration button.

19. Go back to the Text formats and editors page. Repeat Steps 15 to 18 for Full HTML instead of Basic HTML.

Drupal 8 Text formats and editors

20. Click on the Content tab at the top menu.

21. The Content page will appear. Click on the Add content button.

22. The Add content page will appear. Click on Article.

23. The Create Article page will appear. The IMCE File Manager button is now in the WYSIWYG editor. Click on it to start using it.

Drupal 8 Create Article