use image cropper inside of grids media editor - Templates, (partial) views and macros

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Jeffrey Weinstein 67 posts 313 karma points

Jul 19, 2019 @ 14:04
0

Use image cropper inside of Grid's Media editor
I want to use my image processing pipeline in the Views/Partials/Grid/Editors/Media.cshtml Especially generate several image URLs for img url set, so on each device it would display optimal image. I realized the model is Newtonsoft.Json.Linq.JObject and payload looks something like this
```
 {
    "value": {
        "id": 2218,
        "udi": "umb://media/c5c48dc6782d48bca2b3366d606d5c09",
        "image": "/media/ycgnjrjn/bali-to-gili-trawangan-fastboat-2.jpg",
        "caption": "Gili Trawangan"
    },
    "editor": {
        "name": "Image",
        "alias": "media",
        "view": "media",
        "render": null,
        "icon": "icon-picture",
        "config": {}
    }
 }
```
Can someone please point me to the direction of getting reference of media Item, so I can use
```
Url.GetCropUrl(instance, width: 200, height: 100, imageCropMode: ImageCropMode.Max)
```
For example..

Thanks!
Copy Link
Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib

Jul 20, 2019 @ 23:40
101
Hi Vojtech

Because you have the 'id' of the media item, you can use the UmbracoHelper's 'Media' method to pull back the full Media Object to then use with Url.GetCropUrl to obtain the different urls for the different crops.

First thing's first... getting access to the UmbracoHelper in a grid editor partial view, you need to change
```
@model dynamic
```
at the top of the partial view to be
```
@inherits UmbracoViewPage<dynamic>
```
This will give you access to the UmbracoHelper via the 'Umbraco' property, and you will be able to write:
```
  var mediaItem = Umbraco.Media((int)Model.value.id);
```
to retrieve the full media item to use in conjunction with GetCropUrl eg:
```
string croppedMediaUrl = Url.GetCropUrl(mediaItem, width: 200, height: 100, imageCropMode: ImageCropMode.Max)
```
regards

Marc
Copy Link
Jeffrey Weinstein 67 posts 313 karma points

Jul 21, 2019 @ 13:16

0

Thank you very much, you rock!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Use image cropper inside of Grid's Media editor