Add background image with focal point (background position) via grid editor
I am having trouble figuring out the best way to allow a content creator to pick an image, choose it's focal point, and then render that image as a background image with a background position based on the chosen focal point.
I know that the Image Cropper has the ability to set focal points - but it can't be used as an editor in the Grid Editor, it can't be used as a type in the parameters for a macro, and there is no specification for it in the dialogService methods like there is for mediaPicker.
I don't mind making a custom grid editor under app_pluggins, but I'm not sure how to actually utilize the image cropper in my controller. Does anybody have some suggestions for the best way to achieve the stated goal?
I will set this up locally and test it out. It doesn't claim to be compatible with 7.7.x yet - but we are about to find out lol. It doesn't look like it allows very precise positioning since it uses a 3x3 grid instead of a percentage based dot - but I may be able to modify it or just check with the designer to see if 3x3 would be precise enough for her.
Just a small heads up on the "Project Compatibility" guide you see on package pages, incase you weren't aware. If you download the package from Our, then you can provide feedback as to if a project is compatible. That is where most of the reported compatibility comes from for packages. So, just because a project isn't showing as compatible doesn't mean it isn't.
The biggest difference in this, however, is compatibility with major versions. As I understand it, a lot of Umbraco 6 packages aren't necessarily compatible with Umbraco 7. Just thought I'd let you know :-)
However, regarding your actual query, there is this great blog post about doing this not within the grid, but you might be able to use the information there to do it in the grid as well:
Add background image with focal point (background position) via grid editor
I am having trouble figuring out the best way to allow a content creator to pick an image, choose it's focal point, and then render that image as a background image with a background position based on the chosen focal point.
I know that the Image Cropper has the ability to set focal points - but it can't be used as an editor in the Grid Editor, it can't be used as a type in the parameters for a macro, and there is no specification for it in the dialogService methods like there is for mediaPicker.
I don't mind making a custom grid editor under app_pluggins, but I'm not sure how to actually utilize the image cropper in my controller. Does anybody have some suggestions for the best way to achieve the stated goal?
Is this posted in the wrong category, or do I need to clarify the question a bit?
Hi Michael,
I have seen a plugin do something very similar.. however am on my phone right now and can't find it. I'll have a look later though
Matt
Found it https://our.umbraco.org/projects/backoffice-extensions/grid-settings/
Thanks Matthew!
I will set this up locally and test it out. It doesn't claim to be compatible with 7.7.x yet - but we are about to find out lol. It doesn't look like it allows very precise positioning since it uses a 3x3 grid instead of a percentage based dot - but I may be able to modify it or just check with the designer to see if 3x3 would be precise enough for her.
Hey Michael,
Just a small heads up on the "Project Compatibility" guide you see on package pages, incase you weren't aware. If you download the package from Our, then you can provide feedback as to if a project is compatible. That is where most of the reported compatibility comes from for packages. So, just because a project isn't showing as compatible doesn't mean it isn't.
The biggest difference in this, however, is compatibility with major versions. As I understand it, a lot of Umbraco 6 packages aren't necessarily compatible with Umbraco 7. Just thought I'd let you know :-)
However, regarding your actual query, there is this great blog post about doing this not within the grid, but you might be able to use the information there to do it in the grid as well:
https://www.dot-see.com/en/blog/responsive-background-images-in-umbraco-with-focal-point-preservation/
Nik
is working on a reply...