18 - November - 2016

Selecting media in Drupal 8

Post by Andy R Andy R

Whilst building the new Ixis site in Drupal our content creators were tired of uploading the same image to different fields over and over again. In Drupal 7 we used the media browser provided by the media module so the users can upload an image once and just pick it from the list from then on. So we took the opportunity to look at the state of media module for Drupal 8 and have found it has been reworked quite considerably to be more flexible.

The media browser in media module has been split into multiple components. The ones we are interested in are entity_browser (which "provide a generic entity browser/picker/selector") and File entity browser (file_browser) which "...provides a default Entity Browser that lets you browse and select your files in a nice-looking, mobile-ready Masonry based interface, and upload files using the Dropzonejs module."

We are quite impressed by the experience file entity browser gives out of the box and barring a couple of niggles has worked really well so far.

Below we'll go through the steps of configuring the module along with a couple of customisations we are using that differ to the default.

We'll start at the beginning and step through enabling file entity browser on a field.

Installation

Follow the instructions on the file entity browser module page to install file browser. You will need to add the dropzone, masonry and imagesloaded libraries too. You can do this manually or using drush make or composer.

Adding file entity browser to a field

Assuming there is a content type with an image field, use "Manage form display" to select the "Entity browser" widget.

Pick entity browser widget

You must then configure which entity browser to use. Do this by clicking the settings icon.

You will then be presented with a configuration form - this just needs saving.

Widget configuration
Configuration is saved

Using the file browser

In the default configuration, I found the selection process to be a little confusing at first.

Select the image in the file browser

Once you have selected the image you are left with the file browser and for me it was not immediately obvious what had happened.

Clicking 'Show selected' shows the image that has been selected in a little popup.

File browser buttons

This is so you can build up a list of multiple images to add to the field. These can come from multiple pages of images for example.

Pressing 'Use selected' will add the image to the field.

File browser showing selected images

Once I did it a couple of times it was easy enough, but I found it a little confusing at first. There is an issue on the issue queue related to the this experience.

This "multiple step" behaviour can be changed by configuring the entity browser.

The configuration for entity browsers is at /admin/config/content/entity_browser. The "multiple step" option can be changed using the "Selection display plugin" to "No selection display". This will allow you to pick the image in one step, at the cost of being unable to select multiple images at once. It comes down to personal preference which one you want.

Entity browser configuration

Custom Views configuration

The UI for selecting files is based on Views. This means you can quite easily modify the view to display the data you want and also adjust the filters for example.

One of our requirements was to show a drop down for the mime type instead of having to fill it in manually. We wanted to show a selection for Images, Videos and All files. This was configurable using Views.

The mime type field is already an exposed filter, but we want to to change it to a 'Grouped' filter and specify the image mime types for Image group and video mime types for the Video group.

First, select 'Grouped filter'

Views: change exposed filter to groupes

Then add the groups at the bottom of the page.

Views: mime type groups

This results in a drop down for the mime type when you are using the file browser.

File browser with mime type filter as dropdown

Custom entity browsers

It is possible to create your own entity browsers. 

For example, you may want to remove the 'mime type' field and only filter by 'application/pdf' to show PDFs only when picking file attachments. You may want to prevent PDF upload too. As you would be changing the view display for this and removing the 'Upload' option you would need a new entity browser to do this.

Unfortunately, the file entity browser will only work for the two entity browsers the module uses. This looks like it may be addressed in a future release.

All in all we've been impressed by the flexibility of the new entity browser system and the file entity browser module.

The future of media is to get more of it in to Drupal core and to standardise the UX of selecting and embedding media. This recent talk at Drupalcon Dublin 2016 explains the roadmap.

Video

Dries has recently announced a plan for media management in Drupal 8 core. This expands on the current file entity based approach and expands it to have different media types e.g. Video, Image or Tweet. Initially these will be experimental modules so there could be breaking changes between versions. However, we look forward to trying them out as soon as they land.

Andy R

Andy R

Senior Developer

Add new comment

Share this article

Our thoughts

Let's work together

Get in touch and find out how we can empower your organisation.
Back to top