请注意,本站并不支持低于IE8的浏览器,为了获得最佳效果,请下载最新的浏览器,推荐下载 Chrome浏览器
欢迎光临。交流群:166852192

Orchard CMS:自定义管理媒体插入模板


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.
很多时候,您想要将媒体即时插入博客文章,网页或HTML小部件。 发生这种情况时会出现样式问题,因为您可能希望在视频或媒体项目上插入的任何自定义代码都不能由营销人员或管理员在大多数时间完成。 其次,任何其他功能,如添加字幕或包装的弹出窗口不会出来的框。


那么你怎么做呢? 我发现一种方法是覆盖Image和OEmbed类型的管理模板。 这使您能够在媒体对象周围添加包装代码,更改媒体类型的呈现,并在需要时添加额外的JavaScript。 这里有两个例子,一个如何添加一个标题到所有图像,另一个使Vimeo媒体对象响应性质。 看一看。

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 :
向图像添加标题
1.从\ Modules \ Orchard.MediaLibrary \ Views \ Parts中名为“Image.cshtml”的部分复制Razor视图文件,并将其粘贴到您在\ Themes \ TheAdmin \ Views中创建的名为“Parts”的新文件夹中。 你会注意到它有一些很基本的代码来渲染图像。


2.我们要添加一些选项来支持媒体字幕:
@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. 
3.我添加了代码来验证媒体部分是否设置了Caption属性,如果是的话,它会在图像周围添加一些额外的标记,并在其下方添加一个标题文本。 这使我们可以为图像添加背景颜色,并将文本渲染到图像上。

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.
4、重要的是要注意,这只会在使用像TinyMCE之类的富文本编辑器之后在管理中渲染图像标记时使用。 这是因为我们只将它添加到管理主题。 这样,当用户浏览器到媒体库并选择图像时,它将在选择后将该标记嵌入编辑器。



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 : 
在Vimeo嵌入时添加一些响应代码并禁用缩略图
1.从名为“OEmbed.cshtml”的\ Modules \ Orchard.MediaLibrary \ Views \ Parts复制Razor视图文件,并将其粘贴到您在\ Themes \ TheAdmin \ Views中创建的名为“Parts”的新文件夹中。 你会发现它有一些非常基本的代码,用于渲染外部媒体项目像Vimeo。


2.我们要在Vimeo嵌入周围添加一个响应式容器,并禁用它附带的默认缩略图:
@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.
3、你会注意到,现在有一个div,在视频嵌入包装一个“embed-container”类。 这将默认隐藏它的机会,并将其放在一个弹出窗口,还会随着页面大小的缩小动态调整容器大小。


4、重要的是要注意,这只会在使用像TinyMCE之类的富文本编辑器之后在管理中渲染图像标记时使用。 这是因为我们只将它添加到管理主题。 这样,当用户浏览器到媒体库并选择外部媒体项目时,它将在选择后将该标记嵌入编辑器。
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.
原文: https://www.cloudconstruct.com/blog/orchard-cms-custom-admin-media-insertion-templates 

作者原创内容不容易,如果觉得内容不错,请点击右侧“打赏”,赏俩给作者花花,也算是对作者付出的肯定,也可以鼓励作者原创更多更好内容。
更多详情欢迎到QQ群 166852192 交流。