Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Select Embeddable Media Assets in Drupal 8 with Entity Browser

Parent Feed: 
Select Embeddable Media Assets in Drupal 8 with Entity Browser

If you already learned how to embed a media asset into CKEditor in this tutorial, you’d probably noticed that the media asset selection occurs through an autocomplete field.

This doesn't really help those working with their media assets. Nobody remembers every single name of every single asset to embed. Good news is there are a few modules in Drupal 8, which can help you enjoy your media browsing task. 

In this tutorial, you’re going to learn how to configure the Entity Browser Module, in order to quickly find your media assets and easily embed them in your text editor.

The process of creating an Entity Browser is divided into three main parts.

  1. You have to create a view to being used by the Entity Browser.
  2. You have to create the actual Entity Browser Item to contain that view.
  3. You have to configure Entity Embed to use the configured Entity Browser you created in the second part.

With this procedure in mind, let’s start!

Step #1. Install the required modules

You will need to install only two additional modules for this tutorial:

Use the method you prefer and you’re good to go! I am using Composer to download the modules. I then enable them with Drush.

I am using composer

Step #2. Create the Media assets View

  • Click Structure > Views > Add new view.
  • Give your view a proper name.
  • Show > Media > of type > All > sorted by > Media Name.
  • Leave the Page Settings and Block Settings unchecked.
  • Click Save and edit.

click save and edit

  • In the Displays section of Views UI click the +Add button.
  • Select Entity Browser (this is mandatory).

select entity browser

  •  Click Add in the FIELDS section and add two additional fields:

click add in the fields

  • Search for Thumbnail and select it.

select thumbnail 

  • Type in browser in the Search box.
  • Select the Entity browser bulk select form field.
  • Click Add and configure fields.

click add and configure fields

  • Leave the configuration options of the Entity browser bulk select form field untouched by clicking Apply and continue. 

Note: The Entity browser bulk select form is a mandatory field. It is just a checkbox that will be used to select a media asset within the Media browser and embed it in the editor.

Your Media Browser won’t work if you don’t include this field in the view, so pay special attention to this.

 configure field media entity

  • For the thumbnail's style choose Medium (220x220).
  • Click Apply.

choose medium click apply

  • Take a look at the Preview now and you will something like this:

the preview you will see

If you wish, you can give the View another format. It will look a little bit clearer, for example with a table. 

  • Finally, click Save the View.

You have achieved the first part of the procedure. 

Step #3. Create the Entity Browser Item

  • Click Configuration > Content authoring > Entity browsers.
  • Click Add Entity browser.
  • Give your browser a proper name.
  • Choose either IFrame or Standalone Form in the Display Plugin option. There’s a compatibility issue between the Modal display and Entity Embed, so it won’t work if you leave the Modal display.
  • Click Next. 

11 click next 

  • Check the Auto open entity browser checkbox.
  • Click Next.

check auto open entity browser click next

  • Click again Next twice until you land on the Widgets screen.
  • Click the Add widget plugin drop-down.
  • Select Upload.

This will provide you an upload button for all kinds of files including images, text files, pdf files, etc. You will even have even another option if you would have configured an Image Media Bundle as explained in this tutorial.

  • Choose View in the Add widget plugin.
  • Select the View display you configured in Step #2.
  • Click Finish.

click finish

 You have achieved the second part of the procedure. Almost there. 

Step #4. Attach the Entity Browser Item to the Entity Embed Button in Your Editor 

  • Click Configuration > Content authoring > Text editor embed buttons.
  • Click Edit on your Media embed button (once again - review this tutorial first).
  • You’ll see a new Entity browser option with a drop-down.
  • Choose the browser item you configured in the previous step.
  • Click Save.

 click save

That was the third part of the procedure. Now you have to test your browser to see if everything works as expected. 

Step #5. Create content to test the browser

  • Click Content > Add Content > Article.
  • Click the Embed button in your editor.
  • You’ll see the media browser.
  • Check the video you want to embed.
  • Click Select entities.

click select entities

  • Choose how do you want your media asset (in this case a video) to be displayed.
  • Click Embed.

click embed

Time to relax and enjoy your newly acquired Drupal knowledge. Leave us your comments below. Thanks for reading!

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

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web