Media list using ContentArea

Episerver recommends listing complex objects as blocks within a ContentArea. By populating a ContentArea with instances of a block type containing a MediaReference property, a customizable list of media can be easily accomplished.

Add a ContentArea to your page type. Decorating the property with AllowedTypes will force the ContentArea to only allow MediaBlock, making modifications, rendering and error handling easier:

[AllowedTypes(new[] { typeof(MediaBlock) })]
public virtual ContentArea MediaList { get; set; }

Define a block type, with a MediaReference property:

public class MediaBlock : BlockData {
    public virtual MediaReference Media { get; set; }
}

Render the ContentArea as a ul, with each media/child as a li:

@Html.PropertyFor(m => m.MediaList, new { CustomTag = "ul", ChildrenCustomTagName = "li" })

For more details, check out our examples repository on GitHub.