<p>It's probably just a drop down that sets the crop position setting in the image transform parameter string. </p>

<p>See this: <a href="https://craftcms.com/docs/image-transforms#defining-transforms-in-your-templates" rel="nofollow">https://craftcms.com/docs/image-transforms#defining-transforms-in-your-templates</a></p>

CC BY-SA 3.0
2015-12-03T18:13:05.377Z
Hi Steve, thanks for the link! any thoughts on how best to create it? Does the following 'position' attribute accept multiple values for crop position? `{% set thumb = {
    mode: 'crop',
    width: 100,
    height: 100,
    quality: 75,
    position: 'top-center'
} %}`
RDMD
CC BY-SA 3.0
2015-12-03T19:38:22.143Z
You might need to adjust, but something like this ```{% set cropPosition  = block.imageCropPositionField %}
{% set imageParams = {mode: 'crop', width: 100, height: 100, quality: 75, position: cropPosition} %}
{% set image = block.imageAsset.first() %}
{% if image %}
    <img src="{{ image.url(imageParams) }}">
{% endif %}```
Steve Adams
CC BY-SA 3.0
2015-12-03T13:51:07.960Z
2015-12-03T13:51:07.960Z
Steve Adams
<p>The content builder is very nice. I implemented this code in my project:</p>

<pre><code>{% for image in content.image %}
    {% set imageTransform = { 
        width: 1000, 
        height: 700, 
        mode: 'crop', 
        position: content.focalpoint 
    } %}
    &lt;img src="{{ image.getUrl(imageTransform) }}" alt="{{ image.title }}"&gt;
{% endfor %}
</code></pre>

<p>Thanks to: <a href="http://craftcookbook.net/recipes/120" rel="nofollow">http://craftcookbook.net/recipes/120</a></p>

CC BY-SA 3.0
2016-02-20T08:01:47.570Z
2016-02-20T08:01:47.570Z
Martijn La Feber
<p>I was just checking out the <a href="https://craftcms.com/news/ap-vector-case-study" rel="nofollow noreferrer">AP insights case study</a>:
I came across the LiveView Editor screenshot. I see an inline Image Transform Crop field. What is the method to add this crop field ?</p>

<p><a href="https://i.sstatic.net/Txw3x.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Txw3x.jpg" alt="enter image description here"></a></p>

<image-transforms>
Image Transform as a Field
# Image Transform as a Field

(Asked by: username_0 on 2015-12-03)

I was just checking out the [AP insights case study](https://craftcms.com/news/ap-vector-case-study):
I came across the LiveView Editor screenshot. I see an inline Image Transform Crop field. What is the method to add this crop field ?

[![enter image description here](https://i.sstatic.net/Txw3x.jpg)](https://i.sstatic.net/Txw3x.jpg)

**Tags:** image-transforms


---

## 2 answers

### Answer by username_1 on 2015-12-03. Score: 3 | Accepted answer

It's probably just a drop down that sets the crop position setting in the image transform parameter string.

See this: <https://craftcms.com/docs/image-transforms#defining-transforms-in-your-templates>

> **Comments:**
> **username_0**: Hi Steve, thanks for the link! any thoughts on how best to create it? Does the following 'position' attribute accept multiple values for crop position? `{% set thumb = {     mode: 'crop',     width: 100,     height: 100,     quality: 75,     position: 'top-center' } %}`  
> **username_1**: You might need to adjust, but something like this ```{% set cropPosition  = block.imageCropPositionField %} {% set imageParams = {mode: 'crop', width: 100, height: 100, quality: 75, position: cropPosition} %} {% set image = block.imageAsset.first() %} {% if image %}     <img src="{{ image.url(imageParams) }}"> {% endif %}```  

---

### Answer by username_2 on 2016-02-20. Score: 1

The content builder is very nice. I implemented this code in my project:
{% for image in content.image %}
    {% set imageTransform = { 
        width: 1000, 
        height: 700, 
        mode: 'crop', 
        position: content.focalpoint 
    } %}
    
{% endfor %}

Thanks to: http://craftcookbook.net/recipes/120


---

