Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Wesley de Roo 38 posts 142 karma points
    Apr 23, 2014 @ 11:40
    Wesley de Roo
    0

    Change ImageCropMode with ImageCropper has no effect

    When i change the imageCropMode it shows no effect

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

    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?

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Apr 23, 2014 @ 11:43
    Jan Skovgaard
    0

    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

  • Wesley de Roo 38 posts 142 karma points
    Apr 23, 2014 @ 11:54
    Wesley de Roo
    0

    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?

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Apr 23, 2014 @ 12:05
    Jan Skovgaard
    0

    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

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Apr 23, 2014 @ 12:27
    Jeavon Leopold
    1

    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

  • Wesley de Roo 38 posts 142 karma points
    Apr 23, 2014 @ 12:35
    Wesley de Roo
    0

    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?

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Apr 23, 2014 @ 12:43
    Jeavon Leopold
    0

    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

  • Wesley de Roo 38 posts 142 karma points
    Apr 23, 2014 @ 12:54
    Wesley de Roo
    0

    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")" />

    }

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Apr 23, 2014 @ 13:21
    Jeavon Leopold
    0

    Can you show me how "bedrijf" is set?

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Apr 23, 2014 @ 13:27
    Jeavon Leopold
    100

    Also you are missing the model from the deserilize

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

    Also make sure you have added the usings:

    @using Newtonsoft.Json
    @using Umbraco.Web.Models
    
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Apr 23, 2014 @ 13:30
    Jeavon Leopold
    0

    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"));
    
  • Wesley de Roo 38 posts 142 karma points
    Apr 23, 2014 @ 14:37
    Wesley de Roo
    0

    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")" />

            }

            }

            }

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Apr 23, 2014 @ 17:59
    Jeavon Leopold
    0

    Ah perfect!

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    May 13, 2014 @ 21:47
    Jeavon Leopold
    0

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

  • Wesley de Roo 38 posts 142 karma points
    May 14, 2014 @ 09:53
    Wesley de Roo
    0

    Thnx! Jeavon!

    Tested and works.

Please Sign in or register to post replies

Write your reply to:

Draft