In Part 1 of this series, I showed an easy system for including oEmbed rich content in a WYSIWYG, including reusing that content. In this installment I'll step through how to set it all up in Drupal 7.

How to Set Up Asset and oEmbed modules

First of all, in order to use Asset module you can't use WYSIWYG module - you need to use CKeditor module. CKeditor module is great though - you have more control of your editor configuration than with WYSIWYG module.

Install Asset module from drupal.org: I typically enable only Asset, Asset document, and Asset image, out of the submodules in the Asset package.

Similar to how Media module works, you need to enable the Asset filter on your input format(s). On the CKeditor settings make sure you enable the Media Asset plugin.

Also add oEmbed module and enable its submodules oEmbed Field oEmbed Embedly. Add an API key to the oEmbed Embedly configuration.

Create a new Asset type (Structure: Asset Types: Add Asset Type) called 'Embed' and pick an icon for it. At 'Manage Fields' add a link field, and at 'Manage Display' choose oEmbed for the display formatter of the link (for both Default and Full Size modes). Go back the CKeditor settings and drag your new button into your WYSIWYG configuration.

If you're having trouble getting an embed link to show up, you may need to adjust the pattern matching for the provider in the oEmbed providers settings. Often the provider has started using www or https in their URL and you need to adjust the patterns to match. Watch out for security settings in CKeditor and in your input format: some of the oEmbed content will comes with Javascript that can get filtered out and change the display. If you need to reduce security filtering, be sure you are only allowing trusted users to use this CKeditor profile.
You may also want to do some templating and styling: I overrode the oembed.tpl.php from oEmbed to not show an extra title link to the embed. I also overrode the asset.tpl.php to likewise not show the Asset title.

OK, but what if I want to add this as a field, rather than in a WYSIWYG?

Media module has a nice ability to be used as a widget for a file field, letting you reuse media from your library or add new media. So how can we get a similar feature using our beloved Asset module library?

Because Asset is an entity type, you can create entity reference fields to reuse assets. A great widget for entity reference fields is Inline Entity Form. This lets you add a new or existing asset of any type as a field. We contributed a patch for Asset to add support for Inline Entity Form, which is in the latest Dev release of Asset module.

Using Inline Entity Form, you can add a new or existing asset as a field.

Adding a new Embed Asset within Inline Entity Form.

Do I have to do this for every new site I make?

Of course not. This is the kind of setup you should do in a starter-kit: an install profile that you use for every site. We've added it to our Bear Starter-kit, which you're welcome to fork.

OK, but what if I use Scald or Media module and can't switch to Asset?

If you're not ready to make the Asset module plunge, you can still use oEmbed. If you like Scald, you can do a similar setup using this Embedly Scald module. And if you use Media module you can use the Media oEmbed submodule (included in oEmbed module).

Yahtzee!!!

#embedly_amzn_82220385 {line-height:1.5;} #embedly_amzn_82220385 * {color:#000000;background:#FFFFFF none repeat scroll 0 0; vertical-align:baseline; margin:0; padding:0; border: medium none; font-family:verdana,arial,helvetica,sans-serif;} #embedly_amzn_82220385 TABLE {vertical-align:middle;border-collapse:separate;border-spacing:0;} #embedly_amzn_82220385 TD {vertical-align:top;text-align:left;} #embedly_amzn_82220385 .embedly_amzn_out_bdr {border:1px solid #EEEEEE;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;} #embedly_amzn_82220385 .embedly_amzn_in_bdr {border:1px solid #999999; padding:10px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;} #embedly_amzn_82220385 .embedly_amzn_img {float:left; margin:0 20px 0 0;} #embedly_amzn_82220385 .embedly_amzn_desc {width:100%;} #embedly_amzn_82220385 .embedly_amzn_desc H3{margin:5px 0;font-family:Arial,Helvetica,sans-serif;} #embedly_amzn_82220385 .embedly_amzn_desc H3 A{color:#000000;font-size:18px;font-weight:normal;text-decoration:none;line-height:26px;} #embedly_amzn_82220385 .embedly_amzn_desc .subhead{display:block;margin:0 0 5px;font-size:11px;} #embedly_amzn_82220385 .embedly_amzn_desc HR{border-top:1px dashed #999999;color:#FFFFFF;height:1px;margin:6px 0 3px;} #embedly_amzn_82220385 .embedly_amzn_desc .em_more {margin:0 10px 0 0;font-size:11px;} #embedly_amzn_82220385 .embedly_amzn_desc A.em_more {color:#003399} #embedly_amzn_82220385 .embedly_amzn_desc A.em_more:hover {color:#CC6600} #embedly_amzn_82220385 .embedly_amzn_desc .buying TD.label{width:70px;color:#666666;font-size:11px;text-align:right;vertical-align:middle;white-space:nowrap;margin:0 5px 0;} #embedly_amzn_82220385 .embedly_amzn_desc .buying TD.pricelabel{padding:3px 0 0;} #embedly_amzn_82220385 .embedly_amzn_desc .buying TD.listprice{padding:0 0 0 5px;font-family:arial,verdana,helvetica,sans-serif;text-decoration:line-through;font-size:13px;} #embedly_amzn_82220385 .embedly_amzn_desc .buying TD.price{padding:0 0 0 5px;color:#990000;font-size:20px;font-weight:normal;letter-spacing:-1px;} #embedly_amzn_82220385 .embedly_amzn_desc .buying TD.saved{padding:0 0 0 5px;color:#990000;font-size:13px;} #embedly_amzn_82220385 .embedly_amzn_logo A {background:transparent url(http://c1281762.cdn.cloudfiles.rackspacecloud.com/amazon-sprite.png) no-repeat scroll -160px -15px;display:inline-block;float:right;height:30px;overflow:hidden;width:140px;}

YAHTZEE: Back to the Future Collector's Edition Board Game

Product by USAopoly More about this product

List Price:
$34.99
Price:
$31.90
You Save:
$3.09 (9%)

Stay tuned for Part 3 in which we report on what we've done to make it easy to embed 3rd party content in Drupal 8.

Terms:

• Drupal Planet
• oEmbed
• Drupal

Publishing Workflow

Ready for Publishing