1

I'm using the image cropper on my media type > Image > Upload Image. This seems to be the best solution for creating responsive images in the media library.

However, this presents me with the problem of finding out how to get the URL for my images now.

Usually for Image Croppers I would use this code:

@Model.Content.GetCropUrl("image", "my-crop-name")

However if I try to get the image crop this way I get this instead:

<img src="Umbraco.Web.Models.DynamicPublishedContent?mode=pad&rnd=131108182860000000" />

I was expecting to get an image URL with the crop I specified. This works fine for standard image croppers but not ones on my images in the media library. Why is that? And how should I get the crop URL for these images?

I'm using v7.4.2

Jon
  • 3,173
  • 3
  • 39
  • 66
  • 2
    Can you just confirm that you've replaced the default File upload property with an Image cropper property on your Image media type? If this is the case then you'll need to retrieve the selected image as `IPublishedContent` and then call the `GetCropUrl()` method on that. The first argument should be the alias of the Image cropper property. This is optional and it will look for a property with alias `umbracoFile` by default. – Rob Purcell Jun 20 '16 at 11:08
  • 1
    @RobertPurcell That's the solution! Do you want to add it as an answer so I can accept it? If not I'll just add one myself. – Jon Jun 20 '16 at 22:33
  • Thanks Jon, I've just posted an answer – Rob Purcell Jun 23 '16 at 09:15

2 Answers2

4

In order to get a crop URL for an image in the media section you first need to retrieve the image as IPublishedContent. You can do this as follows:

var imageId = Model.Content.GetPropertyValue<int>("image");
var image = Umbraco.TypedMedia(imageId);

Or if you're using the excellent Core Property Value Converters package you can retrieve it directly without having to perform the conversion:

var image = Model.Content.GetPropertyValue<IPublishedContent>("image");

You then need to call the GetCropUrl() method on your image. If you've replaced the default Upload property with an Image Cropper property, and kept the property alias the same (umbracoFile), you can just pass in the crop alias:

var cropUrl = image.GetCropUrl("my-crop-name");

If the alias of your Image Cropper property is different to the default you will need to pass that as an additional argument:

var cropUrl = image.GetCropUrl("imageCropperAlias", "my-crop-name");
Rob Purcell
  • 1,285
  • 1
  • 9
  • 19
1

For images directly from the media libary without an Image Cropper data type. I use somethings like this:

<img src="@photo.Url?mode=crop&width=634&height=634" alt="@photo.Name" />

Not very pretty but it works perfectly.

Jan Bluemink
  • 3,467
  • 1
  • 21
  • 35
  • This is an interesting way to get a crop but it doesn't allow the user to define a focal point, surely? I want to use the crops I have defined as they'll be the ones that have the focal points set correctly. – Jon Jun 20 '16 at 22:34
  • There are a lot more parameters, For Example ?crop=0.5793905628681395,0,0,0&cropmode=percentage&width=645&height=246 you can see them when you have a working crop, But indeed you miss to gui to set them. – Jan Bluemink Jun 21 '16 at 09:04