Media handling in Drupal (Drupalcamp Leuven 2013)

Media handling in Drupal

Sven Decabooter

http://puresign.be@PureSign


Sven Decabooter


http://puresign.be

http://puresign.be

http://puresign.be

http://puresign.be


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


Overview1. Media in Drupal core

2. Media module

3. Scald module

4. Asset module

5. oEmbed

4


1. Media in Drupal core


Media in Drupal core • Drupal core modules:

• Field + Field UI

• File

• Image

•

6


Media in Drupal core • Basic file upload widget

7


Media in Drupal core • Image styles

• Create image variants

• Scale, crop, add effects, ...

• a.k.a. Imagecache module in Drupal 6

•

8


2. Media module


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 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 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 module • File entity module defines different kind of

file types

13


Media module

Demo: working with Media browser

14


Media module

http://youtu.be/59qsOJ731Yc 15

http://youtu.be/59qsOJ731Yc



Media module

Demo: adding 3rd party media

(with media_youtube module)

16


Media module

17http://youtu.be/cSR0FCcIKsA




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 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

https://drupal.org/project/file_lock

https://drupal.org/project/file_lock

https://drupal.org/project/remote_stream_wrapper

https://drupal.org/project/remote_stream_wrapper


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

https://drupal.org/project/media_translation

https://drupal.org/project/media_translation

https://groups.drupal.org/node/168009

https://groups.drupal.org/node/168009


3. Scald module


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


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


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


Scald module

Demo: Scald - Wysiwyg drag & drop + Atom Reference

25


Scald module

26http://youtu.be/B8CyLFrvCTI

http://youtu.be/B8CyLFrvCTI

http://youtu.be/B8CyLFrvCTI


Scald module

Demo: Youtube & Twitter providers

27


Scald module

28http://youtu.be/cuNVCoLp5ic

http://youtu.be/cuNVCoLp5ic

http://youtu.be/cuNVCoLp5ic


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


4. Asset module


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


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


Asset module

Demo: Asset module

33


Asset module

34http://youtu.be/0Ba0xiyKIQA

http://youtu.be/0Ba0xiyKIQA

http://youtu.be/0Ba0xiyKIQA


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


5. oEmbed


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


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


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

39

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

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


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


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

http://drupal.org/project/oembed

http://drupal.org/project/oembed


oEmbed

Demo: configuring oEmbed module

42


oEmbed

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

http://youtu.be/kA-lMGmwQKs

http://youtu.be/kA-lMGmwQKs


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


Questions?Contact

Sven [email protected] - @sdecabooter

Pure Signhttp://[email protected]@PureSign

45

mailto:[email protected]

mailto:[email protected]

http://puresign.be

http://puresign.be

Media handling in Drupal (Drupalcamp Leuven 2013)

Technology

Transcript of Media handling in Drupal (Drupalcamp Leuven 2013)