Umbraco Image Crop Picker using Contentment Data List

A couple of weeks ago, Marcin Zajkowski and Adrian Ochmann announced the release of their new Umbraco package, Image Crop Picker.

The Image Crop Picker is a property-editor that enables a specific image crop to be selected from the configuration of a Image Cropper data-type. This can be useful for when a content-editor needs control over which crop is used for rendering an image.

The package has releases for both Umbraco v7 and v8, and has plans to extend the functionality in future releases. If it suits your needs, then please use it. 👍

Now what does this all have to do with my Contentment package? Since developing the Data List property-editor, whenever I see another package use a dropdown-list, checkbox-list or radiobutton-list, I can't shake the concept of separating the data-source from the list-editor.

So with the the Image Crop Picker package, I wondered - Could that be achieved as a custom Data Source? 🤔

It would need a way to select a pre-configured Image Cropper data-type, then get all the crop definitions from that data-type... Yeah, why not!

🕙🕚🕛 TL;DR, If you want to skip the explanation and see the code, it is available this gist: UmbracoImageCropDataListSource.cs

To do this, I needed to define the crops in my own Image Cropper data-type. I opted to copy Marcin's examples.

Next, once I had the code (from the gist) in place, I could create my custom Data List data-type.

The configuration for the data-source needs to select a pre-configured Image Cropper data-type.

For this UI, I opted to use the Item Picker editor, I thought it would be a nicer UI, in case have numerous Image Cropper data-types. This could have easily been done with a dropdown-list.

Once selected, you can configure the list-editor you would like to use. For this example, I chose a radiobutton-list.

You can then save the Data List data-type and add it to your document-type.

On your content page, it will be displayed like so...

Of course, if you prefer a different list-editor - say a dropdown-list, or enable multiple selections with a checkbox-list or Item Picker, you can do that.

Here is the Umbraco Image Crops data-source code in full...

	/* Copyright © 2021 Lee Kelleher.
	* This Source Code Form is subject to the terms of the Mozilla Public
	* License, v. 2.0. If a copy of the MPL was not distributed with this
	* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
	using System.Collections.Generic;
	using System.Linq;
	using Newtonsoft.Json.Linq;
	using Umbraco.Community.Contentment.DataEditors;
	using Umbraco.Core;
	using Umbraco.Core.IO;
	using Umbraco.Core.Models;
	using Umbraco.Core.PropertyEditors;
	using Umbraco.Core.Services;
	namespace Our.Umbraco.Community.Contentment.DataSources
	{
	internal sealed class UmbracoImageCropDataListSource : IDataListSource
	{
	private readonly IDataTypeService _dataTypeService;
	public UmbracoImageCropDataListSource(IDataTypeService dataTypeService)
	{
	_dataTypeService = dataTypeService;
	}
	public string Name => "Umbraco Image Crops";
	public string Description => "Select an Umbraco Image Cropper to populate the data source.";
	public string Icon => "icon-crop";
	public IEnumerable<ConfigurationField> Fields
	{
	get
	{
	var items = _dataTypeService
	.GetByEditorAlias(Constants.PropertyEditors.Aliases.ImageCropper)
	.Select(x => new DataListItem
	{
	Icon = Icon,
	Description = x.EditorAlias,
	Name = x.Name,
	Value = Udi.Create(Constants.UdiEntityType.DataType, x.Key).ToString(),
	});
	return new ConfigurationField[]
	{
	new ConfigurationField
	{
	Key = "imageCropper",
	Name = "Image Cropper",
	Description = "Select a Data Type that uses the Image Cropper.",
	View = "~/App_Plugins/Contentment/editors/item-picker.html",
	Config = new Dictionary<string, object>
	{
	{ "enableFilter", items.Count() > 5 ? "1" : "0" },
	{ "items", items },
	{ "listType", "list" },
	{ "overlayView", IOHelper.ResolveUrl("~/App_Plugins/Contentment/editors/item-picker.overlay.html") },
	{ "maxItems", 1 },
	}
	}
	};
	}
	}
	public Dictionary<string, object> DefaultValues => null;
	public OverlaySize OverlaySize => OverlaySize.Small;
	public IEnumerable<DataListItem> GetItems(Dictionary<string, object> config)
	{
	if (config.TryGetValue("imageCropper", out var obj) &&
	obj is JArray array &&
	array.Count > 0 &&
	array[0].Value<string>() is string str &&
	string.IsNullOrWhiteSpace(str) == false &&
	GuidUdi.TryParse(str, out var udi))
	{
	return _dataTypeService
	.GetDataType(udi.Guid)?
	.ConfigurationAs<ImageCropperConfiguration>()?
	.Crops?
	.Select(x => new DataListItem
	{
	Name = x.Alias,
	Value = x.Alias,
	Icon = this.Icon,
	Description = $"{x.Width}px × {x.Height}px"
	});
	}
	return Enumerable.Empty<DataListItem>();
	}
	}
	}

view raw UmbracoImageCropDataListSource.cs hosted with ❤ by GitHub

If people think it would be interesting for me to break down and explain the code in more detail, please let me know. I'm happy to do so, just didn't want to do it unwarranted.

---

🔌 Plugs and begging... 🙏
If you already use the Contentment package, please remember to give it a vote-up on the Our Umbraco project page: https://our.umbraco.com/packages/backoffice-extensions/contentment/

If you use my open-source Umbraco packages on commercial projects and want to say thanks - consider becoming a sponsor: https://github.com/sponsors/leekelleher ❤