drupal 7 media modules
DESCRIPTION
Drupal 7 Media modules: Media, Media Gallery, etc. by Grigory Naumovets (A presentation at DrupalCafé, Kiev, Feb. 23, 2012)TRANSCRIPT
![Page 1: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/1.jpg)
Drupal 7 Media Modules
(Media, Media Gallery, etc.)
Grigory NAUMOVETS
Kiev, Ukraine
![Page 2: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/2.jpg)
2
Outline• [why] Do we need more modules to manage
media?
• Media module:
– features, advantages, problems
– 1.x and 2.x branches
• Media Gallery module:
– features, advantages, problems
• Other media-related modules: MediaElement, Media Browser Plus, MediaFront
• Conclusions
![Page 3: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/3.jpg)
3
Site content
• Text content
– Nodes
– Comments
– Blocks
– Views
– etc.
• Media (file) content
– Managed files (have their own File ID in the system)
– Unmanaged files (are not known to the system – just linked from somewhere)
![Page 4: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/4.jpg)
4
Managed files in Drupal 7
• Drupal 7 has database tables ‘file_managed’ and ‘file_usage’ keeping track of managed files: file ID, name, URI, size, type, user and module responsible for this file, etc.
• But there is no user interface to manage these ‘managed files’!
![Page 5: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/5.jpg)
5
[Text] Content administration/admin/content – [node] content administrationAlso, we can administer comments, blocks, views, etc…
but how can we administer MEDIA???
![Page 6: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/6.jpg)
6
Filefield <- media file
• Regular File upload widget:How can we use one file in many nodes?We can only duplicate it – WTF???
We want to:– Re-use one file in many fields
– Organize media (tags, directories, etc.)
![Page 7: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/7.jpg)
7
List of file uploading and managing modules
groups.drupal.org/node/20291
• Database File manager, FileDepot, File Framework, Filemanager, File maintenance, WebFM, Upload paths, Filefield paths, etc. etc. etc.
• Many of these are obsolete/abandoned/rarely used
• No full-featured solution yet
![Page 8: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/8.jpg)
8
Media module• Available only for Drupal 7• Reported installs: >39,000 (Feb. 2012)• Branches:
– 7.x-1.x – recommended (features freezed, bugfixes only)– 7.x-2.x – unstable (with new improvements)
• Requirements:– Javascript must be enabled– CTools– Media 7.x-2.x relies on Views and File entity (fieldable
files); 7.x-1.x has File entity included inside
• Media module development was sponsored by: Acquia, Advomatic, and Palantir.net
![Page 9: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/9.jpg)
9
Installing Media module…Now we have:
New field type: Multimedia asset
New widget: Media File Selector
Media Library
![Page 10: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/10.jpg)
10
We also have…
Content types »…» Manage display
New display formatter: Media
![Page 11: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/11.jpg)
11
File display format should be defined for the appropriate file type (“bundle”) – Image, Audio, Video, Other
/admin/config/media/file-types
![Page 12: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/12.jpg)
12
Configuring file display for each file typeadmin/config/media/file-types/manage/video/file-display
File view modes – ‘Default’, ‘Link’, ‘Preview’, ‘Small’, ‘Large’, ‘Original’, etc.;you need to save settings separately for each mode
Display precedence order is important – e.g. when you need to display videos from YouTube, ‘YouTube Video’ display should go before ‘MediaElement Video’ etc.
![Page 13: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/13.jpg)
13
Media Library: now media content can be managed like node content
/admin/content – Node content administration
/admin/content/media – Media content administration
new tab for Media administration
![Page 14: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/14.jpg)
14
Media administration/admin/content/media We can choose
LIST view or THUMBNAIL view
![Page 15: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/15.jpg)
15
Media items in the list have their own URLs
and can be viewed/edited like nodes
/media/45/editedit Media item
/media/45view Media item
![Page 16: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/16.jpg)
16
Viewing Media items like nodes
/media/[fid]Media item URL
[fid]is File ID from
‘file_managed’ table
![Page 17: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/17.jpg)
17
So, Media module does not create a ‘Media Library’ table in the database
• It uses the tables that Drupal 7 already has: ‘file_managed’ and ‘file_usage’
• But it adds new fields to define new properties of media files: ‘Title’ and ‘Description’
field_data_media_title, field_data_media_descriptionfield_revision_media_title, field_revision_media_description
![Page 18: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/18.jpg)
18
Editing Media items
‘Title’ and ‘Description’ of items in Media Library
are DIFFERENT from ‘Title’ and ‘Alternate text’ properties of images in Image field and ‘Description’ property of files in File field
They are NOT shown when displaying images or file attachments in the usual way
Modules displaying media should be able to handle media titles and descriptions (e.g. Media Gallery)
![Page 19: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/19.jpg)
19
Under the hood: Media title and description
• These are different values kept in different database tables than ‘File description’ and ‘Image title’ properties available for File/Image fields
![Page 20: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/20.jpg)
20
Adding files to Media Library via UploadWith Plupload plugin, we can upload multiple files by drag-n-dropping them here
![Page 21: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/21.jpg)
21
Adding media from web
• hhh
via media_vimeo.module
via media_youtube.module
• With some additional modules, we can add to the Media Library media from YouTube, Vimeo, and other supported providers
![Page 22: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/22.jpg)
22
Adding media from Remote URL
• Remote stream wrapper module: now we can add remote media to the Media Library without copying the files to our server
via remote_stream_wrapper.module
![Page 23: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/23.jpg)
23
Importing files to Media Library from another directory
• In this way, we can import files bigger than maximum size allowed for PHP upload
(upload files by FTP to some directory, then import to Media Library)
![Page 24: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/24.jpg)
24
Using media from Media Libraryin File/Image fields
• Now we have a new widget type:Media file selector
![Page 25: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/25.jpg)
25
Media file selector widget• Selecting media from Library
![Page 26: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/26.jpg)
26
With regular Image widget, we have “Alternate text” and “Title” that we can display near/over the image
However, some things are missing…
![Page 27: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/27.jpg)
27
What we see with the regular Image widget
Image Title displayed in a lightbox view
![Page 28: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/28.jpg)
28
With Media File selector widget
• We can edit ‘Title’ and ‘Description’ of this item in Media Library, but we cannot display them in the same way as we display “Alternate text” and “Title” image properties
• It’s really a disappointment • Same problem with ‘File description’ for File fields
“Alternate text” and “Title” image properties are no longer available. WTF???
![Page 29: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/29.jpg)
29
Referencing media from Libraryinline in textarea fields
• TinyMCE, CKEditor: enable ‘Media browser’ plugin or add ‘Media’ button
File display modes
(Configuration » Media » File types » Manage file display)
![Page 30: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/30.jpg)
30
Media input filter should be enabledto convert media tags into markup
Media tags look like that:[[{"type":"media","view_mode":"media_preview","fid":"44","attributes":{"alt":"","class":"media-image","height":"180","typeof":"foaf:Image","width":"180"}}]]
![Page 31: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/31.jpg)
31
Removing media from a node
• Removing a media file from a node does not delete it from the Media Library
![Page 32: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/32.jpg)
32
Removing files from Media Library…/admin/content/media
• You cannot delete a media file which is in use somewhereuntil you remove it from all the nodes
• Sometimes it’s kind of frustrating…
![Page 33: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/33.jpg)
33
Media Gallery module
• Depends on Media module
• Understands ‘Title’ and ‘Description’ attributes of media files
• Can display images and videos in the same gallery
• Developed by the engineering team at Acquia
![Page 34: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/34.jpg)
34
Viewing all galleries
![Page 35: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/35.jpg)
35
We can have images and videos in the same gallery
Media Title displayed on hover
These are videos
![Page 36: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/36.jpg)
36
Images and videos can be displayed inline or in a pop-up colorbox
• Media Gallery can display both Title and Description of media items
• Media Gallery calls Colorbox library independently of Colorbox module
• Integration with Colorbox module (to use its features and settings) requires some patching
![Page 37: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/37.jpg)
37
Edit or Remove
It’s easy to add, reorder, and edit media in the gallery
Reorder items by dragging the handle to a new position
Add media with Media File selector
![Page 38: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/38.jpg)
38
Editing gallery settings
It’s easy to set for each specific gallery the number of rows and columns, media display inline or in a pop-up box, etc.
![Page 39: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/39.jpg)
39
Displaying LOCAL video files(not from YouTube, Vimeo, etc.)
• For this, you may need to install and configure some media player
- e.g. MediaElement player(Drupal module integrating MediaElement.js library)
• May not work in a pop-up box
![Page 40: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/40.jpg)
40
Configuring file display settings for Video
admin/config/media/file-types/manage/video/file-display
![Page 41: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/41.jpg)
41
Media Gallery problems: Theme-dependent
• Theme-dependent problems (e.g. for Adaptivetheme and related themes)
– Broken display of “All Galleries” page(may need some css tweaking)
– Drag handles not displayed: how can you reorder items now?(may need some patching)
![Page 42: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/42.jpg)
42
Media Gallery problems: Colorbox
• Colorbox-related problems:
– Clicking on the colorbox (not on the arrows) does not work as expected: it leads to “View Detail page” instead of showing the next item in the gallery (may need some css patching)
– Media Gallery work with Colorbox directly; integration with Colorbox module (to use all its features and settings) may require some patching
![Page 43: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/43.jpg)
43
Media Gallery problems: Taxonomy
• Strange things with Taxonomy:
– Media Gallery creates ‘Gallery collections’ vocabulary with‘Galleries’ term in it,but they are not visible and not editable inadmin/structure/taxonomy interface
• Conflicts with i18n_taxonomy reported
![Page 44: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/44.jpg)
44
So, Media Gallery still needs some
File tools
![Page 45: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/45.jpg)
45
…more than you could expect from a module creating quite a lot of tables in the database
![Page 46: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/46.jpg)
46
Problems with Media• Organize Media
(with lots of items in Media Library, you need to structurize it somehow via folders, tags, etc. – like you do with your boomarks or email)
• Handling media attributes(Media’s ‘Title’ and ‘Description’ vs Image’s “Title’ and “Alt text’ andFile’s ‘Description’)
![Page 47: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/47.jpg)
47
Media Browser Plus module• Works with Media 7.x-1.x and 7.x-2.x branches• UI and functional improvements (multiple selection,
media search, etc.)• Organizing Media: folders, tags, etc.
![Page 48: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/48.jpg)
48
Media 7.x-2.x branch
• ‘Media’ is now called ‘Files’: /admin/content/file instead of /admin/content/media
![Page 49: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/49.jpg)
49
Media 7.x-2.x branch: core File field instead of Media field
• And it’s not just name change:now we are supposed to work with the core File field instead of ‘Multimedia asset’ fields (which are deprecated)
![Page 50: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/50.jpg)
50
Media 7.x-2.x branch
• One more change: Integration with Views.Now we have ‘View Library’ selection mode
![Page 51: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/51.jpg)
51
Media 7.x-2.x branch
And this ‘MediaBrowser’ view is editable
![Page 52: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/52.jpg)
52
MediaFront module
• Integration of OSM media player
• Plays both local and remote (YouTube, Vimeo, etc.) video
• Integration with Views:can create video galleries displayed as playlists in media player’s window
• Detailed video tutorial:http://youtu.be/k7tbGXjMRWQ
![Page 53: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/53.jpg)
53
MediaFront:a video gallery displayed as a playlist
![Page 54: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/54.jpg)
54
How to re-use files in file fields without Media File selector?
• FileField Sources module/widget
![Page 55: Drupal 7 Media modules](https://reader035.vdocuments.mx/reader035/viewer/2022062319/55584ae6d8b42a993b8b472f/html5/thumbnails/55.jpg)
55
References
• James Gollan’s presentationhttp://youtu.be/8pHoGZBv47c
• Drupalcon Chicago presentationhttp://chicago2011.drupal.org/sessions/mediahttp://www.slideshare.net/JacobSingh/multimedia-handing-in-drupal-7-done-better-with-the-media-module