Hi Wesley

Are you seeing different results on the same image wether you're using Umbraco 6 or 7? Is that the issue?

Don't know if it helps but there is some documentation for the new cropper in version 7 here http://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Image-Cropper

/Jan

Hi Jan,

Thnx for your reply.

In the umbraco 6 version I could change the crop mode. In umbraco 7 it has no effect whe i set the mode in this line (in this ex. changed to Max):

<img src="@mediaItem.GetCropUrl(propertyAlias: "umbracoFile", width: 100, height: 40, imageCropMode: ImageCropMode.Max)&quality=65" alt="@mediaItem.GetPropertyValue("Name")" />

I've red the documentation, but change the crop mode is not described. I'm wondering if it already supported?

Hi Wesley

Hmm...I'm not sure - Is it a package in v6? Don't recall imageproeessor working out of the box in v6...but I could be wrong :)

All I know is that the built in cropper in v7 is based on http://jimbobsquarepants.github.io/ImageProcessor/imageprocessor.html - And as far as I know the methods from the links should all be working...not sure about the syntax though but I guess it's like the one you're using above.

/Jan

Hi Wesley,

Currently ImageCropMode.Max will not have any effect on a crop as mode=crop is needed for the cropper to be effective. If your property was a "Upload" instead of a "Cropper" it would work. However I can see this use case when you just want to resize only (not crop) but your image is contained in a Cropper, I will have a look at seeing if I can make this work. In the meantime you can use the string extension GetCropUrl on the Src to achieve it like this:

@using Newtonsoft.Json
@using Umbraco.Web.Models

var imageCrops = JsonConvert.DeserializeObject<ImageCropDataSet>(Model.Content.GetPropertyValue<string>("umbracoFile"));
var myImageUrl = imageCrops.Src.GetCropUrl(width:100, height:100, imageCropMode:ImageCropMode.Max);

<img src="@myImageUrl" />

Jeavon

For v6 we installed imageprocessor thru nuget and applied a querystring manualy after the image url for the crop. In v7 the querystring is partially generated by the function GetCropUrl. This also aplies to the cropmode, point of crop, etc. So (i gues) the only way to change the crop mode is to change it as I showed above, but it has no effect.

Perhaps a bug? and should I place it in a ticket on isseus?

Hi Wesley,

Hopefully you have seen my immediate solution above?

I am thinking that if imageCropMode is set to anything other than Crop, then it should not crop at all, I am looking into if this can be changed.

Jeavon

Hi Jeavon,

Thnx, I saw your solution.

It gives me a error on imageCrops.Src. (Does not contain a defenition and no extension method in VS).

Outputting @imageCrops shows:

{ "src": "/media/45542/logo_primeflora_wit.png", "crops": [], "focalPoint": { "left": 0.5, "top": 0.5 } } 

The images are stored in media (and no cropes are defined) and are picked by a media picker on a node.

if (bedrijf.HasValue("afbeelding")) {
        var mediaItem = Umbraco.TypedMedia(bedrijf.GetPropertyValue("afbeelding"));
var imageCrops = JsonConvert.DeserializeObject(mediaItem.GetPropertyValue("umbracoFile").ToString());
var myImageUrl = imageCrops.Src.GetCropUrl(width: 100, height: 100, imageCropMode: ImageCropMode.Max);
@imageCrops

        <img src="@mediaItem.GetCropUrl(propertyAlias: "umbracoFile", width: 100, height: 40, imageCropMode: ImageCropMode.Pad)&quality=65" alt="@mediaItem.GetPropertyValue("Name")" />

}

Can you show me how "bedrijf" is set?

I would hazard a guess that something is dynamic with bedrijf, you could cast the parameter like this, the VS should pick-up the extension:

var mediaItem = Umbraco.TypedMedia((string)bedrijf.GetPropertyValue("afbeelding"));

Thnx, Jeavon.

With the below code, i get the image the way i want.

var mediaItem = Umbraco.TypedMedia(bedrijf.GetPropertyValue("afbeelding"));
var imageCrops = JsonConvert.DeserializeObject<ImageCropDataSet>(mediaItem.GetPropertyValue<string>("umbracoFile"));
var myImageUrl = imageCrops.Src.GetCropUrl(width: 100, height: 40, imageCropMode: ImageCropMode.Pad, quality: 65);

<img src="@myImageUrl" />

The way bedrijf was set:

IPublishedContent siteRoot = Model.Content.AncestorOrSelf(2);
IPublishedContent bedrijven = siteRoot.Children().Where(x => x.DocumentTypeAlias == "Bedrijven").FirstOrDefault();
IEnumerable<IPublishedContent> bedrijvenList = bedrijven.Children().Where(x => x.HasValue("categorie")).Where(x => x.GetPropertyValue("categorie").ToString().Contains(Model.Content.Id.ToString()));

@foreach (var bedrijf in bedrijvenList)

        {

        if (bedrijf.HasValue("afbeelding"))

        {

        var mediaItem = Umbraco.TypedMedia(bedrijf.GetPropertyValue("afbeelding"));

        var imageCrops = JsonConvert.DeserializeObject<ImageCropDataSet>(mediaItem.GetPropertyValue<string>("umbracoFile"));

        var myImageUrl = imageCrops.Src.GetCropUrl(width: 100, height: 40, imageCropMode: ImageCropMode.Pad, quality: 65);

        //var mediaItem = Umbraco.TypedMedia((string)bedrijf.GetPropertyValue("afbeelding"));

        if (bedrijf.HasValue("urlWebsite"))

        {

        <a href="@bedrijf.GetPropertyValue("urlWebsite")" target="_blank" title="Visit website">

            @*<img src="@mediaItem.GetCropUrl(propertyAlias: "umbracoFile", width: 100, height: 40, imageCropMode: ImageCropMode.Pad)&quality=65" alt="@mediaItem.GetPropertyValue("Name")" />*@

            <img src="@myImageUrl" alt="@mediaItem.GetPropertyValue("Name")" />

        </a>

        }

        else

        {

            //<img src="@mediaItem.GetCropUrl(propertyAlias: "umbracoFile", width: 100, height: 40, imageCropMode: ImageCropMode.Pad)&quality=65" alt="@mediaItem.GetPropertyValue("Name")" />

            <img src="@myImageUrl" alt="@mediaItem.GetPropertyValue("Name")" />

        }

        }

        }

Ah perfect!

FYI, I fixed this in v7.1.2 so now if you specify a mode other than Crop, it returns a resize only url.

Thnx! Jeavon!

Tested and works.

is working on a reply...