Could it be possible when creating a media picker define some crops available for the images selected on that mediapicker?
That way it could show the user the crops available only for that media picker.
As it is now, when designing a site, usually for each type of image we use 3 crops one for each device, ie large, medium and small devices.
But each crop is for a particular case, for instance a header can have a background image of 1920x680 px for large devices, etc.
But if the image is for a news photo could have another crops.
If i define each crop in the image cropper as it is now, when the user edits an image may see lots of possible crops and its hard to know the crop that will be used for that situtation.
But the media picker knows the context and situation.
I guess this could be a good improvement for the media picker.
Personally I almost never define crops anymore. We just crop the images based on the focal point.
If I do define crops it will never be specific like header-news, but more general based on aspect ratio (square, portrait, landscape)
This requires a design to use a lot of the same aspect ratio's. You can get generate image using a crop with different width and height.
But I think a media picker where you can define as set of crops that are availabe would be nice. And than let the editor change a crop on a page level, instead of globally.
Yes i normally use the focal point, so the editor can select the center of the cropped image and you can set the dimensions on code.
But editors like to have an idea of how the image will be when cropped, and some editors like to set diferent focal points for an image and creating defined crops can help with that.
I think global crops dont help it should be at mediapicker level, that would be more useful.
hey from the future 2023))
Could you explain some details on how you crop images based on focal points? I struggle to find any info on the matter of applying focal point coordinates or how to get focal point coordinates from an image object.
There is plenty of info on how to set a focal point or enable it in data type, but I found nothing about actually applying it. Please point me wrong if there are any articles explaining it.
The first set of image crops I define are always "aspect ratio" and "resolution". So the initial few look like this:
16:9
4:3
3:4
1:1
Each aspect ratio above has an image crop entry for a respective breakpoint (XS | S | M | L | XL). So before we even dive into more specific use cases, we are at 20 defined image crop sizes.
Then you have your social media (Open Graph and Twitter Cards), AMP, JSON-LD, Amazon Inventory.... It's not often but our base project (that we begin all sites from) has 20+ crops in it already and some of our clients double that.
If the community were to work on a new property editor itself I'd ask for the following features:
The property editor configuration should allow explicit selection of which crops are important to render. Other crops would still remain, but would not render client side while editing the content.
Image manipulation in the backoffice should have a visual interface to adjust much more than focal points and output sizes. ImageProcessor allows for many other useful settings which could be exposed via the property editor configuration too.
Consider allowing for multiple image uploads. Then specific crops could target specific files. I often provide an override field so a different image all together can be set for the smaller breakpoints. A simple crop doesn't always cut it for marketing.
Now that I blew the scope of this thing, who wants to build it? :)
I've started work on a custom property editor to address some of the things I mentioned above.
Tailor which crops are shown to the editor.
Provide additional UI/UX for OOTB Image Processor functionality.
The configuration for the editor looks like this:
Working on the actual property editor now. Should have something "soon".
The mediaCropDetails editor looked like a good start, until I realized the crop you create doesn't save back to the original image in the media center.
That looks great!
Where do you define those crops, in a image cropper? so you would have to create a new image cropper datatype for each crops collection so you the can select that datatype here?
The first property Image Crops has a select box. This allows you to select any data type you've previously created that is of type "image cropper". After selecting the data type, you're shown a list of crop sizes available. You can toggle each one of these on/off.
I know that some people create multiple data types across their site for image croppers. I tend not to do that. As jarring as it is to see 20 crops when you select any media item from the backoffice, I think crops existing that you cannot find anywhere is confusing and more detrimental to the backoffice editing experience. (EDIT: I use the media section.)
There's room for every solution though! I see it being very easy to say - define your own crops here in the data type - or whatever else you may want to do!
I'm working on the property editor, I hope to have something to show off soon.
Define crops in the media picker instead of image cropper type
Could it be possible when creating a media picker define some crops available for the images selected on that mediapicker? That way it could show the user the crops available only for that media picker.
As it is now, when designing a site, usually for each type of image we use 3 crops one for each device, ie large, medium and small devices. But each crop is for a particular case, for instance a header can have a background image of 1920x680 px for large devices, etc. But if the image is for a news photo could have another crops. If i define each crop in the image cropper as it is now, when the user edits an image may see lots of possible crops and its hard to know the crop that will be used for that situtation. But the media picker knows the context and situation. I guess this could be a good improvement for the media picker.
Hi Tito,
Personally I almost never define crops anymore. We just crop the images based on the focal point.
If I do define crops it will never be specific like header-news, but more general based on aspect ratio (square, portrait, landscape)
This requires a design to use a lot of the same aspect ratio's. You can get generate image using a crop with different width and height.
But I think a media picker where you can define as set of crops that are availabe would be nice. And than let the editor change a crop on a page level, instead of globally.
Dave
Yes i normally use the focal point, so the editor can select the center of the cropped image and you can set the dimensions on code. But editors like to have an idea of how the image will be when cropped, and some editors like to set diferent focal points for an image and creating defined crops can help with that. I think global crops dont help it should be at mediapicker level, that would be more useful.
Hi Dave,
hey from the future 2023)) Could you explain some details on how you crop images based on focal points? I struggle to find any info on the matter of applying focal point coordinates or how to get focal point coordinates from an image object.
There is plenty of info on how to set a focal point or enable it in data type, but I found nothing about actually applying it. Please point me wrong if there are any articles explaining it.
Thank you in advance!
The first set of image crops I define are always "aspect ratio" and "resolution". So the initial few look like this:
Each aspect ratio above has an image crop entry for a respective breakpoint (XS | S | M | L | XL). So before we even dive into more specific use cases, we are at 20 defined image crop sizes.
Then you have your social media (Open Graph and Twitter Cards), AMP, JSON-LD, Amazon Inventory.... It's not often but our base project (that we begin all sites from) has 20+ crops in it already and some of our clients double that.
If the community were to work on a new property editor itself I'd ask for the following features:
The property editor configuration should allow explicit selection of which crops are important to render. Other crops would still remain, but would not render client side while editing the content.
Image manipulation in the backoffice should have a visual interface to adjust much more than focal points and output sizes. ImageProcessor allows for many other useful settings which could be exposed via the property editor configuration too.
Consider allowing for multiple image uploads. Then specific crops could target specific files. I often provide an override field so a different image all together can be set for the smaller breakpoints. A simple crop doesn't always cut it for marketing.
Now that I blew the scope of this thing, who wants to build it? :)
I've started work on a custom property editor to address some of the things I mentioned above.
The configuration for the editor looks like this:
Working on the actual property editor now. Should have something "soon".
The mediaCropDetails editor looked like a good start, until I realized the crop you create doesn't save back to the original image in the media center.
That looks great! Where do you define those crops, in a image cropper? so you would have to create a new image cropper datatype for each crops collection so you the can select that datatype here?
Right and right!
The first property Image Crops has a select box. This allows you to select any data type you've previously created that is of type "image cropper". After selecting the data type, you're shown a list of crop sizes available. You can toggle each one of these on/off.
I know that some people create multiple data types across their site for image croppers. I tend not to do that. As jarring as it is to see 20 crops when you select any media item from the backoffice, I think crops existing that you cannot find anywhere is confusing and more detrimental to the backoffice editing experience. (EDIT: I use the media section.)
There's room for every solution though! I see it being very easy to say - define your own crops here in the data type - or whatever else you may want to do!
I'm working on the property editor, I hope to have something to show off soon.
It seems Umbraco is working on a v3 of Media picker that support local crops: https://umbraco.com/blog/umbraco-product-update-april-13th-2021/
is working on a reply...