This got my attention, not because the title was in all caps, but because Drupal needed to fix media management, as the title says: “ONCE AND FOR ALL”.

Let’s face it, Drupal doesn’t handle media very well when compared to other systems. I’ve worked with clients who are used to a certain level of functionality when it comes to managing images or videos on websites.

In Drupal 7 you had a few options.

You could use the Media module. But embedding images through the editor could be buggy depending on which module you’d use to implement the editor, i.e., Wysiwyg or CKEditor.

Then you have Scald, which is a pretty good module. Another module which has been around for a long time is IMCE.

However, adding media management into a Drupal site isn’t as straightforward as you think. That’s why I attended the core conversation in Prague. I too thought Drupal needed a great and robust media system.

Fast forward a couple of years since DrupalCon Prague and things have changed.

Thanks to the work from the Drupal Media team, managing media in Drupal 8 has got a lot better.

What’s Happened to the Media Module?

In Drupal 7, the Media module was jam-pack with a lot of functionality. In Drupal 8, a lot of its functionality has been broken out into seperate modules. There is a Drupal 8 version of Media and it’ll be used to create an out-of-the-box solution. The module doesn’t do much other than ship a bunch of configuration.

Part 1: How to Create Media Entities

So you’ll need to download other modules which are media providers. For example, if you want to handle images then download and install “Media entity image“. If you want to handle audio files you’ll need the “Media entity audio” module.

For a full list of media handlers go to the Media Entity project page.

I’m only going to focus on two types of assets in the tutorial: images and embedded videos (YouTube or Vimeo).

Create Image Media Bundle

From this page you manage all the different media bundles. This is similar to the “Content types” page.

2. Click on “Add media bundle”.

3. Enter Image into Label, “Used for images.” into Description and select Image from the “Type provider” drop-down.

Ignore the other fields for now and scroll to the bottom and click on “Save media bundle”.

You can ignore the “Field with source information” drop-down. We’ll need to create a field and map it after.

4. Now click on “Manage fields” from the Operations drop-down.

We need to create an Image field that’ll be used to store the actual image field.

5. Click on “Add field”, select Image from “Add a new field” and enter Image into the Label field.

6. Leave the “Field settings” page as is and click on “Save field settings” at the bottom.

7. Leave the Edit page as is and click on “Save settings” at the bottom.

8. Click on the Edit tab from the “Manage fields” page to edit the media bundle.

9. Make sure the “Field with source information” drop-down has selected the image field which we created and click on “Save media bundle”.

Type Provider Configuration

The “Media entity” is like any other entity type: it’s fieldable. You can add custom fields, you can configure the form display and general display like you do with content types.

The only difference is, we need to tell the media bundle which field will store the actual file. If you’re creating a document media bundle, then you’d create a File field and select that in “Field with source information”.

Field Mapping

The “Field mapping” section lets you store metadata from the image into custom fields. If you want to store the width, then you’ll need to create a text field and select it from the Width drop-down.

Take note, the possible metadata properties are determined by the type of provider. You’d get different options if you were configuring a document media bundle.

Create Embed Video Media Bundle

Now it’s time to create another media bundle and this one will be used for embedding videos, i.e., YouTube or Vimeo videos.

We won’t have to create a “Video embed” field and map it across like we did for the Image bundle because “Video embed media” module did it for us.

Take note of this message:

So we’ve created our media bundles now let’s look at how to create a media asset.

How to Create a Media Assets

At this point, you can only create assets from the Media page.

1. Go to Content and click on Media.

From this page you can add a media asset and view existing ones.

2. To create an asset just click on “Add media”.

Go ahead and create an image and embeddable video.

Access to Media Entities

By default Media Entity won’t configure permissions. If you want to allow anonymous users access to the assets then you’ll need to assign them the “View media” permission.

Just go to People, Permissions and assign “anonymous user” the “View media” permission.

Part 2: How to Embed Media Entities

Creating media assets is useful but if you can’t embed them what’s the point of having them.

In this section we’ll embed assets directly into the editor using Entity Embed.

The Entity Embed module allows a site builder to create a button which lets an editor embed entities into a text area, hence the name Entity Embed. It can be used to embed any type of entity not just media bundles. So be creative, you could use it to embed event content types.

Make sure these tags are in the text field. If not then embedding media assets WILL NOT WORK.

Enable “Display embedded entities”

Enable the “Display embedded entities” filter. This is required for the embedding to work.

Confirm Order of “Align images” and “Caption images”

The Entity Embed README.txt mentions if you’re using the “Align images” and “Caption images” filters, to order “Align images” before “Caption images”.

Problem with “Restrict images to this site” Filter

The “Restrict images to this site” Filter stops an image being displayed if you embed it and select an image style.

The filter stops a user from pointing to an image which is not hosted on the site. For example, if you’re Drupal site is hosted at my-drupal.com, then it won’t allow you to add an image such as <img src="http://random-site.com/image.jpg" />, all your images need to be <img src="http://my-drupal.com/image.jpg" />.

Configure Entity Embed to use Browser

2. You should see a drop-down called “Entity browser”, select the browser you just created and click on Save.

Using the Entity Browser

Go into an article or page and click on the Entity Embed button.

You should now see a pop-up with two tabs: “Upload images and view.

From the “Upload images” tab, you can upload a new image and it’ll create an Image media bundle.

If you click on view, you’ll see all the media assets.

To embed an asset, just choose which one you want and click on “Select entities”.

How do you Add a YouTube Video from the Entity Browser Page?

I haven’t figured this out yet. If you know how, leave a comment.

Summary

Adding functionality to a Drupal 8 site to handle media assets can be done and it’s fairly solid. But as you can see there’s a lot of configuration involved. Hats off to the Drupal Media team for creating a flexible suite of modules. With the “Media in Drupal 8 Initiative” in the works, things are looking very promising.

Extra Resources

FAQs

Q: When I embed an image and select an image style all I see is a red cross.

Disable the “Restrict images to this site” filter.

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Post navigation

49 thoughts on “How to Manage Media Assets in Drupal 8”

thank you for the comprehensive tutorial. I run into some problems. Maybe you can help me out. Background: Images with a custom field for the copyright notes. They should be used inline (CKEditor) an in fields (current image fields). All copyright notes of a node are collected in separate section under the page content.

– How can I use the Entity Browser in image fields and access the custom fields of the media? (We actual use image fields for a slider.) I tried to set Entity Browser in form display settings but I cannot access the custom fields from the output. It set only the image to the field.
– Can I get all media entities referenced on “current” node (inline and fields)? I could output the copyright field (media inserted in CKEditor) only near the image.

– How can I use the Entity Browser in image fields and access the custom fields of the media? (We actual use image fields for a slider.) I tried to set Entity Browser in form display settings but I cannot access the custom fields from the output. It set only the image to the field.

Are you creating an entity browser in views? Is the copyright field on the media entity?

Then you should be able to add the field in views like any other.

– Can I get all media entities referenced on “current” node (inline and fields)? I could output the copyright field (media inserted in CKEditor) only near the image.

As far as I know media entity usage is not tracked like file entities are. If I’m wrong let me know 🙂

What you could do is reverse engineer the entity embed filter which searches for all “” tags. That’ll give you a list of media entities embedded in the node.

Thanks for excellent tutorial!
Only one issue: when I upload an image via the Entity Browser, i receive this errormessage ‘The entity must be of type media’
However no problem when i try to upload the same image via content>media

Thanks or the tutorial, just a couple of notes:
– Personally I found better to create different entity browsers for each type of media, so I have on y site one for images, one for documents and one for videos, each one with a view that only show the correct entities
– For being able to add a youtube video from the entity browser you need to add the entity_form widget and configure it to point to the video bundle and done

Hi Ivan – thanks for the great Drupal 8 content – I love it!
Question regarding Media Library and documents. We are using a version of Acquia’s Lightning, so we have quite a bit of this already in place; however, how do we use the Media Library for documents like PDFs?
When I try to include a PDF file (either already in the Media Library, or else uploaded) the options I get either embed the link as a PDF image icon, or else use the file name as the link text, or else use the Label as the link text — but not as an inline link that opens the PDF file. Rather, every one of them opens the entity page first, where the PDF document resides, which seems pretty useless for our visitors.
How do I fix this? I just want to be able to use Media to hold/upload such documents, and then correctly link to them as you’d expect in the WYSIWYG editor.

Is ist possible to use the asset browser we just created on fields, e.g. an Image? When I set it as widget in Form Display, selecting any media results gives the error “The entity must be of type file”. And since I am using paragraphs in my site, it is crucial to use the asset browser on fields.

Additionally, is it possible to replace the upload form with a form to add new media items? This reduces the amount of images not available in the library.

Is ist possible to use the asset browser we just created on fields, e.g. an Image? When I set it as widget in Form Display, selecting any media results gives the error “The entity must be of type file”. And since I am using paragraphs in my site, it is crucial to use the asset browser on fields.

Hi,
I tried this, but when I add a content reference field (for me there is no entity reference field, D8.3) and select the Inline Entity Form as widget, the field doesn’t even show up.
What am I doing wrong? Maybe you can add some instructions to the original tutorial

I’ve tried the Media Management portion of this several times now and keep running into the same issue of not getting a proper thumbnail in the Media list, I get a generic icon image instead. At first I thought the problem may have been being caused by my local environment setup, maybe a permissions problem or something, but I just tried it on a free Pantheon Dev account and encountered the same problem. I have followed the instructions very carefully and even watched your YouTube tutorial. I somewhat sure I’m setting every thing up correctly, do you have any suggestions?

I’m using the Media Entity API, version 8.x-1.6, with the Image Provider (Media Entity Image) version 8.x-1.2

No on-page errors but in the “recent log messages” I see an error that starts with… Notice: Trying to get property of no-object in Drupal\media_entity_image\Plugin\MediaEntity\Type\Image ->thumbnail()(line 208 of… and then goes on and on, a very long message.

“Notice: Trying to get property of no-object in Drupal\media_entity_image\Plugin\MediaEntity\Type\Image ->thumbnail()(line 208 Notice: Trying to get property of no-object in Drupal\media_entity_image\Plugin\MediaEntity\Type\Image ->thumbnail()(line 208”.

When using embed_entity for images, the Media Bundles -> Manage Display -> Format has no effect (because embed formats are determined by the allowed Entity Embed Display plugins… not field formatters). So, how can you use Colorbox for embedded images?

Is it possible to define different sub-directories for image/file uploads? Perhaps using a taxonomy term token? i.e., if the image was uploaded from a page in the “About” section, it would be stored in an “about” sub-directory.

thanks a lot for the work
there is a problem with the image display when embedded on ckeditor.
showing just an icon of absent image
this is because in a site where I m forced to store uploaded images in private folder.
in setting of the Embed buttons
Upload destination
Public files
x-Private files
so is there any way to do it even using Private files
thanks

Configuring Entity embed and Entity browser is exactly the same. Just make sure you download the 8.x-2.0-alpha2 version of Entity browser.

Media Entity is no longer required, instead use the core Media module.

Below is an excerpt from the updated tutorial:
———What’s the Difference Between Media Entity and Media
The biggest difference between the two modules is that the API has changes. Any media provider module for Media Entity such as Media entity Instagram or Media entity Twitter need to be updated to use the new API. A lot of these modules now have a 8.x-2.0 version which only works with core Media. So if you’re going to use a media provider module read the project page.