Umbraco Image Crop Picker using Contentment Data List
Tags: umbraco, contentment, cms
Published: 2021-02-11 12:02:43

---
title: Umbraco Image Crop Picker using Contentment Data List
published: true
date: 2021-02-11 12:00:00 UTC
tags: umbraco, contentment, cms
canonical_url: https://leekelleher.com/umbraco/umbraco-image-crop-picker-using-contentment-data-list/
---

A couple of weeks ago, [Marcin Zajkowski](https://dev.to/zajkowskimarcin) and [Adrian Ochmann](https://dev.to/aochmann) announced the release of their new Umbraco package, [Image Crop Picker](https://our.umbraco.com/packages/backoffice-extensions/image-crop-picker/).

{% twitter 1354821151541710850 %}

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](https://our.umbraco.com/packages/backoffice-extensions/contentment/) package? Since developing the [**Data List**](https://github.com/leekelleher/umbraco-contentment/blob/develop/docs/editors/data-list.md) 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`](https://gist.github.com/leekelleher/5c0abddb3246185ce0ba50a99975e310)

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

![Image Cropper data-type configuration](https://dev-to-uploads.s3.amazonaws.com/i/xy0bmwy48bk0p3atvh9w.png)

Next, once I had the code ([from the gist](https://gist.github.com/leekelleher/5c0abddb3246185ce0ba50a99975e310)) in place, I could create my custom **Data List** data-type.

![Data List data-type with Umbraco Image Crops as the data-source](https://dev-to-uploads.s3.amazonaws.com/i/yj7ix994yfqjvyv8a6yk.png)

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

![Umbraco Image Crops data-source configuration](https://dev-to-uploads.s3.amazonaws.com/i/4d05iuo3869n9j62g60m.png)

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.

![Umbraco Image Crops data-source, select an Image Cropper data-type](https://dev-to-uploads.s3.amazonaws.com/i/zqax96ah0yb1terk3mpe.png)

![Umbraco Image Crops data-source, selected Image Cropper data-type](https://dev-to-uploads.s3.amazonaws.com/i/tmukjbcws2cym5bfh5jq.png)

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...

![image-crop-picker-editor](https://dev-to-uploads.s3.amazonaws.com/i/dbgpk2vr3zh1b5l3x64i.png)

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...

{% gist https://gist.github.com/leekelleher/5c0abddb3246185ce0ba50a99975e310 %}

_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> ❤