Creating a media library in Drupal
handling media files.
When Drupal 8.0.0 got released, it didn't have a friendly way to handle media. For example, if you wanted to use an image in multiple places, you have to upload it multiple times. This issue got resolved in the "contrib" space and by version 8.4 we finally got a media module in core. It still needs a lot of configuration and contrib modules.
Note: This only works in 8.4+ version of Drupal
For this example We'll try to update the
Article content type to use the new media intead a
Core media module
When you enable the
Media module, it adds a new entity to Drupal and you can see the admin page in
/admin/structure/media. If you are using the
Standard profile, you will see a list of media entities:
- Audio: For locally hosted audio file.
- File: local files for reusable media.
- Image: local images for reusable media.
- Remote: video A remotely hosted video from YouTube or Vimeo.
- Video: A locally hosted video file.
Now, let's replace the
Image with a new field. Go to the Managed Fields for the Article content type (Administration >> Structure >> Content types >> Article >> Managed Fields) and add a new
Reference Media field and make sure that it references to the Image media type. Don't forget to delete the previous image field.
If you try to add an article in order to test the new field, you'll see something like this:
That's a bad UX. You'll have to go to a different page to add a image then go back and remember the name. it gets even worse. Imagine a week from now, you won't remember all the images that are in the site.
Differences between Media, File, and Image reference fields
Media reference fields offer several advantages over basic File and Image references:
- Media reference fields can reference multiple media types in the same field.
- Fields can also be added to media types themselves, which means that custom metadata like descriptions and taxonomy tags can be added for the referenced media. (Basic file and image fields do not support this.)
- Media types for audio and video files are provided by default, so there is no need for additional configuration to upload these media.
- Contributed or custom projects can provide additional media sources (such as third-party websites, Twitter, etc.).
- Existing media items can be reused on any other content items with a media reference field.
Improving the Core media module
First, lets download the contrib modules:
composer require drupal/entity_browser 'drupal/media_entity_browser:^2.0'
Make sure that you get the version 2 of the module media_entity_browser. The version 1 only works in Drupal >=8.3. If you don't add the
^2.0, composer will try to download the version 1.
Go ahead and enable the following modules:
In order to use the new entity browser, go to the Form display page for the article content type
/admin/structure/types/manage/article/form-display. Locate the new Image field. There's a big change that it is at the bottom. Change the widget from
Autocomplete to Entity Browser. Then click the settings option to the far right. Select The Media Entity Browser (Modal) option for the entity browser and Rendered entity. Hit Update an save
If you try to add an article again, you will see that a modal displays immediately the page loads.
/admin/config/content/entity_browser and edit Media Entity Browser (Modal) and in
DISPLAY PLUGIN SETTINGS un-checked auto open entity browser. Go and checkout the article content type. That’s better.
The current setup is better than the default image field. But there are a couple of things you can checkout.
- If you want to display an smaller image preview in the edit form, go a create a new display type
/admin/structure/display-modes/viewand configure an different resolution. Select the new view type here
- If you want to hide or add more field to the add tab, go and update the form display for the media type
/admin/structure/media/manage/image/form-display. You can also have multiple media form views.
- If you want to add drag/drop funcionality for the uploads, download and configure dropzonejs