Simple Way to Let Clients Set Crop Position for Images
Problem
When transforming and cropping images you’re usually forced to choose one crop position for all images used in a certain place in your template.
This could yield poor results in images where the focal point is very different from your predefined crop position. Here’s a simple solution for letting the client choose this on a per-image basis.
Solution
First, make a new field (I call it focalPoint) of fieldtype “Dropdown”. In dropdown options, add all the possible positions as specified in the Craft documentation for image transforms. Let the values be the position value (i.e “center-center”), and make the label whatever you want the client to see.
Add the field to your assets field layout. Now, when the client edits an asset he can choose position from the dropdown.
Given an entry with a field named “images”, you can now do this in your template:
{% for image in entry.images %}
{% set imageTransform = { width: 600, height: 300, mode: 'crop', position: image.focalPoint } %}
<img src="{{ image.getUrl(imageTransform) }}">
{% endfor %}If you’re building a responsive site, and do client side cropping, you could also use image.focalPoint as a class on a container holding the image, and adjust the image position in CSS.
Submitted by André Elvan on 1st February, 2017