Drupal Wysiwyg Image Upload Use Entity Reference
🔥Update Feb 2020
This tutorial has been updated for Drupal 8.viii over at "Managing Media Avails using Core Media in Drupal eight".
There's a lot of momentum to prepare media management in Drupal viii thanks to the Media Entity module. By using a combination of Media Entity, Entity Embed, Entity Browser and some media providers such as Media entity image y'all could add decent media handling in Drupal 8.
Then in Drupal viii.4, the Media Entity functionality was moved into a core module called Media. However, the core module was hidden past default. Now in Drupal viii.v it'southward no longer subconscious and yous tin install information technology yourself.
In this tutorial, y'all'll learn how to install and configure the Media module in Drupal eight core. This tutorial is an updated version of the How to Manage Media Assets in Drupal eight tutorial where we cover Media Entity.
Configuring Entity Embed and Entity Browser for the core Media module is substantially the same as with Media Entity. So if you accept experience using Media Entity, then you'll be fine using the core Media module.
Sections:
- Storing Media Avails
- Displaying Media Assets
- Embedding Avails into the Editor
- How to Browse Media Avails
What'south the Difference Between Media Entity and Media
The biggest difference between the ii modules is that the API has changed. Whatever media provider module for Media Entity such every bit Media entity Instagram or Media entity Twitter need to be updated to use the new API. A lot of these modules now have a 8.ten-2.0 version which but works with core Media. So if you lot're going to use a media provider module read the project page.
If yous desire to see a technical explanation of the changes get to the "Moved a refined version of the contributed Media entity module to cadre as Media module" change tape on drupal.org.
Getting Started
Before we begin, go ahead and install the Media module. It comes with Drupal core but information technology's off past default.
Role ane: Storing Media Assets
The Media module implements a fieldable entity type called Media. This ways yous can add custom fields to them like content types and adjust their wait-and-feel through the "Manage display" page. If yous know how to manage content types then you'll be right at home managing media types.
Let's kickoff await at how media assets are stored in Drupal 8. Saving assets into a Drupal site is similar to creating content.
ane. Click on Content in the toolbar.
2. Click on the Media tab, then click "Add media".
iii. Cull which type of media you desire to upload, in this example I'll choose Image.
4. Enter in a name for the asset in the Name field and select an image using the Image, then click on Save.
5. In one case you salve the form, you'll be redirected to the public media page.
View all Media Assets
Y'all can view all upload assets from the Media page nosotros were just on, go to the Content folio and click on the Media tab.
You lot can search avails by their proper name using the "Media proper name" field or filter by media type using the Type driblet-down.
Creating and managing media avails are pretty straightforward but the magic happens in the Media types, let's expect at them side by side.
Media Types
Media types are just like content types or taxonomy vocabularies. They are fieldable configuration entities.
Go to Structure then click on "Media types" to create and manage them.
Drupal viii ships with four media types; Audio, File, Epitome and Video.
The File and Prototype media types are fairly cocky-explanatory utilize them to upload images or full general files such every bit PDFs.
Audio and Video media types should be used when you desire to locally host the video or sound file. The asset will be played using the HTML tags, <audio> and <video>. You can't use the this media type to embed videos from YouTube or Vimeo. To do that you'll demand the "Video embed field" and a new media blazon which nosotros comprehend later in this tutorial.
Media Source
Every media type needs to use a "Media source", this tells Drupal how the file should be handled, i.east., how the file should exist stored or if a thumbnail should be generated.
The Media module in Drupal 8.5 comes with four media sources; sound, video, file and paradigm.
So if y'all want to store and brandish tweets for example, then all you'll demand to exercise is create a media blazon called "Tweet" (or whatsoever you want) and install the eight.x-2.0 version "Media entity twitter" module. The viii.ten-1.x version merely works with Media Entity, whereas, the 8.x-2.x works with the core Media module.
Create Embed Video Media Type
Now let's get and create a new media blazon for embedding YouTube videos. But offset, download the 8.ten-2.0 (make certain information technology's ii.0) version of "Video Embed Field". The module ships a sub-module called "Video Embed Media" which has a media source for treatment embedded videos.
composer crave drupal/video_embed_field
Once downloaded go and install "Video Embed Media" from the Extend page.
ane. Become to Structure, "Media types" and click on "Add together media types".
two. Add "Embed video" into Proper noun and "Used for embedding videos" into Description.
3. Select "Video embed field" from the Media source driblet-downward box.
4. From the field mapping section, you can store specific metadata most the video into a custom field.
For example, if you want to store the YouTube ID, which'll be the "Video ID". All you demand to do is create a custom field and select it from the driblet-down to map information technology.
v. One time everything is complete click on Save at the bottom of the page.
Edit Media Type
When you edit the Embed video media type, y'all should run into iii familiar tabs: Manage fields, Manage form brandish and Manage brandish.
A media type is just a fieldable configuration entity same as content types or vocabularies so managing fields are the same.
If you click on Manage fields you see a single field called "Video Url". This is where the URL to the embedded video volition be stored. We didn't create the field, instead "Video Embed Media" programmatically fastened it for u.s. when we created the media type.
Create an Embed Video
Now that nosotros've created our media blazon, let's create the actual asset.
1. Go to Content and click on the Media tab.
2. Click on "Add media" then "Embed video".
3. Enter a name into the Name field and enter in a URL to a YouTube video, then click Save.
It's of import to note that Video Embed Field supports more than just YouTube. Out-of-the-box it supports YouTube and Vimeo but it has support for other video providers via contrib modules. Check out the "Video Providers" section on the project page for more details.
4. Once you've saved the form, you'll be redirected to the media display page.
But as you can see in the screenshot higher up, the page looks messy. It's displaying all the fields; engagement, author, thumbnail and at the lesser the actual embedded player.
Modify Media Display
Let'south clean up the display of the embedded video so only the embedded role player shows.
i. Become to Structure, "Media types".
two. Click on "Manage display" from the Operations driblet-down on the "Embed video" row.
iii. Move all the fields to the Disabled section except for "Video Url".
4. Now if yous go to the media display folio you should simply see the embedded player.
Office 2: Displaying Media Assets
You learnt how media assets are stored in role i and how to create your own media types. Now we'll wait at how to brandish the avails on a content type using a field.
I mentioned earlier that an asset is only an entity. And then if you want to attach it to a basic page or article, all y'all need to do is create an entity reference field. Of course there'due south a flake more than to it, then let's look at it now.
Create Media Field
The Media module comes with a field called Media. It simply lets you reference assets using an entity reference field. Let'southward create one on the Article content type.
ane. Go to "Content types", "Manage fields" on the Article row.
2. Click on "Add together field.
three. Select Media from the "Add together a new field" drop-down and enter Asset into the Label field.
4. On the "Field settings" page, leave it as is and click on "Save field settings".
5. Downward in the "Reference type" field-set up, yous need to select which media type you let. In this case, I'll choose Image, then click on "Salve settings".
Now it's fourth dimension to test it out.
Get to Content, click on "Add content", and so Commodity and you should see the Asset field with an autocomplete field.
So simply search for an asset using the "Employ existing media" autocomplete field.
If yous need to create a new asset, you'll need to click on the "media add together page" link or just become to Content, Media and create it from there.
But in that location is a trouble with this method. You can't create an asset directly from the article page. You demand to go to the add together media page, a totally seperate screen, upload the paradigm so come back and search for information technology in the autocomplete field.
This workflow is not ideal. Now I'll show you lot how to use Inline Entity Grade module so you lot can create the assets without leaving the page.
Use Inline Entity Form to Upload Media Assets
Get download and install the Inline Entity Form module.
composer require drupal/inline_entity_form
1. In one case installed, become to the "Manage course display" on the Commodity row.
ii. And then select "Inline entity form – Circuitous" from the Widget drop-downwardly on the Asset field.
three. Click on the cog wheel and make sure you cheque both "Allow users to add new media entities." and "Allow users to add existing media entities.".
3. Then click on Save.
Now if you become back to the create Article form, you'll notice that the Asset field looks different.
Simply click on "Add together new media" if y'all want to create a new asset. When yous click on the button, the create media form appears right hither then you lot can create a new asset and attach it to a content type without leaving the form.
The "Add existing media" button allows you lot to select existing avails via an autocomplete field.
As you can see Inline Entity Form actually does create a better user experience for editors. From the aforementioned page you tin can create/edit/delete and attach assets to a content type without leaving the page.
Office iii: Embedding Assets into the Editor
So far we've looked at how to fastened assets to fields, but now let's look at embedding them in the editor.
To build this functionality we'll need two modules: Entity Embed and Embed.
Entity Embed allows you to create a button which is added to the editor. When yous need to embed an asset, just click on the button, select the nugget and embed. The module isn't tied to the Media entity, it can be used to embed any entity type.
Using Composer, download the following modules so enable Entity Embed.
composer require drupal/embed composer require drupal/entity_embed
Create Embed Button
one. Go to Configuration and click on "Text editor embed buttons".
two. Click on "Add together embed button", enter Avails into Label and select Entity from "Embed type" and Media from "Entity blazon".
3. Farther down the folio you can specify which bundles (Media types) should be allowed. If none are selected then all are allowed.
You can likewise upload an icon for the button. I'll exist using the media embed icon which comes with the Drupal 8 version of the Media module. Yous can catch a copy of it from hither.
Once you've configured the form click on Save.
Manage Buttons
Yous can have as many buttons as you lot want and they tin can all be managed from the Listing page. If you need to modify a push button then but click on the Edit button in the operations column.
Add Button to Editor
Now that we've created the push button allow's add together it to the editor. It won't automatically announced in the editor unless we add it ourselves.
one. Become to Configuration and click "Text formats and editors".
2. Click on Configure on the "Basic HTML" text format.
3. Detect the push in the "Available buttons" department and move it into Media in the "Active toolbar" section.
Configure Filters
At present comes the tricky part, nosotros've added the button but now nosotros need to configure the filters in a specific order.
Few important steps need to happen here:
- Add the correct tags to the "Immune HTML tags" text area.
- Enable "Display embedded entities" filter
- Reorder filters in specific guild.
Configure "Allowed HTML tags" list
In one case the push button was added you should see the following tags in "Immune HTML tags".
<drupal-entity data-entity-type information-entity-uuid information-entity-embed-brandish data-entity-embed-brandish-settings data-align data-explanation data-embed-push>
Enable "Display embedded entities" Filter
Adjacent, enable the "Display embedded entities" filter from Enabled filters bank check list.
Confirm Lodge of "Marshal images" and "Explanation images"
The Entity Embed README.txt mentions if you're using the "Marshal images" and "Caption images" filters, to order "Align images" before "Caption images".
Problem with "Restrict images to this site" Filter
The "Restrict images to this site" filter stops an image being displayed if you embed it and select an image fashion.
The filter stops a user from pointing to an image which is not hosted on the site. For example, if your Drupal site is hosted at my-drupal.com, then information technology won't permit y'all to add an image such as <img src="http://random-site.com/paradigm.jpg" />, all your images need to be <img src="http://my-drupal.com/image.jpg" />.
In that location is an open issue on drupal.org almost it.
The workaround for now, unfortunately, is to remove the filter.
Once everything has been configured, brand sure you click on "Salvage configuration" at the bottom of the page.
The filters list should look like this:
How to Embed Assets into the Editor
At present that the "Bones HTML" text format has been configured, we should be able to embed avails.
1. Go to Content, "Add content" and click on Article.
2. Click on the embed push button and a popular-up should appear with an autocomplete field.
Search for the asset using its "Media name" and click on Next.
3. If it'southward an image, select Thumbnail from "Display every bit", select an image style, marshal and add together a explanation.
And so click on Embed.
4. Once embedded you lot should see the epitome on the correct with the caption.
Salvage the page and you're good to become.
Embedding YouTube Videos
In the department above information technology was easy to embed an image. You simply upload it, select a thumbnail size and you're done.
Adding a video using the "Embed video" media type we created before is just as easy.
1. Click on the embed button within the editor, and search for a video in the Name autocomplete field.
ii. Then select "Full content" from the "Display every bit" drop-downward and click on Embed.
three. In one case embedded you lot should run into the YouTube player in the editor.
If yous do not meet an embedded role player and just the video thumbnail then you'll need to configure the formatter on the Media blazon.
Go to Structure, "Media types" and click on "Manage display" on the Embed video row.
Make certain the "Video Url" field is using the Video formatter.
Role 4: How to Browse Media Assets
We had to use an autocomplete field to discover and embed an asset into the editor in the last section. This blazon of user experience is not great. You tin't upload an image after clicking on the embed icon, without going to a dissimilar page, and you can't easily search assets, you lot take to know the proper noun of information technology.
In section, y'all'll learn how to use Entity Browser which lets yous create a screen where yous can search, select and upload new avails.
Using Composer, download the following modules then enable Entity Browser and Chaos tools.
composer require drupal/ctools composer crave drupal/entity_browser:~two.0
Brand certain you download theviii.x-ii.0 version of Entity Browser.
How to Create an Entity Browser
Configuring Entity Browser requires 2 steps:
- First y'all'll need to create a view using a display called "Entity browser". This view volition exist used to listing out all assets.
- And so yous'll demand to configure an entity browser and select the created view.
Create Entity Browser View
1. Go to Construction, Views and click on "Add together view".
ii. Make full out the "Add view" form, using the values divers in Table 1-0 and click on "Save and edit".
Table i-0. Create a new view
| Selection | Value |
|---|---|
| View proper noun | Media browser |
| Machine name | Media_browser |
| Testify | Media blazon of All sorted by Newest first |
| Create a folio | Unchecked |
| Create a block | Unchecked |
iii. Next to the Master tab click on "Add" and select on "Entity browser.
It's important that you select the "Entity browser" display or you won't be able to select this view when we're configuring the actual browser.
Allow's alter the view to a tabular array so information technology looks better.
4. Click on "Unformatted listing" next to Format.
five. Select Table and click on Utilize.
At this point nosotros've switched the view from an unformatted listing to a table.
Now we need to add two more fields: Thumbnail and "Entity browser bulk select form".
half dozen. Click on Add together next to Fields, add the Thumbnail field.
This will display a thumbnail of the media asset.
7. And so add the "Entity browser bulk select class".
This field is used to select the asset when browsing. It is a required field.
eight. Reorder the fields so they're as follows:
ix. Once complete the preview should await like the image below:
10. Don't forget to click on Save.
Create Entity Browser
Now that nosotros've created the view, let's configure the browser.
1. Go to Configuration, "Entity browsers" and click on "Add entity browser".
2. Enter "Assets browser" into Label, select iFrame from "Display plugin" and Tabs from "Widget selector plugin".
Get out "Selection display plugin" as "No option display".
And so click on Next
Do not select Model from Display plugin if you're using the browser with Entity Embed information technology isn't compatible (Consequence #2819871).
3. On the Display page, configure a width and acme if you lot similar but do check "Automobile open entity browser. This volition save an extra click when embedding.
And then click on Next.
four. Just click Next on "Widget selector" and "Choice display".
five. On the Widgets page, select "Upload images as media items" from the "Add widget plugin". Change the Label to "Upload images".
half dozen. And so select View from "Add widget plugin".
vii. From the "View : View display" drop-downwardly, select the view which we created earlier.
If yous tin't see your view, brand sure you select "Entity browser" when configuring it:
8. Once configured the Widgets page should look similar:
Configure Entity Embed to use Browser
Entity Embed now needs to be linked to the browser we simply created.
1. Go to Configuration, "Text editor embed buttons" and edit the embed button.
ii. You should see a drop-down called "Entity browser", select the browser you just created and click on Save.
Using the Entity Browser
Go into an article or page and click on the Entity Embed button.
You should now run into a pop-up with two tabs: "Upload images and view.
From the "Upload images" tab, you can upload a new paradigm and it'll create an Image media entity.
If yous click on view, you lot'll see all the media assets.
To embed an asset, simply cull which one you want and click on "Select entities".
Summary
With every new Drupal 8 release you can come across that the media functionality is getting meliorate. In Drupal viii.five , there's nonetheless a lot of transmission configuring required but the foundation of how assets are stored exists. If you desire to keep track of how everything is progressing then wait at "Media in Drupal viii Initiative" and "Media initiative: Essentials – commencement round of improvements in core".
Source: https://www.webwash.net/manage-media-using-entity-browser-and-entity-embed-in-drupal/
0 Response to "Drupal Wysiwyg Image Upload Use Entity Reference"
Post a Comment