getting an image crop url returns the image id

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

Steven Applegate 18 posts 178 karma points

Nov 15, 2017 @ 03:56
0

Getting an image crop URL returns the image ID

Using Umbraco And Getting Started

Umbraco 7
I have a custom Media Type called "Banner Image". The media type has an Image Cropper property, with one crop size named "Main".

I have a document type for a blog post that has a Media Picker property with alias named "mainImage", with a start node set to a folder that only contains Banner Image media type images.

In my template for my blog post, I'm trying to display this image. I've tried both of these methods:
```
@CurrentPage.GetCropUrl("mainImage", "Main")

@Url.GetCropUrl(Model.Content, "mainImage", "Main")
```
These are both returning the same value: "1223?mode=pad&rnd=131551648280000000"

I noticed that "1223" is the Id of the image in the Properties tab.

Is there a different method I need to call instead of those two? They were the ones I saw at https://our.umbraco.org/documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Image-Cropper
Copy Link
Matt Darby 28 posts 391 karma points c-trib

Nov 15, 2017 @ 08:09
1
Hi Steven,

The first parameter of Url.GetCropUrl() needs to be the media item you want to crop. For example:
```
var mediaItem = Model.Content.GetPropertyValue<IPublishedContent>("mainImage");
if (mediaItem != null)
{
    <img src="@Url.GetCropUrl(mediaItem, "Main")"/>
}
```
Using models builder, the tidier version:
```
@Url.GetCropUrl(Model.Content.MainImage, "Main")
```
This is assuming the property alias of your Image Cropper on "Banner Image" is "umbracoFile".

If it is not, you will need to add the alias as another parameter in GetCropUrl, for example:
```
@Url.GetCropUrl(Model.Content.MainImage, "alias", "Main")
```
Copy Link
Steven Applegate 18 posts 178 karma points

Nov 15, 2017 @ 21:49

0

Hey Matt, thanks for the response.

Unfortunately I've tried your first solution and , and they aren't returning any value at all for the image. The media item isn't null, for some reason Url.GetCropUrl just returns an empty string.

Just to double-check, here's what I have for my Blog Post data type Media Picker property:

Which is restricted to a folder containing only this Banner Image media type:

Which is just an Image Cropper containing this one crop:

I feel like maybe all the variable names are getting mixed up somewhere.

Copy Link
Ben Palmer 176 posts 842 karma points c-trib

Nov 15, 2017 @ 23:07
1
Hi Steven,

What does Model.Content.GetPropertyValue("mainImage") return?

I'd try:
```
IPublishedContent image = Model.Content.GetPropertyValue<IPublishedContent>("mainImage");

@image.GetCropUrl("Main");
```
There's a chance that it'll return an IEnumerable however so that may become more like this:
```
IEnumerable<IPublishedContent> images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("mainImage");

@if(images != null && images.Any())
{
    @images.First().GetCropUrl("Main");
}
```
Hope that helps. The key is probably first figuring out what GetPropertyValue is returning so if the above doesn't help, let us know what that is and it'll give us a bit of a helping hand to find a solution :)
Copy Link
Steven Applegate 18 posts 178 karma points

Nov 16, 2017 @ 00:06

0

Hey Ben, thanks for these, your first solution doesn't return anything. Looking at the view in VS debugger, it returns the correct Media object, but I noticed the Url property is empty (not sure if that matters):

But nevertheless, calling GetCropUrl on it returns an empty string.

For your second solution, images is coming back as null.

I also tried just deleting the image and reuploading it, then selecting the new image for my page, just in case something weird happened, but that didn't work either.

Am I maybe doing this the wrong way? Not sure if it's best practice to create a media type with a Image Cropper property, then have a Media Picker property to choose that on my data type...

Copy Link
Matt Darby 28 posts 391 karma points c-trib

Nov 16, 2017 @ 05:05
101
Hi Steven,

Try adding the alias of the Image Cropper to GetCropUrl(). In your case you've set it to "image", so:
```
IPublishedContent mediaItem = Model.Content.GetPropertyValue<IPublishedContent>("mainImage");

@mediaItem.GetCropUrl("image", "Main");
```
Does this still return nothing?
Copy Link
Ben Palmer 176 posts 842 karma points c-trib

Nov 16, 2017 @ 08:08

1

Ah, you might have half solved your own problem there.

If Matt's solution doesn't work:

I don't use the Image Cropper data type much - you might try swapping that out for a 'Media Picker'.

The way I tend to approach this is add crops to the standard Image Cropper data type that ships with Umbraco. Then use a Media Picker for the actual data type. Then my above answers should work for you.

Copy Link
Steven Applegate 18 posts 178 karma points

Nov 16, 2017 @ 23:51

0

Hey Matt, yep that worked!

Thanks for the help everybody!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?