Thumbnail

Using Entity Embed and Entity Browser with core Media

Thumbnail

Campbell Tilley

|

Entity Embed and Entity Browser are two contributed modules that can be used to embed other entities, such as nodes, into your content. With Media being added to core in Drupal 8.4, we can now embed this new entity into our content.

With Drupal, you are given all of the pieces (we call them modules) you need to make a successful, functioning website but sometimes the instructions that come with it are either not clear or non-existent. You're then required to play a bit of chess - moving pieces around and trying different things until you can gladly say "checkmate".

In one of my previous articles, I spoke about Media being added to Drupal core in 8.4. With this addition, other contributed modules are being updated to support the Media module including Entity Embed and Entity Browser. Lil Engine recently reviewed and tested these modules. Essentially our goal was to be able to do add uploaded media into our page content. Setting up these modules for use with the Media module was a little confusing...so to make your life easier, we are sharing the steps we took to set it up.

Before we look at setting up the modules, you need to make sure your site has the right dependencies. Ensure you’re running Drupal 8.4 or higher and (if you haven’t already) install the Entity Embed and Entity Browser modules from Drupal.

Entity Browser View

The first step, after enabling the modules, is to create a view for the Entity Browser.

  1. Create a view that shows Media. You do not need to create a page or a block for this.

  2. Click the +Add button under Displays and select Entity browser.

  3. Set up the format for the view. In my example I have used Grid.

  4. Show Fields then select Media: Entity browser bulk select form and Media: Image as your fields. Configure both field settings - such as your image display for the media image.

  5. Due to Lil Engine having multiple Media Entities, I have added an exposed filter for Media Type and Media Name.

  6. Save your view.

Thumbnail

Entity Browser Configuration

  1. Navigate to Configuration > Content authoring > Entity browsers and select +Add Entity browser.

  2. Select iFrame as the Display plugin.

  3. Widget selector is a personal choice. We went with Drop down widget.

  4. Leave the Selection display plugin as No selection display. Click Next.

  5. Choose your iFrame display settings then click Next.

  6. Click Next through Widget selector and Selection displays.

  7. Choose your desired widgets. We have just used View but you can choose to upload images too. Ensure you select the view that you created.

  8. Click Finish.

Thumbnail

Entity Embed Configuration

  1. Navigate to Configuration > Content authoring > Text editor embed buttons and select Add embed button.

  2. Choose Entity as the Embed type then select Media as the Entity Type.

  3. Select your desired Media types and Allowed Entity Embed Display plugins.

  4. For the Entity browser, choose your new view that you have created.

  5. If desired, you can select a new icon for your embed button. This is handy if you have multiple embeds for Content, Media, Taxonomy terms etc.

  6. Click Save.

Text Format Configuration

  1. Navigate to Configuration > Content authoring > Text formats and editors and click Configure on Full HTML.

  2. Under Enabled filters turn on Display embedded entities.

  3. Drop and drag your Embed button from the Available buttons into Active toolbar.

  4. Save your configuration.

Thumbnail

Content

  1. When creating content, choose Full HTML as your text editor.

  2. Click on your Embed button then click Select entities.

  3. You have the option to either upload a new image or view images from your media library. Select your desired image by clicking on the tick box, then click Select entities.

  4. Choose Thumbnail as the Display then select your desired Image style and decide if you want the image linked.

  5. When you're finished, click Embed.

  6. If you need to edit your embedded image, right click on the image while in content edit mode and select Edit Entity.

You should now have a working Media Embed function!

It's still early days for core Media in Drupal and I'm sure that there will be many more awesome developments in the future. We will do our best to stay up to date with the changes to Media so make sure to keep an eye on our Articles page.

Add new comment

Comments

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <blockcode> <ul type> <ol start type> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word