The Media module has really become the de facto standard in handling media files in Drupal 7. I really like the concept of having files (images, videos, etc) as entities. When a file is an entity, you can attach custom fields and modify how the file is displayed by customizing specific view modes.
When you install the Media module for the first time it can be intimidating because there are a lot of moving parts. But if you already have an understanding of how entities, fields and view modes work in Drupal you will get the hang of it pretty quickly.
In this tutorial, I’ll show you how to modify an image display using Media version 2. We’ll change the display so that the image alt tag is shown below the image. This will be useful if you want to display something like “Fig 1.0 – Homepage” below an image.
If you’re into media management in Drupal you should seriously check out the Scald module. It’s an alternative to using Media module and it looks pretty good.
Getting Started
Before we begin, download the following modules:
- Media (7.x-2.0-unstable7)
- File entity (7.x-2.0-unstable7)
- Ctools
- Views
- Token (required for this tutorial)
If you use Drush, run the following command:
$ drush dl media file_entity ctools views
Once all the modules have been downloaded, just install the Media module and Drupal will handle all the other dependencies.
Configure Image Field
The first step is to change the widget on the Image field that is attached to the Article content type. If you’re following along at home make sure you install Drupal using the standard installation profile. We’ll need to change the widget from Image to “Media file selector”.
Change Field Widget
1. Go to Structure -> “Content types”(admin/structure/types) and click on “manage fields” within the Article row.
2. Click on Edit within the Image row.
3. Click on the “Widget type” tab and change the “Widget type” drop-down to “Media file selector” and click on Continue.
Change Field Formatter
The last step we need to make to the image field is to change the field formatter. We’ll have to change it from Image to “Rendered file”.
1. Go to Structure -> “Content types”(admin/structure/types) and click on “manage display” within the Article row.
2. Select “Rendered file” from the Format drop-down list within the Image field and click on Save.
That’s all we need to change on the Image field, next we’ll configure the Image file entity display.
Modify Image File Entity Display
In the last section we modified the Image field on the Article content type to work with the Media module. Now we’ll change the default Image file entity display.
Change Display
1. Go to Structure -> “File types”(admin/structure/file-types) and click on “manage display” within the Image row.
2. Drag the “Alt Text” field from the hidden section and place it below the File field and click on Save.
It is important that you make this change on the Default view mode.
Change File Display
1. Click on the “Manage file display” tab in the top right corner and check the Image checkbox within the “Enabled displays” list.
2. Select an image style and click on Save configuration.
Make sure you add the tokens for the alt and title field to the “Alt attribute” and “Title attribute” or images will have empty title and alt attributes.
If you installed the Token module, the tokens should have been automatically added.
Test Image Field
Now go ahead and create an article and upload an image with an alt tag. If everything has been setup properly, you should see the alt tag text below the image.
Make sure you add an alt tag when you upload an Image.
Once an image has been uploaded, the article should look like the image below.
As you can see, Media module is pretty powerful once you have a basic understanding of how it works.
If you have any questions, please leave a comment.
Thanks for this! Great to hear that file_entity now comes with alt and title fields.
1.
I personally currently use the latest dev of file_entity & media as I find them more stable than the most recent releases.
2.
The change to unstable 7 of file_entity included a change that was to remove most of the view modes for files that used to ship with the module. To get this functionality back I always use the ntity view modes module (http://drupal.org/project/entity_view_mode) to create extra view modes, so you have more flexibility.
3. (semi-related)
Media currently does not have good support for adding non-image files to WYSIWYG enabled fields.
The current workaround is this sandbox – http://drupal.org/sandbox/DevinCarlson/1823634 – which you can use to allow you to do things like embed a pdf in a wysiwyg field and have it display as a link to the pdf (as an example).
This has also been discussed in this issue (http://drupal.org/node/1792738) and it has been decided that the sandbox will be rolled into the media module itself, which is great.
Thanks for the info.
I couldn’t able to see “Alt attribute” and “Title attribute” under “Display settings”. So I couldn’t able to override the alt & title.
Sorry, you need to give me more information.
Have you installed the Token module, the alt and title attributes will not display if Token is not installed.
Also, are you getting any PHP errors?
I have Token installed, but do not see the alt and title attributes in Image > Manage Display. Should I use the dev version?
Try using Media on a fresh Drupal 7 installation and make sure you enable both Media and Token at the same time.
Firstly – nice article. thanks
Secondly,
I have a similar problem as Rocco and Senthil reported where the token alt&title fields are missing from the display settings. I have all the necessary accompanying modules.
In my situation I think this alludes to a greater problem I am having where after updating to the latest file entity, media modules the conventional image field no longer displays the alt or title tags both on the rendered website and in the edit node view.
See https://drupal.org/node/2065507
I’m still experiencing problems after installing the latest patches. The work around for me was to change all image fields to media file selector and manually add in all the alt and title tags again. Laborious but got me out of a fix.
So my advise is to be cautious updating to these new file entity changes (post 7.x-2.0-unstable7 versions – these worked for me) as in most real world cases you won’t be working with a fresh drupal install.
Make sure you have up to date backups before commencing.
Thanks for the tip.
Hi Ivan Zugec. In my site i can view only recent 15 images in Media Library. Can i change this to “ALL”? so that i want to see all the images which i have uploaded through media module from the first.
In version 2.x, I think that the media library is a view. All you’ll have to do is change the view pager to display all the media files.
I have followed the instructions outlined here, and have enabled the Alt and Title fields under the image file type, but the fields still do not appear in the Add Content form. Any ideas?
Thanks!
I’ve never had this problem.
Try using Media on a fresh Drupal 7 installation and make sure you enable both Media and Token at the same time.