Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-03T18:13:05.377Z
Answers.Text: 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'
  } %}`
Answers.UserDisplayName: RDMD
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-03T19:38:22.143Z
Answers.Text: 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 %}```
Answers.UserDisplayName: Steve Adams
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-03T13:51:07.960Z
Answers.LastActivityDate: 2015-12-03T13:51:07.960Z
Answers.UserDisplayName: Steve Adams
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-20T08:01:47.570Z
Answers.LastActivityDate: 2016-02-20T08:01:47.570Z
Answers.UserDisplayName: Martijn La Feber
Body: <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>
  
Tags: <image-transforms>
Title: Image Transform as a Field
ThreadText: # 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 username_1, 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 
      } %}
      <img src="{{ image.getUrl(imageTransform) }}" alt="{{ image.title }}">
  {% endfor %}
  
  ```
  
  Thanks to: <http://craftcookbook.net/recipes/120>
  
  
  ---
  
  