Learn about how the media system works in Drupal.
We’ll cover the following:
- We’ll look at how images are added to articles
- Install Media and Media Library module
- Learn about media types
- Learn how create a image media asset
- Learn the difference between the Files and Media page
If you want to upload an image or file into Drupal, all you need to do is create an image or file field on a content type or any fieldable entity. Let’s take the article content type as an example, which has an image field on it. So let’s go and edit the random article. If we scroll down, here you can see that the article content type has an image field. For us to upload an image, all we need to do is find an image and then drag it across over to browse or you can click on browse and select an image and then enter in some alternative text, and I’ll enter in featured image and then scroll down and click on save. Then if we view the article, we can see our uploaded image. If we go to content and then click on files, you can see all of the physical files which have been added to an image or file field. And here, and you can see the article.jpeg file, which is the image that we just uploaded.
Now, one limitation with using just a field on a content type is that you can’t reuse the uploaded image in another article. Let’s say we want to go back to content and then edit this article. We couldn’t easily reuse the image that we have already uploaded. We can re-upload the image again, but that means we have two copies of the same file on the site. But luckily for us, Drupal comes with a suite of modules to create and manage re-usable media assets, and the two modules are media and media library. However, they aren’t installed by default. Now, I should mention that I won’t be covering media management in Drupal from start to finish because that’s a whole course in itself. I’ll just cover the fundamentals, which should be enough to get you started. So to start things off, click on extend and then search for media and then check media and media library.
The media module offers a fieldable entity which will have an image or file field on it. And media library offers a library interface for creating and selecting assets. So once you have checked both modules, click on instal. To create a managed media assets, just go to content and you should see a new tab next to files called media. Once a few media assets have been created, you should see them on this page. To create a media asset, click on add media and you will see that there are five media types that come out of the box. You can, of course, create your own media types, but these are the five that come out of the box.
First we have audio, which should be used if you want to upload an MP3 or WAV file. Then we have document, which should be used for uploading PDFs, Word docs, or Excel files. And then there’s image, which is used for uploading images. And then after image, we have remote video, this media type is used to embed YouTube or Vimeo videos. And finally we have video, this allows you to upload an MP4 file and it renders the video using the video tag. But if you want to embed long videos, I recommend that you upload the videos onto a proper video hosting platform, such as YouTube and Vimeo, and then embed those videos using the remote video media type. Another thing to remember is that hosting videos on your site will take up a lot of your storage. So it’s best to upload the videos onto a proper video hosting platform. The media types that you’d use the most are document, image, and remote video.
Let’s now create an image media asset. So click on image and then here you can see the image field. And what I’ll do is I will select this image and then drag it across. Then I’ll enter in product one image as the alternative text and then click on save. Then here you can see the media asset that we just created. Then if we scroll up and go to files, we should see the product_one.jpeg image, which is the image that we just uploaded. Now, you may be thinking, “What is the difference between this files page and the media page?” Well, files will display all of the physical files which have been uploaded using an image or file field on any type of entity. Whereas, media will simply list out all of your media entities. I personally do not find the files page that useful. And I’d hide it from editors on a Drupal site because it can be a little confusing seeing files and media.
Let’s jump back to the media page and let’s look at a few features on this page. Using these two tabs, table and grid, you can switch the display of these page. So right now it is displaying all the media assets in a table. But if you click on grid, it’ll display them in a grid format. Then below that, we have the add media button, which you can use to create your media assets. Then below add media, we have the exposed filters, which will allow you to filter by the media name, the type, the published status, and also the language. Then below that we have the action dropdown, which allows you to run bulk operations on any selected assets. Make sure you check the checkbox to select which asset you want the bulk operation to run on. Then finally in the table, we can see the media thumbnail, name, the type, the author, the status, and also when the media asset was last updated. And then from the operations column, we can edit or delete the media asset.