PropertyList with image

ExtendedCollectionEditor.js

define([
    "dojo/_base/array",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "epi-cms/contentediting/editors/CollectionEditor",
    "alloy/editors/extendedFormatters"
],
function (
    array,
    declare,
    lang,
    CollectionEditor,
    extendedFormaters
) {
    return declare([CollectionEditor], {
        _getGridDefinition: function() {
            var result = this.inherited(arguments);

            for (var i = 0; i < this.mappedImages.length; i++) {
                extendedFormaters.setImageMapping(this.mappedImages[i].id, this.mappedImages[i].imageUrl);
            }
            result.image.formatter = extendedFormaters.imageFormatter;
            return result;
        },

        onExecuteDialog: function () {
            var item = this._itemEditor.get("value");
            var resolveImageMapping = extendedFormaters.resolveImageMapping(item.image);

            resolveImageMapping.then(lang.hitch(this,function () {
                if (this._editingItemIndex !== undefined) {
                    this.model.saveItem(item, this._editingItemIndex);
                } else {
                    this.model.addItem(item);
                }
            }));
        }
    });
});

extendedFormatters.js

define([
// dojo
    "dojo/_base/lang",
    "dojo/Deferred",

     "epi/dependency"
],
function (
// dojo
    lang,

    Deferred,

    dependency
) {
    function resolveContentData (contentlink, callback) {
        if (!contentlink) {
            return null;
        }

        var registry = dependency.resolve("epi.storeregistry");
        var store = registry.get("epi.cms.content.light");

        var contentData;
        dojo.when(store.get(contentlink), function(returnValue) {
            contentData = returnValue;
            callback(contentData);
        });
        return contentData;
    };

    var images = {};
    
    var extendedFormatters = {
       
        imageFormatter: function (value) {
            if (!value) {
                return '-';
            }
            if (!images[value]) {
                return value;
            }
            return "<img style='max-height: 100px;' src='" + images[value] + "'/>";
        },

        resolveImageMapping: function(contentLink) {
            var def = new Deferred();
            resolveContentData(contentLink, function(contentData) {
                images[contentLink] = contentData.previewUrl;
                def.resolve();
            });
            return def.promise;
        },

        setImageMapping: function(contentLink, imageUrl) {
            images[contentLink] = imageUrl;
        }
    }

    return extendedFormatters;
});

ImageThumbnailExtender.cs

 public class ImageThumbnailExtender : Attribute, IMetadataAware
    {
        public void OnMetadataCreated(ModelMetadata metadata)
        {
            var extendedMetadata = (ExtendedMetadata)metadata;
            var collection = ((ExtendingPropertyList.Models.Pages.ContactListProperty)metadata.Model).List
             .Where(cr => cr.Image != null)
             .Select(cr => new
             {
                 id = cr.Image.ID,
                 imageUrl = ServiceLocator.Current.GetInstance<IContentRepository>().Get<ImageFile>(cr.Image).PreviewUrl()
             });
            extendedMetadata.EditorConfiguration.Add("mappedImages", collection);
        }
    }

ProductPage.cs

 [SiteContentType(
        GUID = "17583DCD-3C11-49DD-A66D-0DEF0DD601FC",
        GroupName = Global.GroupNames.Products)]
    [SiteImageUrl(Global.StaticGraphicsFolderPath + "page-type-thumbnail-product.png")]
    [AvailableContentTypes( 
        Availability = Availability.Specific,
        IncludeOn = new[] { typeof(StartPage) })]
    public class ProductPage : StandardPage
    {
        [EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<Contact>))]
        [ClientEditor(ClientEditingClass = "alloy/editors/ExtendedCollectionEditor")]
        [ImageThumbnailExtender]
        public virtual IList<Contact> Contacts { get; set; }
    }

Sweet feature! Do you know if it's available for later versions of Episerver? (11+?)

Here are updates to ImageThumbnailExtender.cs to work with .NET 5 / CMS12

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
public class ImageThumbnailExtender : Attribute, IDisplayMetadataProvider
{
	#region Private Variables

	private static readonly Lazy<IUrlResolver> _urlResolver =
	   new(() => ServiceLocator.Current.GetInstance<IUrlResolver>());

	#endregion Private Variables


	#region Public Methods

	#region CreateDisplayMetadata
	public void CreateDisplayMetadata(DisplayMetadataProviderContext context)
	{
		if (context.DisplayMetadata.AdditionalValues[ExtendedMetadata.ExtendedMetadataDisplayKey] is not ExtendedMetadata extendedMetadata)
			return;

		var collection = ((ExtendingPropertyList.Models.Pages.ContactListProperty)extendedMetadata.Model)?
			.List?
			.Where(cs => cs.Image != null)
			.Select(cs => new
			{
				id = cs.Image.ID,
				imageUrl = _urlResolver.Value.GetUrl(cs.Image)
			});
		extendedMetadata.EditorConfiguration.Add("mappedImages", collection);
	}
	#endregion

	#endregion Public Methods
}

And something it took me a few minutes to figure out. ContactListProperty is the PropertyListBase.

[PropertyDefinitionTypePlugIn]
public class ContactListProperty : PropertyListBase<Contact>
{
}