Learn how to use the media field to attach assets to content types.
We’ll cover the following:
- How to attach the media field
- Configure field widgets and formatters
- How to use the media library widget
Transcript
Trainer (00:00):
In the previous video, we looked at how media is managed in Drupal. We installed the media and media library module and we created a media asset, which was an image. And you can see that image on this page right here. Now let’s add a field to the product content type called featured image, which will allow us to upload an image directly or select an existing media asset and reuse it. If you haven’t already, make sure you’ve installed the media and media library module. Go to structure, content types, and then click on the manage fields on the product row. Then, click on add field. From the add a new field dropdown, scroll down to the reference section and select media. If you can’t see the media field, make sure you’ve installed the media module. This media field isn’t anything special. It’s just an entity reference field and that’s it, because media assets are just entities. In label, enter in “Featured image,” and then click on save and continue.
Trainer (01:09):
Make sure media is selected as the type of item to reference and leave the allowed number of values to one, because we only want to allow a single featured image. And then, click on save field settings. And then, scroll down to the reference type field set. And then within media type, select image. And then, scroll down and click on save settings. Then let’s go to manage form display, and then scroll down. And we need to make sure that the featured image field is enabled and that the widget is media library. If you can’t see media library in the widget dropdown, then make sure you’ve installed the media library module.
Trainer (01:50):
Once everything has been configured, scroll down and click on save. And then click on manage display, and then full content. Because remember, we enabled the full content view mode. And then, scroll down and move featured image all the way to the top. And then, change the label to hidden. And the formatter should be thumbnail. And then, click on the cogwheel and change image style to medium 220 by 220. Now, you will only see this image style if you installed Drupal using the standard installation profile. And image styles are used to resize images on the fly. And if you want to create your own image style, you can do so by clicking on the configure image styles link. So let me go ahead and update this formatter configuration, and then I’ll scroll down and click on save.
Trainer (02:47):
Now, let’s test out this field. So go to content, and I’ll edit the Learn PHP product. And then if we scroll down, we should see our featured image field. And to add a featured image, click on add media. From this library pop-up, you can upload an image or you can select an existing asset. You can also filter the list of existing assets by name, and then also change the sort. And then over to the right, you can switch the view from grid to table. So, let’s go ahead and select this product one as our featured image. And all we need to do is check the check box, and then click on insert selected. And then, here we can see a preview of the selected image. And then, we scroll down and click on save. And then if we go to our Learn PHP product, we can see the featured image right below the title. And best of all, we can go to other products and reuse the same featured image.