PropertyMedia

To add an ImageVault media item to an Episerver page, the developer can use the PropertyMedia property type. This property is installed with the ImageVault for Episerver add-on and can added to your PageType like any other property type.

When the editor edits a page containing the PropertyMedia he can select a media item from ImageVault that should be used on the page.

When displaying the media on the page the developer adds the property tag to the page like in the example below. In addition to the normal attributes that can be used the PropertyMedia also uses the following attributes

Name	Description
Width	The width of the output media in pixels
Height	The height of the output media in pixels
ResizeMode	The resize mode that should be used. Note! ScaleToFill requires both width and height to be set.

<EPiServer:Property PropertyName="Image" DisplayMissingMessage="false" 
    EnableViewState="false" runat="server" 
    Width="200" Height="200" ResizeMode="ScaleToFit"/>

When declaring the property on a content type in Episerver using code, you can use the following syntax.

public virtual MediaReference Media { get; set; }

Custom display

If the display of the selected media item needs to be customized, the developer can use the API to interact directly with the property and retrieve any format necessary. To do so you use client.Load(PropertyMedia) method to retrieve a custom media content from ImageVault.

//get PropertyMedia property on page
var propertyMedia = CurrentPage.Property["Media"] as PropertyMedia;
var propertyMediaSettings = CurrentPage.GetPropertySettings<PropertyMediaSettings>("MediaList");

if (!propertyMedia.IsNull)
{
    var client = ClientFactory.GetSdkClient();
    //get a web media in a specific size
    var media = client.Load<WebMedia>(propertyMedia, propertyMediaSettings).Resize(200, 200).FirstOrDefault();
    if (media != null)
    {
        //add it to the page
        Controls.Add(new LiteralControl($"{media.Html}<span>{media.Name}</span>"));
    }
}

See more examples in the get IMedia section.

Publish details

From Imagevault 5.3, ImageVault will track the exact episerver page that the asset is published on if you use the supplied MVC display templates for the ImageVault properties.

If you write custom code to access the api, add the IIVQueryableExtensions.UsedOn method to add detailed tracking for the published media.

// set publish details for published media
var propertyMedia = CurrentPage.Property["Media"] as PropertyMedia;
if (!propertyMedia.IsNull)
{
    var client = ClientFactory.GetSdkClient();
    //get a web media in a specific size
    var media = client.Load<WebMedia>(propertyMedia, new PropertyMediaSettings()).Resize(200, 200)
        .UsedOn(new EPiServerPublishDetails(CurrentPage, "Media"))
        .FirstOrDefault();
    if (media != null)
    {
        //add it to the page
        Controls.Add(new LiteralControl(media.Html + "<span>" + media.Name + "</span>"));
    }
}

If you call the IMediaService.Find method directly, be sure to pass along the MediaPopulateQuery.PublishInfo instead.

// set publish details for published media
var propertyMedia = CurrentPage.Property["Media"] as PropertyMedia;
if (!propertyMedia.IsNull)
{
    var client = ClientFactory.GetSdkClient();
    var mediaService = client.CreateChannel<IMediaService>();
    var q = new MediaItemQuery
    {
        Filter =
        {
            Id = {propertyMedia.MediaReference.Id}
        },
        Populate =
        {
            MediaFormats = {new WebMediaFormat { Effects = { new ResizeEffect(200,200)}} },
            PublishInfo = new PublishInfo(client.PublishIdentifier, new EPiServerPublishDetails(CurrentPage, "Media"))
        }

    };
    var mediaItem = mediaService.Find(q).FirstOrDefault();
    if (mediaItem?.MediaConversions[0] is WebMedia media)
    {
        //add it to the page
        Controls.Add(new LiteralControl(media.Html + "<span>" + media.Name + "</span>"));
    }
}

Note

PublishDetails is only stored if the clients IClient.PublishIdentifier is set. (ImageVault.Client.ClientFactory.GetSdkClient will always set the PublishIdentifier.)

Property settings

Property settings are custom settings that can be set globally for the property or customized for each page type (or per property and page type). The PropertyMedia property supports all of the attributes described above as property settings as well. Changing the property settings will affect both how the media is displayed on the page (if not overridden by the template) and which size the preview of the image in Edit mode will be.

We recommend using the PropertySettings if you want to have a correct preview image (which size it will be on the page) and in that case omit the attributes on the EPiServer:Property tag on the template page.