Drupal 8: How to render a media entity in the WYSIWYG using Entity Embed module?

Question

Question: How to render a media entity in the WYSIWYG using Entity Embed module?

I have installed the following modules:

• Media Entity
• Video Embed Field
• Video Embed Media (which was bundled w/ Video Embed Field)
• Colorbox
• Entity Embed

I created a new media bundle with the Type provider of Video Embed Field - and called it "YouTube". I set this field to use YouTube videos. I modified the display of the Media bundle to only show the video as Colorbox. I added some content and confirmed that the Media was showing the thumbnail and when clicked on launched the Colorbox modal.

I now wanted to embed the entity into the Basic page's WYSIWYG. To do that I:

• Went to Configuration > Content Authoring > Text Editor Embed Buttons.
• Clicked the Add embed button
• Gave it a label and selected Entity under Embed type
• Under Entity type I selected Media
• Under Media bundle I selected the "YouTube" bundle I created
• I checked all of the Allowed Entity Embed Display plugins

Now that the button was created, I needed to add it to the WYSIWYG:

• I went to Configuration > Content Authoring > Text formats and editors
• I clicked configure button beside Full HTML
• I dragged my new Entity Embed button into the WYSIWYG
• I checked the box for Display embedded entities
• I made sure that Limit allowed HTML tags and correct faulty HTML was NOT checked

I then added a new basic page of content, clicked the new Entity Embed button and searched/selected the media entity YouTube video I created. At this point I could only get the Media ID to embed into the WYSIWYG. There was no display option to simply render the media in the WYSIWYG.

How can I render the media entity in the WYSIWYG?

Answer 1

For Video: When you get to "Edit embed button" page look under "Allowed Entity Embed Display plugins" and choose "Entity browser render". Then go to Structure > Media Bundles choose your Media Bundle. Go to the "Manage display" tab. Choose the Fields you want. In your case it is probably "Video URL". Hide the rest. Now when it renders your video it will render the video as you expect.

For Documents: If you are not dealing with video, lets say its a document Media Bundle, you will end up linking directly to the Media Entity page instead of the actual file. The way around this is not obvious but is simple.

When you go to manage you media button go to /admin/config/content/embed/button/manage/NAMEOFYOURBUTTON You are left with many choices. Under "Allowed Entity Embed Display plugins" choose "Token" I am not joking. Token actually renders out a link to the file, not just some string like you would expect.

The site visitor sees this, and it links to the document instead of the Media Entity page: Document Name document_name.pdf(1010.6 KB)

It renders this in the CKEditor:

<drupal-entity data-embed-button="media_document_button" data-entity-embed- display="view_mode:media.token" data-entity-type="media" data-entity- uuid="99e0581c-2403-4a2d-8a62-9f21ff89a6ff"></drupal-entity>

Depending on your theme it will generate what you wanted:

<a href="link_directly_to_document"><span class="foo">document_name.pdf</span> <span class="bar">(1010.6 KB) </span></a>

Answer 2

Ok, after doing some digging it appears that my issue is a known item. The way to render the media entity is to create a view and use the Display as: View option. Here is what I did to accomplish that:

• Created a new view - Structure > Views > Add new view
• View settings: Show: Media of type: YouTube (this will be whatever media bundle you create)
• Checked Create a block

For the view block, I did the following:

• Removed the Media: Name field
• Added Media: Rendered entity field - at this point my rendered media was - showing in the Preview

I needed to limit the media to just a singular media entity. To do that I:

• Clicked Advanced
• Clicked Add beside Contextual Filter
• Selected Media: Media ID
• In the area labeled "When the filter value IS available or a default is provided" I checked "Specify validation criteria" and selected "Basic validation"

At this point the Preview still showed all of my media entities. But when I added the entity to the WYSIWYG, it only renders the single one because of the contextual filter. So now I went back to the basic page and clicked on the YouTube video embed button. In the popup I selected the following:

• Display as: View
• View: I went to the view I created and selected the block I created
• View Arguments: check Field value and Entity ID - both these fields are IMPORTANT! If you don't click Field value nothing will show up. And if you don't click Entity ID then the view doesn't get the ID for the contextual filter
• I then clicked the Embed button and it was added.

It should be noted that you must NOT set the media entity/bundle's display to use a view. I kept the display of the video embed field as Colorbox. It should be noted that you can use Twig templates to reformat the display. They will not render correctly in the WYSIWYG, but they will when they are rendered in your theme. You can also go back to the Embed button you created (Configuration > Content Authoring > Text Editor Embed Buttons) and remove all options except for the View under "Allowed Entity Embed Display plugins".

It is a little bit clunky that you need to select the same view each time that you embed new media into the WYSIWYG. It would be nice if you could set the view when configuring the Embed Button.

I hope this helps anyone who is running into similar issues. I was able to use this technique to embed image media entities as well - in other words, it is not limited to video embed field.