Display Channels

The ImageVault connector for Episerver has built in support for Episerver Display Channels. This allows content editors and developers to easily change how a media is presented based on specific conditions, for example the visitor's device type (mobile, desktop), screen size and resolution, etc. The conditions are flexible and are implemented by the site developers, while the content editor controls what media should be displayed.

Configuration

Follow Episerver's documentation to set up any number of Display Channels on your site.

For .NET 5

Display channels are part of the property settings and are configured in code. See Property Settings documentation on how to add a property setting, and then extend the settings with a list of DisplayChannelSetting.

Example:

new PropertyMediaSettings {
    Width = 600,
    Height = 320,
    ResizeMode = ResizeMode.ScaleToFill,
    DisplayChannelSettings = new List<DisplayChannelSettings> {
        new DisplayChannelSetting {
            Active = true,
            ChannelName = "Mobile",
            Width = 200,
            Height = 200,
            ResizeMode = ResizeMode.ScaleToFill
        },
        ...
    }
}

For .NET Framework

For each Display Channel, the custom property settings section of any ImageVault media property will have some additional information.

For each Display Channel you can set a specific width, height and resize mode for the media. These settings will only be in effect if the Active checkbox is enabled. If a setting is not active, the default media property settings (the ones on the top) are used.

You can of course also configure the property settings from code.

Editing properties for Display Channels

When you have one or more Display Channels configured, the ImageVault property editor will show the additional channels and allow the content editor to make channel specific adjustments.

By hovering over a channel thumbnail you can either open the editor to adjust the media for the specific channel, or you can replace the media altogether. The width, height and resize mode you configured for the specific channel in the custom property settings will also be applied.

Default rendering of Display Channel media

When creating your Display Channel in your Episerver project you also specify the condition of when that channel should be active. An example that activates a Display Channel for mobile devices only is shown in the Episerver documentation. If you're using the included MVC display template for ImageVault properties, the currently active Epi channel will be picked up automatically and display the corresponding media (if enabled and configured), no further implementation is neccessary.

Custom rendering of Display Channel media

If you want more control than the default backend activation of display channels we also provide a new extension method for our Client called GetChannelMedia. This allows you to render more advanced media tags, for example specifying each of the Display Channel media as different sources based on media queries. An example of rendering a responsive picture-element can be found in our examples repository on GitHub.