Jump to content
Rikki
 Share


4.0 - Embeddable content

IP.Board 3.x supports "My Media", which enables you to share other content from within the community by using the "My Media" button on the editor. This results in:

http://community.invisionpower.com/files/file/4464-ips-gdk-for-ipboard-32-amp-33/



While this works, it has a few shortcomings:
  • The styling of the block isn't really designed for each type of content it might show
  • Users have to click the My Media button, then browse for the item, when they probably already know the URL they want to link to
  • Not all content types are supported; e.g. you can't use My Media to link to a topic.
  • For developers, implementing support for My Media in other applications was a process involving extension files and multiple methods


We wanted to make sharing existing content much easier in IPS4, both for users and developers. "Embeddable content" is our solution.

How to use it

To embed content from elsewhere in the community, here's a step by step guide:
  • Paste a link to it


That's it! When you paste a link to almost any kind of content, whether it's a forum topic, calendar event, gallery album or more, IPS4 will automatically embed a small preview of the content, designed specifically for that content. In order to not disrupt an existing paragraph of text however, the embedded block won't be used if the link is surrounded by text. Embedded content only shows if the link is pasted on its own line, giving users more control over their post.

Here's what a post looks like with a few embedded types shown:



Embedded content can be used anywhere as you'd expect, including posts and comments, but also status updates, IP.Content articles, and so on.

For developers

Supporting embedded content in your apps is very easy; your content model simply has to implement IPSContentEmbeddable:

class _Topic extends IPSContentItem implements ... IPSContentEmbeddable


Your controller then simply looks for an embed request and returns HTML - that's it. Our default blocks also have their own template and CSS file, so theme designers can change the styling on a per-theme basis.

Conclusion

Our hope is that this easier method of embedding content encourages more cross-posting and highlighting of good content in IPS4. The process is almost wholly automatic, meaning users don't have to think in order to share great content with others.

As always, screenshots are from pre-release software and are subject to change before release.

 Share

Comments

Recommended Comments



This is great. I love when services like Twitter, Facebook, and others detect the type of content and display it accordingly (most of the time). It's like a glance view. It shows the important information so I know what I'm clicking through to, before I click it. Great job! These little details will really make a big difference.

Link to comment
Share on other sites

This is personally something I've really wanted to see. I even thought about trying to create a hook that would automatically parse links into media tags, but like many things I never got around to it. >_<

 

The styling and everything looks wonderful here too.

Link to comment
Share on other sites

THIS.

Just this single change would make me deliriously happy with IPS 4.0 even if the rest was totally meh, which it's decidedly NOT.

Seriously, an emphatic thank you and well done to everyone involved, sounds like an ideal solution!

:: snoopy dance ::

James and Susan

Link to comment
Share on other sites

would love to see a distinct embed media button in rte that allowed iframe or embed src paste from external sites w/o having to enable html and deal with that.

you cannot built a media tag for every site out there.

Link to comment
Share on other sites

Just one question on the embedding, and about the only thing I feel is missing from one of them. I see that the "1 users going" on the calender embedded item, but are we not going to have the functionality within that item to actually say whether we are going to that event or not? Simply as I feel the calender entries would become more useful. Users are lazy afterall LOL

Link to comment
Share on other sites

Just one question on the embedding, and about the only thing I feel is missing from one of them. I see that the "1 users going" on the calender embedded item, but are we not going to have the functionality within that item to actually say whether we are going to that event or not? Simply as I feel the calender entries would become more useful. Users are lazy afterall LOL

 

As in a button to say "I'm going"? There's no reason it wouldn't work; primarily, it's a space issue. I will look into it :)

Link to comment
Share on other sites

The external sites supported are:

  • YouTube
  • Flickr
  • Hulu
  • Vimeo
  • College Humour

Which are oEmbed providers.

 

 

If you're a developer and wanted to write a plugin to support additional services, it's really easy - there's a single method you'd just need to overload with a hook:

  /**
   * Convert URL to embed HTML
   *
   * @param   string      $url  The URL
   * @return  string|null HTML embded code, or NULL if URL is not embeddable
   */
  public static function embeddableMedia( $url )
  {
      // ...
  }
Link to comment
Share on other sites

 

As in a button to say "I'm going"? There's no reason it wouldn't work; primarily, it's a space issue. I will look into it :smile:

 

Cheers Rikki. Even if it was just a link, it would make the calender so much more useful as I think people would actually.... well ... use it lol

Link to comment
Share on other sites




Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...