media handling in drupal (drupalcamp leuven 2013)

Media handling in Drupal

Sven Decabooter

http://puresign.be@PureSign

Media handling in Drupal

Sven Decabooter

Media handling in Drupal

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

Media handling in Drupal

Overview1. Media in Drupal core

2. Media module

3. Scald module

4. Asset module

5. oEmbed

4

Media handling in Drupal

1. Media in Drupal core

Media handling in Drupal

Media in Drupal core • Drupal core modules:

• Field + Field UI

• File

• Image

•

6

Media handling in Drupal

Media in Drupal core • Basic file upload widget

7

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

Media handling in Drupal

2. Media module

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

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

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

Media handling in Drupal

Media module • File entity module defines different kind of

file types

13

Media handling in Drupal

Media module

Demo: working with Media browser

14

Media handling in Drupal

Media module

http://youtu.be/59qsOJ731Yc 15

Media handling in Drupal

Media module

Demo: adding 3rd party media

(with media_youtube module)

16

Media handling in Drupal

Media module

17http://youtu.be/cSR0FCcIKsA

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

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

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

Media handling in Drupal

3. Scald module

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

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

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

Media handling in Drupal

Scald module

Demo: Scald - Wysiwyg drag & drop + Atom Reference

25

Media handling in Drupal

Scald module

26http://youtu.be/B8CyLFrvCTI

Media handling in Drupal

Scald module

Demo: Youtube & Twitter providers

27

Media handling in Drupal

Scald module

28http://youtu.be/cuNVCoLp5ic

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

Media handling in Drupal

4. Asset module

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

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

Media handling in Drupal

Asset module

Demo: Asset module

33

Media handling in Drupal

Asset module

34http://youtu.be/0Ba0xiyKIQA

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

Media handling in Drupal

5. oEmbed

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

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

Media handling in Drupal

oEmbedhttp://www.youtube.com/watch?v=PCLx4fRHmCk

39

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

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

Media handling in Drupal

oEmbed

Demo: configuring oEmbed module

42

Media handling in Drupal

oEmbed

43http://youtu.be/kA-lMGmwQKs

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

Media handling in Drupal

Questions?Contact

Sven Decabootersven@puresign.be - @sdecabooter

Pure Signhttp://puresign.becontact@puresign.be@PureSign

45