2

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

I found a plugin called Ansel, 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?

  • I'll review this question again when I've tested out Ansel. – nitech Aug 8 '19 at 7:02
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

| improve this answer | |
  • 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 May 21 '19 at 7:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.