Many times you want to insert media into your blog posts, pages, or HTML widgets on the fly. There are style issues when this happens because any custom code you may want to insert around video or media items can't be done by a marketer or administrator most of the time. Secondly, any other features like adding captions or wrappers for popups does not come out of the box.

So how would you do this then? One way I found out was to override Admin template for the Image and OEmbed types. This gives you the ability to add wrapper code around media objects, change rendering of media types, and add extra JavaScript if needed. Here are two examples, one on how to add a caption to all images and another to make Vimeo media objects responsive by nature. Take a look.

Add a Caption to Images

1. Copy the Razor view file from \Modules\Orchard.MediaLibrary\Views\Parts called "Image.cshtml" and paste it into a new folder you create called "Parts" in \Themes\TheAdmin\Views. You will notice it has some pretty basic code for rendering images.

2. We want to add some options for support of media captions :

@using Orchard.ContentManagement

@using Orchard.MediaLibrary.Models

@{

   ImagePart imagePart = Model.ContentPart;

   var mediaPart = ((ContentItem)Model.ContentItem).As<MediaPart>();

}          

@if (!String.IsNullOrEmpty(mediaPart.Caption)) {

   <div class="captioned-image-container pull-left">

       <img class="captioned-image-image" width="@imagePart.Width" height="@imagePart.Height" alt="@mediaPart.AlternateText" src="@Url.Content(mediaPart.MediaUrl)" />

       <span class="captioned-image-text">@mediaPart.Caption</span>

   </div>

}

else {

   <img class="" width="@imagePart.Width" height="@imagePart.Height" alt="@mediaPart.AlternateText" src="@Url.Content(mediaPart.MediaUrl)" />

}

3. I added code to verify if the media part has a Caption property set and if so, it wraps some extra markup around the image and adds a span with the caption text below it. This lets us add a background color to the image and also render the text on top of it.

4. It is important to note that this will only be used when rendering the image markup after using a Rich Text Editor like TinyMCE in the Admin. This is because we added it to the Admin theme only. This way when a user browser to the media library and chooses an image, it will embed that markup into the editor after selection.

Add some responsive code around Vimeo embeds and disable thumbnail

1. 1. Copy the Razor view file from \Modules\Orchard.MediaLibrary\Views\Parts called "OEmbed.cshtml" and paste it into a new folder you create called "Parts" in \Themes\TheAdmin\Views. You will notice it has some pretty basic code for rendering external media items like Vimeo.

2. We want to  to add a responsive container around the Vimeo embed and also disable the default thumbnail that comes with it :

@using Orchard.ContentManagement

@using Orchard.MediaLibrary.Models

@{

   OEmbedPart oembedPart = Model.ContentPart;

   var mediaPart = ((ContentItem)Model.ContentItem).As<MediaPart>();

   string thumbnail = oembedPart["thumbnail_url"] ?? oembedPart["thumbnail"];

}

@switch (oembedPart["type"]) {

   case "photo" :

       <img src="@oembedPart["url"]" width="@oembedPart["width"]" height="@oembedPart["height"]" />

       break;

   case "video":

       <div class="embed-container">

           @Html.Raw(oembedPart["html"])

       </div>

       break;

   case "link":

       <a href="@oembedPart["url"]">@Html.ItemDisplayText(mediaPart)</a>

       break;

   case "rich":

       @Html.Raw(oembedPart["html"])

       break;

}

@if (false) {

   <div class="media-thumbnail">

       <img src="@thumbnail" />

   </div>

}

3. You will notice now there is a div with an "embed-container" class wrapped around the video embed. This poens up the opportunity to hide it by default and drop it in a popup and also resize the container dynamically as the page size shrinks.

4. It is important to note that this will only be used when rendering the image markup after using a Rich Text Editor like TinyMCE in the Admin. This is because we added it to the Admin theme only. This way when a user browser to the media library and chooses an external media item, it will embed that markup into the editor after selection.

‍

About the Author:

Arra Derderian serves as the President and as a Lead Technical Architect for Cloud Construct. As a founder at Cloud Construct, Arra is involved in all levels of the business from new project engagements, project planning, and development.

He also serves as the founder of the Boston Orchard CMS User Group and is a member of the Windows Azure Insiders group.

Arra graduated from Northeastern University School with a Bachelor of Science degree in Computer Science.