Created
December 22, 2015 20:10
-
-
Save gregwiechec/fa9aa9fa3f46350bf896 to your computer and use it in GitHub Desktop.
PropertyList with image
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
})); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[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; } | |
} |
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
Sweet feature! Do you know if it's available for later versions of Episerver? (11+?)