<p>With Craft CMS 3, focal points are built into the Image Editor.</p>

<blockquote>
  <p><em>To launch the Image Editor, double-click on an image (either on the Assets page or from an Assets field) and click on the “Edit” button in the top-right of the image preview area in the HUD. Alternatively, you can select an asset on the Assets page and then choose “Edit image” from the task menu (gear icon).</em></p>
</blockquote>

<p><a href="https://docs.craftcms.com/v3/assets.html#focal-points" rel="nofollow noreferrer"><em>more info</em></a> </p>

<hr>

<p>Here's how you could use the asset's focal point in your code:</p>

<pre><code>Check if image has a user-defined focal point:
{% if image.hasFocalPoint %}

Get the focal point values:
{{ image.focalPoint.x }} / {{ image.focalPoint.y }}

Get the focal point values as CSS (e.g. for use in the object-position value):
{{ image.getFocalPoint(asCss=true) }}
</code></pre>

<hr>

<p>I think in Craft CMS 2, these two plugins were widely used:</p>

<p><a href="https://github.com/aelvan/FocalPointField-Craft" rel="nofollow noreferrer">Focal Point Field</a><br>
<a href="https://github.com/smcyr/Craft-FocusPoint" rel="nofollow noreferrer">Focus Point</a></p>

CC BY-SA 4.0
2019-05-21T07:34:05.183Z
Thanks for your comment. Please see the reworded question with an illustration. I know about the built in focal point functionality, but that doesn't seem to give me what I want.
nitech
CC BY-SA 4.0
2019-05-20T14:15:04.623Z
2019-05-20T14:15:04.623Z
Jalen Davenport
<p>I would like to let the editor of a specific entry select the focal point and cropped area each time she selects an asset for an asset field. </p>

<p>How can I achieve that? </p>

<p>I know about the built in focal point function in Craft CMS 3 that lets me edit one asset and set a focal point - but what I want is: </p>

<ol>
<li>Let the user select focal point each time an asset is selected</li>
<li>If the asset field has a fixed aspect ratio, let the user select specifically which portion of the image should become the cropped version.</li>
</ol>

<p>Like this: </p>

<p><a href="https://i.sstatic.net/BGR18.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/BGR18.png" alt="Description of how I would like the crop to be performed"></a></p>

<p>I found a plugin called <a href="https://buzzingpixel.com/software/ansel-craft/documentation" rel="nofollow noreferrer">Ansel</a>, which seems to let me do what I want. My question is if there is another way - or built in way to achieve what I want? </p>

CC BY-SA 4.0
2019-08-08T07:02:15.453Z
I'll review this question again when I've tested out Ansel.
nitech
<assets>
Plugin that lets user select focal point/cropped area
# Plugin that lets user select focal point/cropped area

(Asked by: username_0 on 2019-05-20)

I would like to let the editor of a specific entry select the focal point and cropped area each time she selects an asset for an asset field.

How can I achieve that?

I know about the built in focal point function in Craft CMS 3 that lets me edit one asset and set a focal point - but what I want is:

1. Let the user select focal point each time an asset is selected
2. If the asset field has a fixed aspect ratio, let the user select specifically which portion of the image should become the cropped version.

Like this:

[![Description of how I would like the crop to be performed](https://i.sstatic.net/BGR18.png)](https://i.sstatic.net/BGR18.png)

I found a plugin called [Ansel](https://buzzingpixel.com/software/ansel-craft/documentation), which seems to let me do what I want. My question is if there is another way - or built in way to achieve what I want?

**Tags:** assets

> **Comments:**
> **username_0**: I'll review this question again when I've tested out Ansel.  

---

## 1 answers

### Answer by username_1 on 2019-05-20. Score: 3

With Craft CMS 3, focal points are built into the Image Editor.

To launch the Image Editor, double-click on an image (either on the Assets page or from an Assets field) and click on the “Edit” button in the top-right of the image preview area in the HUD. Alternatively, you can select an asset on the Assets page and then choose “Edit image” from the task menu (gear icon).

more info 

Here's how you could use the asset's focal point in your code:
Check if image has a user-defined focal point:
{% if image.hasFocalPoint %}

Get the focal point values:
{{ image.focalPoint.x }} / {{ image.focalPoint.y }}

Get the focal point values as CSS (e.g. for use in the object-position value):
{{ image.getFocalPoint(asCss=true) }}


I think in Craft CMS 2, these two plugins were widely used:
Focal Point Field
Focus Point

> **Comments:**
> **username_0**: Thanks for your comment. Please see the reworded question with an illustration. I know about the built in focal point functionality, but that doesn't seem to give me what I want.  

---

