I really would like to see the Image Cropper added to the list of Grid editors. I prefer the Image Cropper property editor to the plain Image property editor because it makes it so much easier to maintain a consistent responsive design.
So, I have started fiddling with Config/grid.editors.config.js. Just as a test, I added a 'Heading 2' editor like this:
I understand that the "view" parameter is the crucial one that selects the type of editor you want. And I can see that the Richtext Editor is referred to with "view":"rte". I also suspect that there might not be an existing type for the Image Cropper, and that this has to be implemented in code somehow. Or is it? Or has anybody else implemented it?
Hey Bendik,
I've tried making using the existing Image Cropper as a view by copying /umbraco/views/imagecropper/imagecropper.html to /umbraco/views/grid/editors/imagecropper.html but it falls over when you upload an image. Clearly it needs a bit more work.
A quicker alternative might be to use the Nested Content plugin developed by Lee Kelleher & Matt Brailsford.
This allows you to add document types as grid editors, you can even custom their render output to the grid so that it'll display how you'd expect. They were featured on uHangout a while ago if you need a tutorial of how it works.
I've decided to try to go the custom grid editor route, the general Nested Content Plugin seems a bit too much for my purpose right now. Anyway, I was just wondering what you did with the rendering, did you maybe copy some cshtml from the standard Image Cropper? I'm a newbie, and I can't seem to find the renderer code for this. Any ideas?
Hey Benedik,
I took the property editor for the image cropper in the aforementioned first path. Custom grid editors are powered by AngularJS because it's all in the back office.
It's lifted entirely from one path to the other. I would imagine there needs to be some modification to the controller js file (rather a new one be created - best not modify the existing one!) so that it'd work within the grid or as expected.
Yes, I think I have kind of figured out the property editor stuff, my question is about the rendering, i.e. the cshtml code for it. In the video "Defining a Grid Editor", it is said that if you use one of the standard views like "textstring", it will automatically use the standard renderer for it and the render code is in /Views/Partials/Grid/Editors/Textstring.cshtml. Since I am specifying a custom editor which is not in this standard collection, there is no ImageCropper.cshtml in that folder. So the question is if it is possible to find this render code somewhere else, or at least an example for how to render it. Surely, since the ImageCropper is part of Umbraco, there must be some kind of render code for it somewhere?
Hi Bendik,
Glad to hear you're making some progress!
I guess you'd need to add in an ImageCropper.cshtml as the image cropper wasn't intended to be used in this way.
The other stumbling block you might come across is attaining the correct Image Crop Url from the node as grid partials don't seem to have access to the full range of UmbracoHelper class functions.
then, as said in the video, I looked for some inspiration to write this html in the /Umbraco/Views/grid/editors/, I actually just cloned the media.html there and called it imagecropper.html and put it my folder. "media" is the one used for the standard "Image" grid editor.
Then I did the same thing to do a custom renderer, i.e. cloned /Views/Partials/Grid/Editors/media.cshtml, called it imagecropper.cshtml and put it in my folder. Finally, I specified the custom renderer in the grid.editors.config.js like this:
Now if I add an image cropper to a grid on some page, the following error occurs when rendered:
System.Web.HttpCompileException (0x80004005): c:\inetpub\PixEditCMS\App_Plugins\Grid\editors\ImageCropper.cshtml(1): error CS0103: The name 'model' does not exist in the current context
So, the first line of code
@model dynamic
apparently is not good in this context, allthough as I said, it's a clone of one of the standard renderers.
It would be really helpful to have some sample code for how to write a custom grid editor renderer. Anyone?
You should be able to define a DocType with a Cropper property and expose that in the Grid Editor config file. It makes wrapping simple/complex properties a breeze if you want to quickly get them into your Grid Editor.
I can get the Media ID from the json of the Fanoe/bootstrap grid render, but I cannot figure out how to translate that Media ID into an object where I am allowed to call the GetCropUrl - which contains the short and SEO friendly version of the cropping...
hench the format:
[original filename without extension]-[cropsizename].[fileextension]
Just thought I'd update on my progress with this: I have now dropped the idea of integrating the image cropper in the grid alltogether. Instead, I came up with the idea of creating multiple grid editors, one for each crop type on my site. And, when I recently upgraded to 7.2.8, I discovered that this is exactly what's done in the Fanoe starter kit! Allthough one has to recreate the crops and keep two versions of them, this solution is fine with me for now.
Still a bit confused about images being inside or outside (somewhere...) the Media Library, but that's another matter.
I don't quite understand your question, are you trying to add a property to a Document Type? Anyway, here is my understanding of it:
First, you add a "Grid layout" property to your Document Type. Then you can configure the "Grid Layouts" and "Row configurations" for this property. Click on a Row configuration, and then on one of the cells in that configuration. You should see the check box "Allow all editors". If you uncheck it, you should see a check list of all editors available. And among these you should see some Image editors (not sure which ones in v 7.3). The grid editors are defined in Config/grid.editors.config.js, so take a look there. (You will see that some editors are accompanied by some Razor code in App_Plugins/Grid/Editors/, so check this out if you are creating your own custom editors)
I'm using Umbraco 7.4, but I think the principle is the same in 7.3 allthough the UI might be slightly different.
Add Image Cropper as a Grid editor
I really would like to see the Image Cropper added to the list of Grid editors. I prefer the Image Cropper property editor to the plain Image property editor because it makes it so much easier to maintain a consistent responsive design.
So, I have started fiddling with Config/grid.editors.config.js. Just as a test, I added a 'Heading 2' editor like this:
I understand that the "view" parameter is the crucial one that selects the type of editor you want. And I can see that the Richtext Editor is referred to with "view":"rte". I also suspect that there might not be an existing type for the Image Cropper, and that this has to be implemented in code somehow. Or is it? Or has anybody else implemented it?
Hey Bendik,
I've tried making using the existing Image Cropper as a view by copying
/umbraco/views/imagecropper/imagecropper.htmlto/umbraco/views/grid/editors/imagecropper.htmlbut it falls over when you upload an image. Clearly it needs a bit more work.A quicker alternative might be to use the Nested Content plugin developed by Lee Kelleher & Matt Brailsford.
This allows you to add document types as grid editors, you can even custom their render output to the grid so that it'll display how you'd expect. They were featured on uHangout a while ago if you need a tutorial of how it works.
Hope this helps,
Jamie
Thanks Jamie!
I've decided to try to go the custom grid editor route, the general Nested Content Plugin seems a bit too much for my purpose right now. Anyway, I was just wondering what you did with the rendering, did you maybe copy some cshtml from the standard Image Cropper? I'm a newbie, and I can't seem to find the renderer code for this. Any ideas?
Bendik
Hey Benedik,
I took the property editor for the image cropper in the aforementioned first path. Custom grid editors are powered by AngularJS because it's all in the back office.
It's lifted entirely from one path to the other. I would imagine there needs to be some modification to the controller js file (rather a new one be created - best not modify the existing one!) so that it'd work within the grid or as expected.
Thanks,
Jamie
Hello again Jamie!
Yes, I think I have kind of figured out the property editor stuff, my question is about the rendering, i.e. the cshtml code for it. In the video "Defining a Grid Editor", it is said that if you use one of the standard views like "textstring", it will automatically use the standard renderer for it and the render code is in /Views/Partials/Grid/Editors/Textstring.cshtml. Since I am specifying a custom editor which is not in this standard collection, there is no ImageCropper.cshtml in that folder. So the question is if it is possible to find this render code somewhere else, or at least an example for how to render it. Surely, since the ImageCropper is part of Umbraco, there must be some kind of render code for it somewhere?
Hi Bendik,
Glad to hear you're making some progress!
I guess you'd need to add in an ImageCropper.cshtml as the image cropper wasn't intended to be used in this way.
The other stumbling block you might come across is attaining the correct Image Crop Url from the node as grid partials don't seem to have access to the full range of UmbracoHelper class functions.
Thanks,
Jamie
Thanks again Jamie!
Okay, so here's what I tried now: Specifying a custom editor in the view parameter, like this:
then, as said in the video, I looked for some inspiration to write this html in the /Umbraco/Views/grid/editors/, I actually just cloned the media.html there and called it imagecropper.html and put it my folder. "media" is the one used for the standard "Image" grid editor.
Then I did the same thing to do a custom renderer, i.e. cloned /Views/Partials/Grid/Editors/media.cshtml, called it imagecropper.cshtml and put it in my folder. Finally, I specified the custom renderer in the grid.editors.config.js like this:
Now if I add an image cropper to a grid on some page, the following error occurs when rendered:
System.Web.HttpCompileException (0x80004005): c:\inetpub\PixEditCMS\App_Plugins\Grid\editors\ImageCropper.cshtml(1): error CS0103: The name 'model' does not exist in the current context
So, the first line of code
apparently is not good in this context, allthough as I said, it's a clone of one of the standard renderers.
It would be really helpful to have some sample code for how to write a custom grid editor renderer. Anyone?
Interesting to see that I am not the only one struggling with this.
I really like the fanoe grid approach, but the support is pretty bad in the documentation.
Hope to find a solution soon.
A suggestion for what might work for this is to use the Doc Type Grid Editor package rather than using Nested Content.
https://our.umbraco.org/projects/backoffice-extensions/doc-type-grid-editor
You should be able to define a DocType with a Cropper property and expose that in the Grid Editor config file. It makes wrapping simple/complex properties a breeze if you want to quickly get them into your Grid Editor.
h5yr to Lee/Matt for a great package!
so the Image.GetCropUrl() should not be called upon the actual Media/Image item?
I was hoping/searching for an approach where we can use the specified named cropsizes in the partial views...?
like
this should result in some kinda url looking like:
not:
I can get the Media ID from the json of the Fanoe/bootstrap grid render, but I cannot figure out how to translate that Media ID into an object where I am allowed to call the GetCropUrl - which contains the short and SEO friendly version of the cropping...
hench the format:
[original filename without extension]-[cropsizename].[fileextension]
Just thought I'd update on my progress with this: I have now dropped the idea of integrating the image cropper in the grid alltogether. Instead, I came up with the idea of creating multiple grid editors, one for each crop type on my site. And, when I recently upgraded to 7.2.8, I discovered that this is exactly what's done in the Fanoe starter kit! Allthough one has to recreate the crops and keep two versions of them, this solution is fine with me for now.
Still a bit confused about images being inside or outside (somewhere...) the Media Library, but that's another matter.
Can anyone tell, why a "Data Type" is not present in dropdown list when adding a property from "Grid Editors".
I want to add "Image cropper" and i'm only able to add that from "Document Types" and it's not appearing from Grid Editors.
I have tried Umbraco versions: 7.3.1, 7.3.7.
I don't quite understand your question, are you trying to add a property to a Document Type? Anyway, here is my understanding of it:
First, you add a "Grid layout" property to your Document Type. Then you can configure the "Grid Layouts" and "Row configurations" for this property. Click on a Row configuration, and then on one of the cells in that configuration. You should see the check box "Allow all editors". If you uncheck it, you should see a check list of all editors available. And among these you should see some Image editors (not sure which ones in v 7.3). The grid editors are defined in Config/grid.editors.config.js, so take a look there. (You will see that some editors are accompanied by some Razor code in App_Plugins/Grid/Editors/, so check this out if you are creating your own custom editors)
I'm using Umbraco 7.4, but I think the principle is the same in 7.3 allthough the UI might be slightly different.
My apologies, i wasn't clear enough. It is when you add "LeBlender Editor" package to umbraco. This post should have been posted to them.
From "Property setting" Image cropper does not appear.
And yes it works when added as you have explained.
is working on a reply...