I recently had a client with a Media Manager license ask to have it set up to work with their cloud-based instance of Tridion 2011. Media Manager is a brand-new tool to me and I did entirely too much learning on the fly. As I was learning it, I’d asked an architect over on the client’s side how he’d been using it with the instance of Tridion that they were hosting. His answer was, “we just copy and paste the JavaScript for the distribution into the component.”

Copying and pasting from two applications isn’t the most aggravating thing in the world. But what if I need the direct URL for iframing, and I need that JavaScript for embedding? I don’t want to aggravate my users more than necessary.

So What I’m presenting is a very simple solution with Razor, where we only ask the Tridion user to put one Media Manager distribution URL in Tridion, but we can get both options out of it.  

A Review of a Media Manager Distribution

Before we really get rolling on Media Manager, let’s touch on the two sharing options for a distribution in Media Manager.

The

You have either a direct link, or some JavaScript to drop on a page. And if you’re paying close attention to the URLs that are provided, you’ll notice that they just barely aren’t same…more on that in a second.

The Scenario

With my implementation, I have this Article schema…and it’s used everywhere. In fact, We have about seven different component templates for this one component. Some are legitimate use-cases for the embedded JavaScript, and others for the direct URL:

• Article Detail Page: one video
• Homepage: one video
• Article listing pages: some videos
• Video listing page: all the videos

Our Article Detail page and our Homepage are cases where that JavaScript works fine. It’s just one video that the user gets to see.

On our listing pages, it’s different.  We’re providing a button that opens the video in a modal window. My modal window plugin is fancybox, which has a cool iframe feature; it takes whatever is in the href of a given element and generates an iframe from that.

Finding a way to load iframes whose src is to the direct link sounds like a much better user experience than loading all of those videos at once with the embedding JavaScript.

One Schema Field, or Many?

In truth, my life is easiest if I give that user a field for the direct link, and another field for the JavaScript. But my goal here is to really make things as simple as possible for the Tridion user. After all, the client pays my bills, so making Tridion as easy as possible is a top priority.

Since Direct Link has that cute little copy/paste icon which copies the url into the Tridion user’s clipboard, how about if I work with that? I’ll just create a single field called VideoDirectLink in my article schema.

The Solution

Re-analyzing the distribution URLs

Before I explain the The URLs that are inside of that direct link and JavaScript have five parts:

1. Client-specific subdomain; this is unique to the client
2. Path to SDLMedia
3. Optional embed Path
4. Query String
5. Unique ID of the distribution; this is unique to the distribution

So, what we’re finding is that these URLs have some constants. The only thing that’s different is that the embedded version has an embed path that comes after the path to SDLMedia.

Writing the Razor

The solution is really simple now. We use C#’s Replace method to append embed/, and then we wrap the URL in some plain-jane JavaScript.

@helper makeVideoEmbed(){
    var embedLink = Fields.VideoDirectLink.Replace("distribution/","distribution/embed/");
    
}
@helper renderVideo(){
         

            

            @makeVideoEmbed()

            
            
        
    
}

What About the Extension?

There is a Media Manager connector extension for Tridion 2011 that allows you to view the distributions from within Tridion, and connect those distributions to your component. That’s certainly ideal, but it I ran into some shortcomings with that extension that eliminated it as a solution. I’ll explain that extension and its faults in a separate blog post.

In summary

If the connector isn’t an option, then you’ll need to offer at least one field for a Tridion user to copy and paste something from media manager into Tridion. The path of least resistance is to make that user copy and paste both distribution options into two separate fields. The path of least-aggravation says that you ask for the direct link URL, and turn it into the JavaScript embedding option using a Razor helper function.