media handling in drupal (drupalcamp leuven 2013)
DESCRIPTION
Drupal provides various ways to enrich your dull textual content by adding pictures, video's and other media. All of the available solutions come with their advantages and disadvantages or pitfalls to take into account. This presentation will give you an overview of the media landscape in Drupal and walk through the options that are available to you. Topics include: * Media handling in Drupal core * Module comparison: Media, Scald, Asset * WYSIWYG integration * oEmbedTRANSCRIPT
![Page 1: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/1.jpg)
Media handling in Drupal
Sven Decabooter
![Page 2: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/2.jpg)
http://puresign.be@PureSign
Media handling in Drupal
Sven Decabooter
Media handling in Drupal
![Page 3: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/3.jpg)
Media handling in Drupal
About me• Sven Decabooter
• https://drupal.org/user/35369
• @sdecabooter
• Manager & Drupal developer @ Pure Sign
• President DUG BE vzw
• Organiser of (almost) monthly Drupal meetings
3
![Page 4: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/4.jpg)
Media handling in Drupal
Overview1. Media in Drupal core
2. Media module
3. Scald module
4. Asset module
5. oEmbed
4
![Page 5: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/5.jpg)
Media handling in Drupal
1. Media in Drupal core
![Page 6: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/6.jpg)
Media handling in Drupal
Media in Drupal core • Drupal core modules:
• Field + Field UI
• File
• Image
•
6
![Page 7: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/7.jpg)
Media handling in Drupal
Media in Drupal core • Basic file upload widget
7
![Page 8: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/8.jpg)
Media handling in Drupal
Media in Drupal core • Image styles
• Create image variants
• Scale, crop, add effects, ...
• a.k.a. Imagecache module in Drupal 6
•
8
![Page 9: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/9.jpg)
Media handling in Drupal
2. Media module
![Page 10: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/10.jpg)
Media handling in Drupal
Media module
• Manage and reuse media assets
• From local and 3rd party sources
• Depends on file_entity module
• Files become fieldable entities
• D7 usage: +/- 120.000 installs
10
![Page 11: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/11.jpg)
Media handling in Drupal
Media module • 2 different branches: 1.x & 2.x
• 1.x - more stable, but no new developments
• 2.x - still under heavy development - more features
• Advantages of 2.x branch:
• file_entity module abstracted out on its own
• Library is Views-based and more flexible
• Support HTML attributes, such as alt & title text (accessibility)
11
![Page 12: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/12.jpg)
Media handling in Drupal
Media module
• Media module
• core API
• Media browser
• Media file selector File field widget
• Media Internet Sources module
• API for accessing media on 3rd party services
• Media field module
• deprecated in favor of core File field
12
![Page 13: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/13.jpg)
Media handling in Drupal
Media module • File entity module defines different kind of
file types
13
![Page 14: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/14.jpg)
Media handling in Drupal
Media module
Demo: working with Media browser
14
![Page 15: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/15.jpg)
Media handling in Drupal
Media module
http://youtu.be/59qsOJ731Yc 15
![Page 16: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/16.jpg)
Media handling in Drupal
Media module
Demo: adding 3rd party media
(with media_youtube module)
16
![Page 17: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/17.jpg)
Media handling in Drupal
Media module
17http://youtu.be/cSR0FCcIKsA
![Page 18: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/18.jpg)
Media handling in Drupal
Media module • Advantages of Media:
• Widespread adoption and lots of plugins / providers
• Files are entities: good integration with Views, can contain additional metadata through Field API, etc...
• Allows to reuse media
• Disadvantages
• Tricky to set up exactly right, with file type & display settings
• Still no stable 2.x release
18
![Page 19: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/19.jpg)
Media handling in Drupal
Media module • Additional modules:
• Integration modules for 3rd party services (YouTube, Flickr, Vimeo, Dailymotion, ...)
• https://drupal.org/project/file_lock
• Avoids deletion of ‘unused’ files
• https://drupal.org/project/remote_stream_wrapper
• Use external files without saving them locally
19
![Page 20: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/20.jpg)
Media handling in Drupal
Media module
• Additional modules:
• https://drupal.org/project/media_translation
• Specify a language for files and bundle them in translation sets
• And lots more integration modules
• See https://groups.drupal.org/node/168009
20
![Page 21: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/21.jpg)
Media handling in Drupal
3. Scald module
![Page 22: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/22.jpg)
Media handling in Drupal
Scald module • Started on Drupal 6
• Rewritten for Drupal 7 using its new APIs (Entities)
• Used by some big (French) media companies
• Manages a broad set of media types
• images, video, audio, files, tweets, facebook statuses, ...
• D7 usage: +/- 700 installs
22
![Page 23: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/23.jpg)
Media handling in Drupal
Scald module
• Custom entity: Scald atom
• defines a single digital asset
• Scald Galaxy: installation profile for easy testing/setup of Scald + related modules
• Scald core
• Multimedia Editorial Element
• DnD library
• Atom Reference
• ...
23
![Page 24: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/24.jpg)
Media handling in Drupal
Scald module • Atom Reference field type
• much like an Entity Reference
• added drag & drop functionality
• Views integration
• Scald library is a View and can be changed
• Integrates with Plupload module for uploading multiple files at once
• Retrieve tags automatically
24
![Page 25: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/25.jpg)
Media handling in Drupal
Scald module
Demo: Scald - Wysiwyg drag & drop + Atom Reference
25
![Page 26: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/26.jpg)
Media handling in Drupal
Scald module
26http://youtu.be/B8CyLFrvCTI
![Page 27: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/27.jpg)
Media handling in Drupal
Scald module
Demo: Youtube & Twitter providers
27
![Page 28: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/28.jpg)
Media handling in Drupal
Scald module
28http://youtu.be/cuNVCoLp5ic
![Page 29: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/29.jpg)
Media handling in Drupal
Scald module • Advantages
• Easily add & search media from within current page
• Drag & drop interface
• Lots of common providers supported + extensible
• Disadvantages
• Sidebar widget: no typical Drupal UI pattern
• Custom entity type - might be limiting when interacting with File related contrib modules
29
![Page 30: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/30.jpg)
Media handling in Drupal
4. Asset module
![Page 31: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/31.jpg)
Media handling in Drupal
Asset module • Started in Drupal 5
• Rewritten by Adyax for Drupal 7
• Provides a Media asset entity type
• Tightly integrated with CKEditor module
• Comes with CKEditor buttons
• Depends on emvideo module for 3rd party video integrations
• D7 usage: +/- 360 installs
31
![Page 32: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/32.jpg)
Media handling in Drupal
Asset module • Asset Widget module for sidebar widget
• comparable to Scald module
• Provides following media types:
• images (upload)
• video (3rd party)
• documents (upload)
• audio (upload)
• gallery
• free HTML
32
![Page 33: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/33.jpg)
Media handling in Drupal
Asset module
Demo: Asset module
33
![Page 34: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/34.jpg)
Media handling in Drupal
Asset module
34http://youtu.be/0Ba0xiyKIQA
![Page 35: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/35.jpg)
Media handling in Drupal
Asset module • Advantages
• Simple interface
• Drag & drop functionality
• Disadvantages
• Sidebar widget: no typical Drupal UI pattern
• Limited interaction with 3rd party services (no Flickr, Soundcloud, ...)
• Installation instructions need some more work
35
![Page 36: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/36.jpg)
Media handling in Drupal
5. oEmbed
![Page 37: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/37.jpg)
Media handling in Drupal
oEmbedWhat is oEmbed?
oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.
http://oembed.com
37
![Page 38: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/38.jpg)
Media handling in Drupal
oEmbedWhat is oEmbed?
oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.
http://oembed.com
38
![Page 39: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/39.jpg)
Media handling in Drupal
oEmbedhttp://www.youtube.com/watch?v=PCLx4fRHmCk
39
![Page 40: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/40.jpg)
Media handling in Drupal
oEmbed • It takes a URL, and renders the content in an embeddable way
• Supported by major online services
• YouTube
• Flickr
• Vimeo
• Slideshare
• Embed.ly (provides embedding services for 250+ online services)
40
![Page 41: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/41.jpg)
Media handling in Drupal
oEmbed • Integration in Drupal:
• http://drupal.org/project/oembed
• Contains modules:
• oEmbed Core
• oEmbed Field - Link field formatter
• oEmbed Filter - Input filter: converts links in body
• oEmbed Embed.ly - Definitions for embed.ly providers
• oEmbed Provider - Turn your Drupal into oEmbed provider
• Media: oEmbed - Integration with Media module
41
![Page 42: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/42.jpg)
Media handling in Drupal
oEmbed
Demo: configuring oEmbed module
42
![Page 43: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/43.jpg)
Media handling in Drupal
oEmbed
43http://youtu.be/kA-lMGmwQKs
![Page 44: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/44.jpg)
Media handling in Drupal
oEmbed • Advantages:
• Quick way to embed media onto your Drupal site
• No huge suite of modules needed
• Provides hooks to extend functionality
• Allows your Drupal site to quickly provide embeddable content to other parties
• Disadvantages:
• No reusable entities - not suited for a media library
• Not all providers support oEmbed
44
![Page 45: Media handling in Drupal (Drupalcamp Leuven 2013)](https://reader033.vdocuments.us/reader033/viewer/2022052523/556672cbd8b42ad5798b4921/html5/thumbnails/45.jpg)
Media handling in Drupal
Questions?Contact
Sven [email protected] - @sdecabooter
Pure Signhttp://[email protected]@PureSign
45