Custom Formatters for Easy Drupal Embeds
Many websites want to allow users to submit videos, audio files, documents and the like.
However, if those files are stored on other sites, it can be difficult to display that content consistently. For example, if you allow people to submit YouTube videos, there are multiple different types of embed code.
One of our members wanted to allow users to submit Google docs that would automatically be shown inside iframes.
The solution to all these problems is the “Custom Formatters” module. Here’s how to use Custom Formatters:
The Set-up
We have a content type called Documents. There’s a Text field called: Google Doc ID:
We also have a Google doc. The ID of the Google doc is in the URL:
Creating a Custom Formatter
- Install the Custom Formatters module: https://drupal.org/project/custom_formatters
- Go to Structure > Formatters.
- Click Add.
- Gee the formatter a name and description.
- Under Format, Choose HTML + Tokens. The other option is PHP.
- Choose the Field type you want to use. In this example, choose Text.
- I took the default Google Docs embed code and pasted it into the Formatter area. Here’s how to find that embed code.
- Click Tokens.
- Choose the field that you created earlier:
- Replace the specific Google ID in your formatter with the token:
- Click Save.
Applying a Custom Formatter
Let’s apply the custom formatter to our field:
- Go to Structure > Content types > Manage Display.
- Apply your new format to the Google Docs ID field:
- Click Save.
Using the Custom Formatter
- Go to add a new Document to your site.
- Enter the Google Doc ID as shown:
- When you publish the content, the Google Doc ID will be automatically be converted into an iframe embed:
This technique should work for many other sites such as YouTube, Vimeo or Flickr. You can control the embed and just ask users to enter the unique ID.
Nice module and tip! Bookmarked.
Awesome tutorials
FWIW, there’s a module for that already – Embedded Google Docs Viewer – [url=https://drupal.org/project/gdoc_field]https://drupal.org/project/…[/url]