Copied to clipboard

Flag this post as spam?

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


  • Sabin Regmi 13 posts 93 karma points
    Sep 28, 2016 @ 09:38
    Sabin Regmi
    0

    Using umbraco Image cropper, Focal point does not reflect on page

    Hi all,

    I have created four properties for responsive image. I have using cropper on these properties on cms. And I accessed these pictures as:

    var megaImageCrops = Newtonsoft.Json.JsonConvert.DeserializeObject<Umbraco.Web.Models.ImageCropDataSet>(mega.GetPropertyValue<string>("umbracoFile"));
    var megaImageUrl = megaImageCrops.Src.GetCropUrl(imageCropMode: Umbraco.Web.Models.ImageCropMode.Pad);
    
    var largeImageCrops = Newtonsoft.Json.JsonConvert.DeserializeObject<Umbraco.Web.Models.ImageCropDataSet>(large.GetPropertyValue<string>("umbracoFile"));
    var largeImageUrl = largeImageCrops.Src.GetCropUrl(imageCropMode: Umbraco.Web.Models.ImageCropMode.Pad);
    
     var mediumImageCrops = Newtonsoft.Json.JsonConvert.DeserializeObject<Umbraco.Web.Models.ImageCropDataSet>(medium.GetPropertyValue<string>("umbracoFile"));
     var mediumImageUrl = mediumImageCrops.Src.GetCropUrl(imageCropMode: Umbraco.Web.Models.ImageCropMode.Pad);
    
     var smallImageCrops = Newtonsoft.Json.JsonConvert.DeserializeObject<Umbraco.Web.Models.ImageCropDataSet>(small.GetPropertyValue<string>("umbracoFile"));
     var smallImageUrl = smallImageCrops.Src.GetCropUrl(imageCropMode: Umbraco.Web.Models.ImageCropMode.Pad);
    
    
    <source srcset="@megaImageUrl" media="(min-width: 1200px)">
    <source srcset="@largeImageUrl" media="(min-width: 922px)">
    <source srcset="@mediumImageUrl" media="(min-width: 768px)"> 
    <source srcset="@smallImageUrl" media="(max-width: 767px)">
    <img src="@megaImageUrl" alt="" />
    

    where mega, large, medium, and small holds content Id of respective images.

    yeah its working fine, and display respective images.

    My point is, even i set a focal point on images from CMS, it does not reflects on page.

    Some one here to help me?

    Thanks.

    Sabin Regmi

  • Steve Morgan 1345 posts 4452 karma points c-trib
    Sep 28, 2016 @ 16:14
    Steve Morgan
    0

    Hi,

    Not quite sure what you're doing decoding the JSON manually.. have you created crop aliases on your Image cropper?

    I'd think the best way is something like:

    megaImageUrl = curItem.GetCropUrl("imageDocAlias", "MegaCropAlias");
    largeImageUrl = curItem.GetCropUrl("imageDocAlias", "LargeCropAlias");
    mediumImageUrl = curItem.GetCropUrl("imageDocAlias", "MediumCropAlias");
    

    More details here: https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/image-cropper

Please Sign in or register to post replies

Write your reply to:

Draft