9 min read

(For more resources related to this topic, see here.)

While there are many ways to build image integration into Drupal, they may all stem from different requirements and also each option should be carefully reviewed. Browsing around over 300 modules available in the Media category in Drupal’s modules search for Drupal 7 (http://drupal.org/project/modules) may have you confused as to where to begin.

We’ll take a look at the Media module (http://drupal.org/project/media) which was sponsored by companies such as Acquia, Palantir, and Advomatic and was created to provide a solid infrastructure and common APIs for working with media assets and images specifically.

To begin, download the 7.x-2.x version of the Media module (which is currently regarded as unstable but it is fairly different from 7.x-1.x which will be replaced soon enough) and unpack it to the sites/all/modules directory like we did before. The Media module also requires the File entity (http://drupal.org/project/file_entity) module to further extend how files are managed within Drupal by providing a fieldable file entity, display mods, and more. Use the 7.x-2.x unstable version for the File entity module too and download and unpack as always.

To enable these modules navigate to the top administrative bar and click on Modules , scrolling to the bottom of the page we see the Media category with a collection of modules, toggle on all of them (Media field and Media Internet sources), and click on Save configuration .

Adding a media asset field

If you’ve noticed something missing in the rezepi content type fields earlier, you were right—what kind of recipes website would this be without some visual stimulation? Yes, we mean pictures!

To add a new field, navigate to Structure | Content Types | rezepi | manage fields (/admin/structure/types/manage/rezepi/fields). Name the new field Picture and choose Image as the FIELD TYPE and Media file selector for the WIDGET select box and click on Save . As always, we are about to configure the new field settings, but a step before that presents first global settings for this new field, which is okay to leave as they are, so we will continue, and click on Save field settings . In the general field settings most defaults are suitable, except we want to toggle on the Required field setting and make sure the Allowed file extensions for uploaded files setting lists at least some common image types, so set it to PNG, GIF, JPG, JPEG . Click on Save settings to finalize and we’ve updated the rezepi content type, so let’s start using it.

When adding a rezepi, the form for filling up the fields should be similar to the following:

The Picture field we defined to use as an image no longer has a file upload form element but rather a button to Select media . Once clicked on it, we can observe multiple tabbed options:

For now, we are concerned only with the Upload tab and submit our picture for this rezepi entry. After browsing your local folder and uploading the file, upon clicking Save we are presented with the new media asset form:

Our picture has been added to the website’s media library and we can notice that it’s no longer just a file upload somewhere, but rather it’s a media asset with a thumbnail created and even has a way to configure the image HTML input element’s attributes. We’ll proceed with clicking on Save and once more on the add new content form too, to finalize this new rezepi submission.

The media library

To further explore the media asset tabs that we’ve seen before, we will edit the recently created rezepi entry and try to replace the previously uploaded picture with another.

In the node’s edit form, click on the Picture field’s Select media button and browse the Library tab which should resemble the following:

The Library tab is actually just a view (you can easily tell by the down-arrow and gear icons to the right of the screen) that lists all the files in your website. Furthermore, this view is equipped with some filters such as the filename, media type, and even sorting options.

Straight-away, we can notice that our picture for the rezepi that was created earlier shows up there which is because it has been added as a media asset to the library. We can choose to use it again in further content that we create in the website.

Without the media module and it’s media assets management, we had to use the file field which only allowed to upload files to our content but never to re-use content that we, or other users, had created previously. Aside from possibly being annoying, this also meant that we had to duplicate files if we needed the same media file for more than one content type.

The numbered images probably belong to some of the themes that we experimented before and the last two files are the images we’ve uploaded to our memo content type. Because these files were not created when the Media module was installed, they lack some of the metadata entries which the Media module keeps to better organize media assets.

To manage our media library, we can click on Content from the top administrative bar which shows all content that has been created in your Drupal site. It features filtering and ordering of the columns to easily find content to moderate or investigate and even provides some bulk action updates on several content types.

More important, after enabling the Media module we have a new option to choose from in the top right tabs, along with Content and Comments , we now have Files .

The page lists all file uploads, both prior to the Media module as well as afterwards, and clearly states the relevant metadata such as media type, size, and the user who uploaded this file. We can also choose from List view or Thumbnail view using the top right tab options, which offers a nicer view and management of our content.

The media library management page also features option to add media assets right from this page using the Add file and Import files links. While we’ve already seen how adding a single media file works, adding a bunch of files is something new. The Import files option allows you to specify a directory on your web server which contains media files and import them all to your Drupal website.

After clicking on Preview , it will list the full paths to the files that were detected and will ask you to confirm and thus continue with the import process. Once that’s successfully completed, you can return to the files thumbnail view (/admin/content/file/thumbnails) and edit the imported files, possibly setting some title text or removing some entries.

You might be puzzled as to what’s the point of importing media files directory from the server’s web directory, after all, this would require one to have transferred the files there via FTP, SCP, or some other method, but definitely this is somewhat unconventional these days. Your hunch is correct, the import media is a nice to have feature but it’s definitely not a replacement for bulk uploads of files from the web interface which Drupal should support and we will later on learn about adding this capability.

When using the media library to manage these files, you will probably ask yourself first, before deleting or replacing an image, where is it actually being used? For that reason, Drupal’s internal file handling keeps track of which entity makes use of each file and the Media module exposes this information via the web interface for us.

Any information about a media asset is available in its Edit or View tabs, including where is it being used. Let’s navigate through the media library to find the image we created previously for the rezepi entry and then click on Edit in the rightmost OPERATIONS column. In the Edit page, we can click on the USAGE tab at the top right of the page to get this information:

We can tell which entity type is using this file, see the title of the node that it’s being used for with a link to it, and finally the usage count.

Using URL aliases

If you are familiar with Drupal’s internal URL aliases then you know that Drupal employs a convention of /node/<NID>[/ACTION], where NID is replaced by the node ID in the database and ACTION may be one of edit, view, or perhaps delete. To see this for yourself, you can click on one of the content items that we’ve previously created and when viewing it’s full node display observe the URL in your browser’s address bar. When working with media assets, we can employ the same URL alias convention for files too using the alias /file/<FID>[/ACTION]. For example, to see where the first file you’ve uploaded is being used, navigate in your browser to /file/1/usage.

Remote media assets

If we had wanted to replace the picture for this rezepi by specifying a link to an image that we’ve encountered in a website, maybe even our friend’s personal blog, the only way to have done that without the Media module was to download it and upload using the file field’s upload widget.

With the Media module, we can specify the link for an image hosted and provided by a remote resource using the Web tab. I’ve Googled some images and after finding my choice for a picture, I simply copy-and-paste the image link to the URL input text as follows:

After clicking on Submit , the image file will be downloaded to our website’s files directory and the Media module will create the required metadata and present the picture’s settings form before replacing our previous picture:

There are plenty of modules such as Media: Flickr (http://drupal.org/project/media_flickr) which extends on the Media module by providing integration with remote resources for images and even provides support for a Flickr’s photoset or slideshow. Just to list a few other modules:

The only thing left for you is to download them from http://drupal.org/modules and start experimenting!

Summary

In this article, we dived into deep water with creating our very own content type for a food recipe website. In order to provide better user experience when dealing with images in Drupal sites, we learned about the prominent Media module and its extensive support for media resources such as providing a media library and key integration with other modules such as the Media Gallery.

Resources for Article :

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here