Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@david-stahl david-stahl commented May 3, 2018

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

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