Skip to content

Instantly share code, notes, and snippets.

@gregwiechec
Created December 22, 2015 20:10
Show Gist options
  • Save gregwiechec/fa9aa9fa3f46350bf896 to your computer and use it in GitHub Desktop.
Save gregwiechec/fa9aa9fa3f46350bf896 to your computer and use it in GitHub Desktop.
PropertyList with image
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);
}
}));
}
});
});
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;
});
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);
}
}
[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; }
}
@david-stahl
Copy link

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

@jsalwen
Copy link

jsalwen commented Feb 26, 2022

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>
{
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment