Purchase our premium subscription and get access to HD videos and our support forum.

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.

Getting Started

Before we begin, download the following modules:

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.

Fig 1.0

3. Click on the "Widget type" tab and change the "Widget type" drop-down to "Media file selector" and click on Continue.

Fig 1.1

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.

Fig 1.2

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.

Fig 1.3

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.

Fig 1.4

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.

Fig 1.5

Once an image has been uploaded, the article should look like the image below.

Fig 1.6

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.

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 6 years and has successfully completed several large Drupal projects in Australia.

Connect: Twitter drupal.org LinkedIn App.net

Comments

Submitted by Anja on

Thanks for this! Great to hear that file_entity now comes with alt and title fields.

Submitted by rooby on

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.

Submitted by bneil on

As an alternative to #3, I've found that many times I want to merely link to a file in the WYSIWYG instead of embedding it via the media library (for example, a pdf or doc). If you use the CKEditor Link module, Devin Carlson also created the CKEditor Link File module (http://drupal.org/project/ckeditor_link_file) which lets you link to the file entity url or download via the WYSIWYG link button.

Submitted by Senthil on

I couldn't able to see "Alt attribute" and "Title attribute" under "Display settings". So I couldn't able to override the alt & title.

ivan's picture

Submitted by ivan on

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?

Submitted by Rocco on

I have Token installed, but do not see the alt and title attributes in Image > Manage Display. Should I use the dev version?

ivan's picture

Submitted by ivan on

Try using Media on a fresh Drupal 7 installation and make sure you enable both Media and Token at the same time.

Submitted by OS on

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.

Submitted by Vasanth on

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.

ivan's picture

Submitted by ivan on

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.

Submitted by Jeff on

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!

ivan's picture

Submitted by ivan on

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.

Add new comment