MVC Display Templates
A display template describes how a (in this case) Episerver property should be rendered on a web page.
From ImageVault.EPiServer.UI version 4.9.7, we include display templates for both MediaReference and MediaReferenceList<MediaReference>.
Usage
To use the display template, just use the @Html.PropertyFor as usual
@using EPiServer.Web.Mvc.Html
@model MyBlockType
<div>
@Html.PropertyFor(m => m.MyMedia)
</div>
<div>
@Html.PropertyFor(m => m.MyMediaList)
</div>
Setting attributes
Since ImageVault.EPiServer.UI version 5.0.21 we also support setting some attributes (class, alt, title) on the resulting html tag for the media item.
Attributes for video text tracks
In the case a video player is rendered, you can control the initial text track of the video by supplying either ActiveTextTrackLanguage = "xx" to set a specific text language or ShowSubtitles = true to show a text track matching the Epi content language.
For example, setting ActiveTextTrackLanguage = "en" will show a subtitle in English (if available). Setting ShowSubtitles = true for an Epi site with content language Swedish will show Swedish subtitles (if available).
The user can still switch to any another language or disable the text using the video player settings.
MediaReference
To set the attributes on a MediaReference item, just pass them along as additional view data.
@using EPiServer.Web.Mvc.Html
@model MyBlockType
<div>
@Html.PropertyFor(m => m.MyMedia, new { @class = "img_single", alt = "My alt", title = "My title", ShowSubtitles = true })
</div>
MediaReferenceList<MediaReference>
Since the media reference list contains a list of items, we need to create a list of attributes to set for each individual item. This list is passed along as additional view data using the AttributeList property.
@using EPiServer.Web.Mvc.Html
@model MyBlockType
<div>
@{
var list = new List<Dictionary<string, string>>();
if (Model.MyMediaList != null) {
for (var i = 0; i < Model.MyMediaList.Count; i++) {
var media = Model.MyMediaList[i];
var d = new Dictionary<string, string>();
list.Add(d);
d.Add("class", "img_item_" + i);
d.Add("alt", "Id:" + media.Id);
d.Add("title", "My title");
}
}
}
@Html.PropertyFor(m => m.MyMediaList, new { AttributeList = list })
</div>
Customizing own MVC templates
If you would like to customize the appearance of an ImageVault property, you can start by checking out the examples below or check the ones supplied with the ImageVault.EPiServer.UI package (located at modules/_protected/ImageVault.EPiServer.UI/views/Shared/DisplayTemplates after installing the nuget package in your Episerver site).
PropertyMedia
The PropertyMedia type uses a model of type MediaReference. To create a display template for this model, create a display template in the folder /Views/Shared/DisplayTemplates/ and name it MediaReference.cshtml
@model MediaReference
@using EPiServer.Editor
@using ImageVault.Client
@using ImageVault.Common.Data
@using ImageVault.EPiServer
@{
var client = ImageVaultClient.GetPageClient();
var item = client.Load<WebMedia>(Model, ViewContext).FirstOrDefault();
}
@if (item != null) {
@Html.Raw(item.Html)
} else if (PageEditing.PageIsInEditMode) {
<div class="ivEmptyActions" style="padding-top: 150px; background-color: #fff; text-align: center; width: 100%; display: inline-block; background-position: 50% 30px; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIMAAABtCAIAAAANsUXDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgyOUJBNUUxNkExRjExRTI5MUU3RjRCNkIyNDI5NEI5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgyOUJBNUUyNkExRjExRTI5MUU3RjRCNkIyNDI5NEI5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODI5QkE1REY2QTFGMTFFMjkxRTdGNEI2QjI0Mjk0QjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODI5QkE1RTA2QTFGMTFFMjkxRTdGNEI2QjI0Mjk0QjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6VPNUCAAAGRklEQVR42uyd6XbaMBCF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);">
<p style="font-weight: bold;">Drag your ImageVault media here.</p>
</div>
}
The template will load the selected image and if any property settings is set for the property, use them as well. If no item was found and the page is in edit mode, a placeholder image will be placed there. The result will be cached if the Client cache is not disabled.
Note
Since version 5.3, the ImageVaultClient.GetPageClient method will return the correct client (internal/published) depending on the status of the page. The Load method that takes the ViewContext as parameter will in addition to adding editorial and property settings, also track the usage of the asset on the current page, if the current page is published.
PropertyMediaList
The PropertyMediaList type uses a model of type MediaReferenceList<MediaReference>. To create a display template for this model,
create a display template in the folder /Views/Shared/DisplayTemplates/ and name it MediaReferenceList`1.cshtml
@model MediaReferenceList<MediaReference>
@using EPiServer.Editor
@using ImageVault.Client
@using ImageVault.Common.Data
@using ImageVault.EPiServer
@{
var client = ImageVaultClient.GetPageClient();
var items = client.Load<WebMedia>(Model, ViewContext).ToList();
}
@if (items.Count != 0) {
foreach (var media in items) {
@Html.Raw(media.Html)
}
} else if (PageEditing.PageIsInEditMode) {
<div class="ivEmptyActions" style="padding-top: 150px; background-color: #fff; text-align: center; width: 100%; display: inline-block; background-position: 50% 30px; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIMAAABtCAIAAAANsUXDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgyOUJBNUUxNkExRjExRTI5MUU3RjRCNkIyNDI5NEI5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgyOUJBNUUyNkExRjExRTI5MUU3RjRCNkIyNDI5NEI5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODI5QkE1REY2QTFGMTFFMjkxRTdGNEI2QjI0Mjk0QjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODI5QkE1RTA2QTFGMTFFMjkxRTdGNEI2QjI0Mjk0QjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6VPNUCAAAGRklEQVR42uyd6XbaMBCF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);">
<p style="font-weight: bold;">Add ImageVault media on the property page.</p>
</div>
}
The template will load the selected images and if any property settings is set for the property, use them as well. If no items was found and the page is in edit mode, a placeholder image will be placed there. The result will be cached if the Client cache is not disabled.
Note
Since version 5.3, the ImageVaultClient.GetPageClient method will return the correct client (internal/published) depending on the status of the page. The Load method that takes the ViewContext as parameter will in addition to adding editorial and property settings, also track the usage of the assets on the current page, if the current page is published.
Typed templates
If you would like to use the declarative model in your template you can do so by supplying the Type of the data you would like to retrieve.
Effects on media formats
Effects can be specified in different ways in the ImageVault.EPiServer plugin.
- Editorial effects: added by the cms editor when editing the property on the page. These effects are added using the ImageVault editor.
- Settings effects: effects that are applied using PropertyMediaSettings, either by decorating the property in code using the PropertySettingsAttribute or in CMS admin directly on the property.
- Declarative effects: effects that are applied on properties in the declarative model.
Declarative effects
When you add a property that should refer to a media (original or a conversion) you declare it as one of the supported Media types. The following types are supported:
- Media; refers to the original media. Can not apply any effects to this type. If you try to add declarative effects on a Media type you will get runtime errors.
- WebMedia; refers to a conversion of the original media (can be the same as the original if no effects are applied). If possible, the original content type is kept.
- Image; refers to a image conversion of the original media (if possible). Is a subclass of WebMedia so it follows the same rules as WebMedia.
- Video; refers to a video conversion of the original media (if possible). Is a subclass of WebMedia so it follows the same rules as WebMedia.
If a property defines a conversion that is not supported (ie. no registered converter is supporting), the property value will be null.
Omitting effects
Normally all available effects (editorial, settings, declarative) for a property is used (if possible) in that order. If you would like to skip effects from some of the layers, then use the IgnoreEffectsAttribute and supply any combination of the available EffectTypes.
Example
public class GalleryMedia : MediaItem {
public Media Original { get; set; }
public WebMedia Media { get; set; }
[ResizeEffect(Width = 300, Height = 300, ResizeMode = ResizeMode.ScaleToFill)]
[IgnoreEffects(EffectTypes.SettingsEffects)]
public Image Thumbnail { get; set; }
[ResizeEffect(Width = 800, Height = 0)]
[IgnoreEffects(EffectTypes.SettingsEffects | EffectTypes.EditorialEffects)]
public WebMedia Preview { get; set; }
}
The code above exemplifies the different aspects on what you can do with the different formats and effects.
Original; since this property declares a Media type, this will always give a link to the original media.
Media; since this property is declared as WebMedia, this format can utilize effects. No declarative effects are used but both editorial and settings effects will be applied.
Thumbnail; This property will return a Image conversion that first applies any editorial effects (ignoring settings effects using the IgnoreEffectsAttribute) and then resizes the image to a 300x300 auto cropped image.
Preview; will return a WebMedia of a width of 800px (keeping aspect ratio). Neither editorial or settings effects will be utilized.
Display template for typed model
To utilize the declarative model in a display template, just create a display template and place it under /views/shared/displaytemplates
and name it to some cool name (like GalleryList.cshtml)
@model MediaReferenceList<MediaReference>
@using EPiServer.Editor
@using ImageVault.Client
@using ImageVault.Common.Data
@using ImageVault.EPiServer
@{
var client = ClientFactory.GetSdkClient();
var items = client.Load<GalleryMedia>(Model, ViewContext.GetSettings<PropertyMediaSettings>()).ToList();
}
@if (items.Count != 0) {
foreach (var item in items) {
<img src="@item.Thumbnail.Url" width="@item.Thumbnail.Width" height="@item.Thumbnail.Height"
onclick="javascript:window.location = '@item.Preview.Url'" />
}
} else if (PageEditing.PageIsInEditMode) {
<div class="ivEmptyActions" style="padding-top: 150px; background-color: #fff; text-align: center; width: 100%; display: inline-block; background-position: 50% 30px; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIMAAABtCAIAAAANsUXDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgyOUJBNUUxNkExRjExRTI5MUU3RjRCNkIyNDI5NEI5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgyOUJBNUUyNkExRjExRTI5MUU3RjRCNkIyNDI5NEI5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODI5QkE1REY2QTFGMTFFMjkxRTdGNEI2QjI0Mjk0QjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODI5QkE1RTA2QTFGMTFFMjkxRTdGNEI2QjI0Mjk0QjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6VPNUCAAAGRklEQVR42uyd6XbaMBCF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);">
<p style="font-weight: bold;">Add ImageVault media on the property page.</p>
</div>
}
This template displays the thumbnail image and when the thumbnail is clicked, the preview image is displayed in the browser.
UIHint
To use this template in the ContentModel you need to supply a UIHint that refers to your display template. This can be done on the page/block view when using PropertyFor.
<div>
<h3>Media</h3>
@Html.PropertyFor(m => m.Images,"GalleryList")
</div>
You can also specify it using a UIHint attribute directly on the property of the content model.
[ContentType(GUID = "2F509C22-AC6E-4014-832D-08037BF387B9")]
public class GalleryPage : PageData {
[UIHint("GalleryList",PresentationLayer.Website)]
[Display(GroupName = SystemTabNames.Content, Order = 100)]
[BackingType(typeof(PropertyMediaList))]
public virtual MediaReferenceList<MediaReference> Images { get; set; }
}