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.
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
James
P.S. I typed this from memory so I might have missed a step or misspelled something.
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>
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.
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?
Hi Joey,
You can access the property via the PublishedContent API
https://our.umbraco.org/documentation/reference/querying/umbracohelper/
You should be able to do something like:
Where
idis the identifier for the media file in the CMS.ImageCropDataSethas a member property calledFocalPointwhich is of typeImageCropFocalPoint. That in-turn hasLeftandTopproperties which represent your focal point.Hope that helps
James
P.S. I typed this from memory so I might have missed a step or misspelled something.
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:
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.
Usings:
Code:
is working on a reply...