Learn how to embed media assets directly into the editor.
We’ll cover the following:
- How to upload an image is the default image button
- How to configure the media embed button
- How to embed a media asset into the editor
Transcript
Trainer (00:00):
In the previous video, you learned how to attach a media asset to a product using a field. And if we edit this product, you can see the featured image field right here. And from this field, you can upload an image and select an existing asset. But now I want to show you how to embed assets directly into the text editor, so you can add an image between some text and even float the image left, or right. Now the editor already has an image button, so if you are using the basic HTML text format, you should see this image button right here. And if we click on it, it allows us to upload an image by clicking on browse, or simply dragging an image into the image field. And we can add in an alternative text, we can align the image left, right or centre, and we can also enable captions. So let’s upload an image and see how it works.
Trainer (01:02):
So what I’ll do is I will grab one of my product images and I’ll drag them over to the image field and I’ll enter in product two as the alternative text. I will centre it and also enable captions. And here’s the image uploaded into the editor. What we can do is if we scroll down, we can resize it. So let’s do that, so it’s easier to handle. And then if you click on enter caption here, we can enter in a caption. So I will just type in product two and then if we scroll down and click on save, and then if we scroll down, we should see our product to image centred and also with a caption. So for uploading images, this works pretty well, but there is one limitation to be aware of. Let’s go ahead and edit this product again and scroll down to body. The biggest limitation is that you can’t select images from a library like you can using the featured image field. You can, however, reuse these images by simply copying and pasting them. So let me go ahead and select it and I will copy it.
Trainer (02:13):
And then if I add the cursor to the final paragraph and then paste, we can see our second image right here. It’s still the same image, but it’s another copy of the image. And you can change the caption as well, if you like. And then if we click on save, we should see both images. And you can even copy and paste these images into other content pages. So let’s go to content and I’ll open that up in a new tab. And then if we go to random article and then simply paste it, you can see here, we have the same image now added to this random article. We can copy and paste these images into any field which is using a text editor. So you can reuse images, but there’s no easy way to manage a library of media assets. And this only works with images and that’s it. There’s no document upload button in the editor.
Trainer (03:15):
Now I want to show you how to integrate media and media library into the text editor, so we can embed assets using the same library pop-up, like we have on the featured image field. So let me go ahead and close this tab and then let’s start things off by going to configuration and then click on text formats. And let’s configure the functionality on the basic HTML text format. In the toolbar configuration section, you should see this media library button. If you can’t see it, make sure you’ve installed the media library module. And to enable this button, all we need to do is simply click on it and then drag it somewhere onto the active toolbar. Now, because this button helps you with media, I will add it to the media group right next to the image button. Once you’ve added the button to the active tool bar, scroll down to the enabled filters section and check embed media. And then if we scroll down even further, you should see the filter settings for the embed media filter.
Trainer (04:24):
And the only configuration we’ll do here is we’ll check image from media types selectable in the media library. But if you want to allow editors to upload and embed documents, well then, simply check documents as well. But for now, I’ll just check image. And if you are using the limit allowed HTML tags filter, make sure the Drupal media tag is added as an allowed HTML tag. It should have been automatically added, but just make sure it is there. So once everything has been configured, click on save configuration. Let’s now test out the functionality. So let’s go to content and I’ll edit this product and if we scroll down to the body field and then add the cursor right here and then you can see our new media library button. And if we click on it, we can see the same media library pop-up as we have on the featured image field.
Trainer (05:23):
So from here, we can select an existing asset or we can upload a new one. What I’ll do is I will upload a new image and I’ll add an alternative text of product three. And because we just uploaded this image, it is automatically checked and all we need to do is click on insert selected, and you can see our image right here. And if you want, you can edit the media asset. We can align it to the right and we can even turn on captions. So let me just enter in a simple caption here and then scroll down and click on save. And then if we go to our product, we can see our image right here and it’s floated to the right.