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.
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" />
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?
Change ImageCropMode with ImageCropper has no effect
When i change the imageCropMode it shows no effect
@using Umbraco.Web.Models; //using for imagecropmode
it still show's mode=crop in the url
http://localhost:55161/media/45542/logo_primeflora_wit.png?anchor=center&mode=crop&rnd=130427208580000000&width=100&height=40&quality=65
What i'am doing wrong?
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:
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?
Also you are missing the model from the deserilize
Also make sure you have added the usings:
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:
Thnx, Jeavon.
With the below code, i get the image the way i want.
The way bedrijf was set:
@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...