How to Use the New Media Module Features in Drupal

| Drupal
How to Use the New Media Features in Drupal 8.4

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:

  1. Document
  2. Image
  3. Audio
  4. Slideshow
  5. Video embed field
  6. Twitter
  7. Instagram
  8. SlideShare
  9. Facebook
  10. 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".

twitter 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.

field mapping

  • Finish saving your new media type.
  • Click "Manage display" for "Twitter".

manage display

  • Change the display of "Tweet Url" to "Twitter embed".

twitter embed manage display

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:

add drupal media field

  • 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. 

media bundles

  • After saving your field, click "Manage display".
  • Change the display for your new field to "Rendered entity":

manage display twitter

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".

drupal84tweet

  • 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.

drupal84 tweet

#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:

tweet publishing drupal

  • Save your content type, and there's the embedded tweet:

tweet embedded drupal

If you want to learn more Drupal, join OSTraining now. You'll get access to a vast library of Drupal training videos, plus the best-selling"Drupal 8 Explained" book!


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.