Media Suite Tutorial

In this tutorial I will show you one way to set up a Media Suite in Drupal 8 (versions 8.5 and up). If you have done this in prior versions you will note that there are only be a few minor configuration differences, but there are fewer steps because some of the modules are now included in core. Let's get started.


Note that in Drupal versions 8.5 and up, Media is now built into core, so a Media Library is included right out of the box. (/admin/content/media)

Media Library


Also note that four types of Media are configured right out of the box (you are not limited to four).

entity types menu


However, having a library of media is only useful if you can add them to your content. This capability isn't something that comes pre-configured in the base install, which may seem a bit odd but there are actually a number of reasons for that, which we won't discuss here.

This tutorial will focus on the most basic and practical place, in the main body content of a Basic page, Article, or custom content type. And the most convenient way to accomplish that is by adding the ability to "embed" media via the text editor (aka WYSIWYG). With this capability you are able to add any type of media inline with your body text. A fresh install of D8 reveals that this (embed) functionality is not included (see below).

Note! You can however, insert an image into body content via the image icon in the toolbox (see below,) which will allow you too upload one-off images, but it doesn't allow you to access your Media Library to insert reusable images or other media.

wysiwyg editor


To make this functionality available we will have to install a module (Entity Embed) and do a little configuration. Ok, maybe more than just a little, but you won't have to write any code, so let's do this.

Go to Extend in the admin menu, and then click on Install new module (/admin/modules/install) and let's install the Entity Embed module. I typically use the "Install from a URL" method by copying and pasting the link to the gz or zip file of the most current (stable) version on the project page (

Install a module


After you have installed the module you have to click the Extend tab again on the admin menu, (/admin/modules) check the box to enable the module, and click Install at the bottom of the page.

Enable Entity Embed module


Next, we need to build the user interface (a Media Browser) that allows us to select the media we are inserting into the content area. This is easier to do than it sounds, we will use a tool (Views) that is included in the base install to build it. In the admin menu, go to Structure, Views, Add new View (/admin/structure/views/add). Give the View a recognizable name such as Media Browser, and change the View Settings to Media, of all Types. Click Save and edit.

*We're using all types because we can add filters to the View to help refine the library when looking for a specific piece of media, but note that it is possible to create a View for each type of media. This may be advisable to do under certain circumstances such as when the site will have lots and lots of media.

Add View


On the next resulting screen, click on the Add button and select Entity Browser from the menu. Note that the Master button will automatically be replaced with the Entity Browser button after the selection has been made. This is because Drupal hides the Master button by default when another "View display" is available.

Add Entity Browser


Next, click on the Unformatted List link and change it to Table (next two images).

Unformatted list

HTML list

On the next resulting screen, change the default sort to the Media name, the rest of the default settings are fine although you should familiarize yourself with other options available here, they may come in handy later if you want to further customize the interface.



Since we don't want full size images to display in our Media Browser, we will need to create a "View Mode" so we can have consistent thumbnails display instead. In the admin menu, go to Structure, Display modes, View modes, Add new view mode, then select Media, (/admin/structure/display-modes/view/add/media) and enter Thumbnail into the text field and click Save.

Thumbnail view mode


Now let's add the thumbnail view mode to our Image media type. In the admin menu go to Structure, Media types, Image, Manage display (/admin/structure/media/manage/image/display).

On the Default tab, scroll to the bottom and click on Custom Display Settings, then check Image, and Thumbnail and click Save. After that has saved, click on the Thumbnail tab. (see next image)

Image view modes


Set the Label to Hidden, set the Format to Image, click Save, and then click on the little gear cog thing (see next image).

Thumbnail view mode screen 2

Set the Image Style to Thumbnail 100 x 100, and set the Link image to nothing. Click Update and then Save at the bottom. You're done with setting up the View Mode.

Thumbnail view mode screen 3


Now, let's go finish up our Media Browser View. In the admin menu, go to Structure, Views (/admin/structure/views) and then Edit your Media Browser View. Under the Fields heading, click on Media: Name and uncheck the Link to Media checkbox (see next image).

click on media name

Uncheck the Link to Media checkbox.

Uncheck the Link to Media checkbox

Now let's add thumbnail images and a method to select our choice to the Media Browser View. On doing so there will be both a name and a thumbnail version of each file in the Media Browser, which will make them easier to find and reuse later.

Let's add the image Field first by clicking on the Add button:

Click Add Field button

In the resulting popup window, search for "image," check the box next to it when it comes up, and then click the Add and Configure Fields button.

Search for Image field and select it.

In the next resulting popup window select the Thumbnail 100 x 100 Image Style and then click Apply.

Select thumbnail 100x100

Click the Add button again (just as we did a moment ago) and this time search for "bulk" In the resulting popup window, check the box next to it, then click the Add and configure fields button.

Search bulk and check to add the bulk select field

Add the Label "Select a Media Item" and then click Apply.

Add Label to Bulk Select field

Next Steps, add an Embed button to your WYSIWYG and link the button to the Media Browser you just created.

(add shots of building an embed button and adding the entity browser to the Content Authoring configuration)

Believe it or not, you're done. You should be able to create or edit a basic page and add an image from your Media Library.