Sign in Register
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

    Copy Link
  • Steve Morgan 1349 posts 4458 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

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft