PropertyList, or IList<T>, properties

There are a few simple steps to follow to implement PropertyList properties where the item type contains one or more image properties.

1. Create item type

Item types can contain SingleImage and AdaptiveImage properties without need for any custom JSON converters.

using AdaptiveImages.Models;

public class MyListItem
{
    public AdaptiveImage MyAdaptiveImage { get; set; }

    public SingleImage MySingleImage { get; set; }
}

Note: This applies to version 2.0.6.24 and up, as default JSON converters are registered for SingleImage and AdaptiveImage.

2. Create property definition

In order to be able to add properties of type IList<MyListItem> a matching property definition is required.

using EPiServer.Core;
using EPiServer.PlugIn;

[PropertyDefinitionTypePlugIn]
public class MyListProperty : PropertyList<MyListItem>
{
}

Note: It is recommended to specify the GUID property of the PropertyDefinitionTypePlugIn attribute, to avoid problems if the property type name or namespace is later changed.

3. Create editor descriptor

To support editing items with SingleImage and/or AdaptiveImage properties, and display thumbnails of the images in the list view, an editor descriptor is required.

using AdaptiveImages.Shell;
using EPiServer.Shell.ObjectEditing.EditorDescriptors;
using System.Collections.Generic;

[EditorDescriptorRegistration(
    TargetType = typeof(IList<MyListItem>), 
    EditorDescriptorBehavior = EditorDescriptorBehavior.OverrideDefault)]
public class MyListItemEditorDescriptor : ImagePropertyListEditorDescriptor<MyListItem>
{
}

4. Add list property to content type

using EPiServer.DataAnnotations;
using System.Collections.Generic;

[ContentType]
public class MyPageType
{
    public virtual IList<MyListItem> Items { get; set; }
}

Note: Optimizely still has IList<T> properties marked as experimental.