Since the release of Drupal 8.4 in late 2017, Drupal has contained new media handling features.
For many years, Drupal has shipped with almost no media handling. This was the most commonly requested feature whenever we did Drupal training.
In this tutorial, we’ll walk you through how to use Drupal’s new media options. We’ll update this post as soon as Drupal 8.5 is available.
Step #1. Install a Contrib Module
The core of Drupal 8.4’s media features is a new “Media” module. This module is available, but hidden by default.
To active the Media module you need to install and activate a contrib module for the media type you want to use. At the moment, there are ten modules that are ready:
- Video embed field
- Inline entity form
If you want a complete, updated list of Media modules that are ready for 8.4, bookmark this page.
After installing and enabling a contrib module, Drupal will ask you to enable the Media module too. The Media module is hidden by default and will only become available when enabling contrib modules.
Step #2. Create the Media type
Now, we’re going to create the entity that will store our tweets.
- Go to Structure > Media types.
- Click “Add media type”.
One of the more advanced features of the Media module is field mapping. If you want to, you can extract multiple types of data from the tweet and store them in different fields.
- Finish saving your new media type.
- Click “Manage display” for “Twitter”.
- Change the display of “Tweet Url” to “Twitter embed”.
Step #3. Create the Fields
Next, we’re going to add our new media type to a content type.
- Go to Structure > Content types.
- Create a new field for a content type, choosing the “Media” field type:
- Click through and choose “Twitter” in the “Bundles” area.
- Don’t check “Create referenced entities if they don’t already exist” because that led to errors in my testing.
- After saving your field, click “Manage display”.
- Change the display for your new field to “Rendered entity”:
Step #4. Add the Media
At this stage of Drupal 8’s media journey, we will need to create the media items before we use them.
- Go to Content > Media.
- Click “Add media”.
- Choose “Twitter”.
- Save the tweet and the next image shows what you will see.
- If you don’t like the display, go back to Structure > Media types > Manage display and tweak the options.
#5. Use the Media
Finally, let use our new created media inside a node:
- Go to Content > Add content.
- Create new content.
- You’ll be able to search for your existing tweet using an autocomplete field:
- Save your content type, and there’s the embedded tweet: