Using PropertyMedia with PageTypeBuilder
You can also use the PageTypeBuilder to add an ImageVault property to the page. To add an ImageVault media item to an Episerver page, the developer can decorate a media reference with the PageTypePropertyAttribute using the type PropertyMedia.
[PageTypeProperty(Type = typeof(PropertyMedia))]
public MediaReference Image { get; set; }
If you want to add a media list then use the MediaReferenceList<MediaReference> as property type and decorate with the PageTypePropertyAttribute using the type PropertyMediaList.
[PageTypeProperty(Type = typeof(PropertyMediaList))]
public MediaReferenceList<MediaReference> MediaList { get; set; }
Display
Displaying the property on a page can be done with the EPiServer:Property as if the property was added manually on the page type like below.
<EPiServer:Property PropertyName="Image" DisplayMissingMessage="false"
EnableViewState="false" runat="server"
Width="800" Height="600" ResizeMode="ScaleToFit" />
If using a TemplatePage<T> class as base class for your template page then you can access the property directly for retrieving the media. In that case you directly have access to the MediaReference instance and can use it like below.
if (CurrentPage.Image != null) {
//Get<T> will never return null and can be chained without checking
var client = ClientFactory.GetSdkClient();
var media = client.Load<WebMedia>(CurrentPage.Image).Resize(200, 200).FirstOrDefault();
//media need to be checked for existance before properties can be read
//to avoid exceptions if requested format couldn't be retrieved
if (media != null) {
var url = media.Url;
//..do stuff
}
}
If using a list you can do like below
if (CurrentPage.MediaList != null) {
var client = ClientFactory.GetSdkClient();
foreach (var thumbnail in client.Load<Thumbnail>(CurrentPage.MediaList).Resize(150)) {
var url = thumbnail.Url;
//..do stuff
}
}
See PropertyMedia and PropertyMediaList for more examples.
Extended media information
If you would like to add additional meta data to the selected media, you could use the PageTypeBuilder to create a group of EPiServer properties described here.
public class ArticleImage : PageTypePropertyGroup {
private readonly Client _client;
[PageTypeProperty(Type = typeof(PropertyMedia))]
public virtual MediaReference Reference { get; set; }
public string Url {
get {
if (Reference != null) {
var media = _client.Load<WebMedia>(Reference).Resize(200, 200).FirstOrDefault();
if (media != null) {
return media.Url;
}
}
return string.Empty;
}
}
[PageTypeProperty(Type = typeof(PropertyString))]
public virtual string AltText { get; set; }
[PageTypeProperty(Type = typeof(PropertyString))]
public virtual string Description { get; set; }
public ArticleImage() {
_client = ClientFactory.GetSdkClient();
}
}
Then you need to add a property to your PageType class
[PageTypePropertyGroup]
public ArticleImage ArticleImage { get; set; }
When displaying it on a page you can also access the media and the description directly on the page using Episerver properties
<img src="<%=CurrentPage.ArticleImage.Url %>" alt="<%=CurrentPage.ArticleImage.AltText %>" />
<p class="description"><%=CurrentPage.ArticleImage.Description %></p>