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 1350 posts 4460 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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies