Customize Media Module Image Display in Drupal 7
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.
Before we begin, download the following modules:
- Media (7.x-2.0-unstable7)
- File entity (7.x-2.0-unstable7)
- 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.
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.
Like what you see?
Join our free email list and receive the following:
- Discover our best tutorials in a 6 part series
- Be notified when free content is published
- Receive our monthly newsletter