Copied to clipboard

Flag this post as spam?

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

  • Joey Kincer 51 posts 83 karma points
    Nov 20, 2016 @ 06:14
    Joey Kincer

    Image Focal Point question

    So I just learned about the image Focal Point feature this evening and how it's used for the Umbraco 7 Image Cropper.

    I was wondering if there was a way to access the focal point coordinate values in general without using the Image Cropper type. (e.g. myImage.umbracoFocalPoints or something like that?)

    The reason is, I want to use CSS3 rotation animation on some images, but I don't want the axis of rotation to be in the center. I can move the center axis around using the CSS3 transform-origin property. But rather than hard-code the coordinates in the stylesheet, I would like to be able to access the image focal point values and use those to set the transform-origin property. That way I can control where the center of rotation is just by moving the blue dot on the images in the Media section.

    Is this possible?

  • James Jackson-South 489 posts 1747 karma points c-trib
    Nov 21, 2016 @ 04:43
    James Jackson-South

    Hi Joey,

    You can access the property via the PublishedContent API

    You should be able to do something like:

    ImageCropDataSet crops = UmbracoHelper.TypedMedia(id)

    Where id is the identifier for the media file in the CMS. ImageCropDataSet has a member property called FocalPoint which is of type ImageCropFocalPoint. That in-turn has Left and Top properties which represent your focal point.

    Hope that helps


    P.S. I typed this from memory so I might have missed a step or misspelled something.

  • Joey Kincer 51 posts 83 karma points
    Nov 23, 2016 @ 08:57
    Joey Kincer

    Thanks James! That was a great starting point.

    There was some trial & error involved, but finally got it working. I had to open up an Umbraco build in Visual Studio to figure out what reference to use (Umbraco.Web.Models) since this code was placed directly in a template. Also kept getting reference errors trying to use UmbracoHelper.TypedMedia so used Umbraco.Media instead.

    Since the crop values were being returned as a decimal portion percentages, I had to multiply by the image's width and height properties to get the exact coordinates.

    Here's a simplified version in case anyone else wants to use the "blue dot" to get the origin coordinates for CSS animation:

    @using Umbraco.Web.Models
    var imageid = image.Id;
    var imagewidth = Convert.ToInt32(image.umbracoWidth);
    var imageheight = Convert.ToInt32(image.umbracoHeight);
    var crops = Umbraco.Media(imageid).GetPropertyValue<ImageCropDataSet>("umbracoFile");
    var originleft = Math.Floor(imagewidth * crops.FocalPoint.Left).ToString();
    var origintop = Math.Floor(imageheight * crops.FocalPoint.Top).ToString();
    string originCSS = originleft + "px " + origintop + "px";
    <text>div.image { transform-origin: @(originCSS); }</text>
  • Niels Lyngsø 21 posts 99 karma points hq
    Jun 28, 2017 @ 13:16
    Niels Lyngsø

    Thanks for this thread, the only place I was able to get some info on how to get the focal point.

    Though I did have some trouble with the solution from Joey it help me build a solution that works, so here is my code for anyone else who has trouble with this topic.

    Btw. I think the issue that this fixed is related to some variations of media types.

    The code below only creates the focalPointStr if there is focalPoint data available. The NumberFormatInfo helps print the values with a dot instead of coma for decimals.


    @using Umbraco.Web.Models;
    @using System.Globalization;


            int imageID = Model.Content.GetPropertyValue<int>("image");
            var imageModel = Umbraco.Media(imageID);
            string imageURL = imageModel.umbracoFile.src;
            ImageCropDataSet crops = imageModel.GetPropertyValue<ImageCropDataSet>("umbracoFile");
            string focalPointStr = "";
            if (crops != null && crops.FocalPoint != null) {
                decimal left = crops.FocalPoint.Left;
                decimal top = crops.FocalPoint.Top;
                NumberFormatInfo nfi = new NumberFormatInfo();
                nfi.NumberDecimalSeparator = ".";
                focalPointStr = "data-focal=\""+left.ToString(nfi)+"x"+top.ToString(nfi)+"\" ";
Please Sign in or register to post replies

Write your reply to: