Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
Hi, I'm trying out v. 8 for a bit this morning. I'm having trouble rendering cropped image urls though. I did this the other day in v.7 without issues. Has anything changed or am I missing something?
testimonial.Image is a MediaPicker and I've defined a crop called "Testimonial".
@testimonial.Image.Url renders an URL fine.
@testimonial.Image.GetCropUrl("Testimonial") renders nothing.
@Url.GetCropUrl(testimonial.Image, "Testimonial") renders nothing.
If I go and edit the crop. The image renders afterwards. It seems you dont get a default crop?
I don't see this behaviour in v. 7.
I'm using umbraco 8. How is the idea of how to solve this problem?
Probably there are better ways to do this but this is how i did it:
@if (Image != null)
<img class="img-fluid d-block" src="@Image.GetCropUrl(250,150)" alt="@Image.Name" />
thanks for the answer, it solved
I don't think this solves the question since the extension with crop alias is not working in Umbraco 8.
Thank you @Josip! That was exactly the right solution, and after seeing it, it made my error make sense.
var featuredImage = model.Value<IPublishedContent>("featuredImage").GetCropUrl(276,276)
fails because I was trying to get the image and the URL at the same time. Your example makes total sense. Get the image, then ask for it's cropUrl. :-)
var featuredImage = model.Value<IPublishedContent>("featuredImage");
<img src="@featuredImage.GetCropUrl(276,276)" class="initial-img" />
I appreciate you! Thanks
It works but i don't think this is an optimal way.
Suppose we have used a particular resolution in various pages and whenever we need to change the resolution we have to check and change everywhere that is used manually.!
Where in Umbraco 7 we only need to change the resolution in the cropper simply
It looks like a bug in V8. I've added a github issue for this. https://github.com/umbraco/Umbraco-CMS/issues/5737
I was also facing the same problem. However when I reset the focus point in each of the images it started showing.
This code works:
I can confirm that GetCropUrl with alias only works after changing the focal point for the images.
Very strange behavior :)
I agree with Christian. It works after focal point change.
Yeah I agree. I have tested this loads and like a few mentioned above the crop doesn't work unless you go into the media section click on the image and edit the crop on the image.
It didn't work like this with Umbraco 7. It seems to be a bug that has been introduced into Umbraco 8.
I think I logged a bug for this a while ago.
It's a really frustrating but. I have become reliant on the cropper with all my projects. It worked amazingly in Umbraco 7. It's sort of become unusable at the member but I might trying and follow the recommendation above and manually set this.
I was also thinking I could write an extension method to heck of there is no crop set then use a fallback setting if not. That way we might be able to get best of both worlds making this hack more useful.
I will see how it goes.
I came across this today in a site I'm migrating from 7 to 8.14.
Here is the extension method I wrote to handle it:
public static class ExtensionMethods
/// Returns the url for a named crop, if present, otherwise just returns the image src url
/// <param name="CropperValue">ImageCropperValue</param>
/// <param name="CropAlias">Alias of the desired crop</param>
/// <param name="ImageUrlGenerator">If possible, use 'Current.ImageUrlGenerator' (null works, but is obsoleted in Umbraco 8)</param>
/// <returns>Ready-to-Use Image Url</returns>
public static string GetCropOrSrcUrl(this ImageCropperValue CropperValue, string CropAlias,
IImageUrlGenerator ImageUrlGenerator = null)
var src = CropperValue.Src;
if (ImageUrlGenerator != null)
cropInfo = CropperValue.GetCropUrl(CropAlias, ImageUrlGenerator);
cropInfo = CropperValue.GetCropUrl(CropAlias);
//No crop info found, return original src
else if (cropInfo.StartsWith("?"))
//src url is missing (Umbraco 8 bug)
return src + cropInfo;
Use it in a view like this:
var imgUrl = Model.MyImageProperty.GetCropOrSrcUrl("MyCrop", Current.ImageUrlGenerator);
I ended up here, because I had the same issue as the OP. Since none of the answers seemed to solve my issue, I will post my solution to the problem.
This doesn't work:
var imageUrl = item.Value<IPublishedContent>("ImageName").GetCropUrl("ImageCropName");
Nor does this (for obvious reasons):
var image = item.Value<IPublishedContent>("ImageName");
var imageUrl = image.GetCropUrl("ImageCropName");
With explicit cast it does work:
var image = opleiding.Value<IPublishedContent>("ImageName") as MediaWithCrops;
var imageUrl = image.GetCropUrl("ImageCropName");
Notice the "as MediaWithCrops" at the end of the first line. So I wrote my own extension method:
public static string CroppedImageUrl(this IPublishedContent model, string imagePropertyName, string imageCropName)
var image = model.Value<IPublishedContent>(imagePropertyName) as MediaWithCrops;
Or like this, if you will:
public static string CroppedImageUrl(this IPublishedContent model, string imagePropertyName, string imageCropName) =>
(model.Value<IPublishedContent>(imagePropertyName) as MediaWithCrops)?.GetCropUrl(imageCropName);
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted