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 (https://www.drupal.org/project/entity_embed).

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.

default-sort


 

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 and see the 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

Add rendered image to view