Code For The People: How Media Explorer Was Made

With the new Media Explorer plugin, you can now search for tweets and videos on Twitter and YouTube directly from the Add Media screen in WordPress. Media Explorer is a joint project by WordPress.com VIP and Code For The People (a VIP Featured Partner). In this post, CFTP’s John Blackbourn shares the technical and user experience decisions that were made while developing the plugin. 

Embedding a YouTube video or a tweet into a WordPress post is powerfully easy.

There’s no HTML, no shortcode, no dialog box or Settings page – just the magic of oEmbed, baked right into WordPress core. But it’s so simple, and so unassuming, that many people just don’t know it’s there; and it’s not something they’d ever go looking for. With Media Explorer, we wanted to expose that magic within the user interface.

The end goal was to make retrieving externally-hosted content as easy as retrieving items from your own site’s Media Library, without even having to open another browser tab.

The initial plan concentrated purely on integration with Twitter with an architecture that would easily allow developers to add support for other web services like Flickr, YouTube, and Scribd.

Once the base of the plugin was completed with the Twitter search functionality, it was exciting to see YouTube support added in double-quick time, with no changes to the core plugin. It’s what WordPress development should be all about.

media-explorer-twitter-map

Going with the flow

To a developer, there’s a world of difference between accessing local and external media assets. But to the average WordPress user editing a post, it’s the exact same action. They want to find a ‘thing’ – be it an image, a video, a tweet – and display it within the flow of their post.

We felt it was essential for the Media Explorer UI to mimic the WordPress media manager as far as possible. And with the new admin interface redesign (codenamed MP6) coming together as we were writing the plugin, we knew we had to be ready to reflect its changes.

So we consciously re-used existing UI concepts, classes and components wherever possible. It gave us the best possible assurance of compatibility with the ‘old’ and ‘new’ admin stylings, and, we hoped, an interface which immediately felt familiar. Each service (e.g. “Insert Tweet”) sits in the left hand menu, with the relevant search options lined up as tabs across the top (e.g.”‘With Hashtag,” “By User,” etc).

As we began playing with sketch prototypes, we could see that the biggest UI problem was going to be how to deal with huge numbers of results, particularly where tweets were concerned. So for maximum efficiency, we implemented the ability for multiple selection and infinite scroll.

Of course, if you’re comfortable with JavaScript and want to tailor the user interface to suit a particular service, Media Explorer allows you to do just that; you just need to add standard WordPress wp_enqueue_script calls in the load method of your class.

A good example of this is the Google map on the “By Location” tab for Twitter. We added the map by simply enqueueing the necessary JavaScript files and utilising the Google Maps API. For enhanced performance, we only execute the JavaScript necessary for the map when the corresponding tab is selected.

No backbone required

WordPress’s recently revised media manager is built on the Backbone.js JavaScript library. It’s a technology which many WordPress developers won’t be familiar with. But the abstraction provided by Media Explorer’s handler-based architecture means they don’t need to be.

Everything you’ll need to do to add support for a new web service to Media Explorer is done using PHP in a WordPress plugin. Media Explorer does all the grunt work. It provides the JavaScript needed to display each service in the media manager; handles the AJAX requests and responses; provides the layout of the results on screen; and deals with user selection and inserting the items into the editor.

All you need to do is create a ‘handler’ to process an array of user-entered search parameters, and return a valid response after performing a request to its corresponding web service’s API.

The MEXP_Service base class provides the structure for your service to extend and build on. For example, your implementation of the tabs method should return an associative array of the tabs for the top of the media manager. Methods in the MEXP_Service base class are defined as abstract (must be implemented by your child class), public (may be implemented by your child class), or final (not to be implemented by your child class).

media-explorer-youtube

If you need it, there’s plenty more documentation on extending the Media Explorer to include other services. And, you can find the Media Explorer on Github here.

3 thoughts on “Code For The People: How Media Explorer Was Made

    • @Knut – it will be coming to Jetpack, our plugin which brings .com features to self-hosted sites, hopefully in the near future. Jetpack is available in the .org plugin repository now.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s