<p>Your issue is that Craft (or rather, Imager) is not treating your <code>entry.cropPosition</code> Dropdown field as a <em>string</em>; you're essentially passing the actual <code>DropdownFieldType</code> model (an array like object).</p>

<p>To fix it, replace</p>

<pre><code>position: entry.cropPosition
</code></pre>

<p>with </p>

<pre><code>position: entry.cropPosition.value
</code></pre>

<p>Also, you might want to add a default value to the field, in case you have entries without a value set:</p>

<pre><code>position: entry.cropPosition.value|default('50% 50%')
</code></pre>

<p>Full, corrected code:</p>

<pre><code>{% set transformedImages = craft.imager.transformImage(entryImage, [
    { width: 1680, jpegQuality: 75 },
    { width: 1080, jpegQuality: 75 },
    { width: 680, jpegQuality: 70 },
    { width: 480, jpegQuality: 70 }
  ], { ratio: 21/9, position: entryImage.cropPosition.value|default('50% 50%') }) %}
</code></pre>

<p>Also, make sure you're not wrapping <code>entryImage.cropPosition</code> in quotes (i.e. <code>'entryImage.cropPosition'</code>), which you do in your example (you probably don't have this in your actual code, based on the error message you're seeing). If you wrap the value in quotes, you're actually passing Imager the <em>string</em> <code>"entryImage.cropPosition"</code>, not the actual value for the field.</p>

CC BY-SA 3.0
2017-09-10T12:37:19.853Z
Beautifully and clearly explained, thank you so much!
rjdvsk
CC BY-SA 3.0
2017-09-09T00:09:39.697Z
2017-09-09T00:19:37.690Z
2017-09-09T00:19:37.690Z
Mats Mikkel Rummelhoff
<p>If the value of <code>imageCrop</code> is a string in the correct format (ie <code>50% 50%</code>, <code>0% 0%</code>, or similar), this should do it:</p>

<pre><code>{% set entryImage = entry.pageHeader.first() %}
{% set imageCrop = entryImage.cropPosition %}

{% set transformedImages = craft.imager.transformImage(entryImage, [
    { width: 1680, jpegQuality: 75 },
    { width: 1080, jpegQuality: 75 },
    { width: 680, jpegQuality: 70 },
    { width: 480, jpegQuality: 70 }
  ], { ratio: 21/9, position: imageCrop }) %}
</code></pre>

CC BY-SA 3.0
2017-09-08T18:23:00.663Z
Yeah that's what I thought, but now I just get this error `Illegal offset type in isset or empty` . The values when I've set them in Craft are the same as `0% 0%`, `0% 50%` and so on... really scratching my head here... I'm sure it's something simple and I need to step away from it for a day.
rjdvsk
CC BY-SA 3.0
2017-09-08T13:56:37.003Z
2017-09-08T13:56:37.003Z
André Elvan
<p>I have a simple dropdown attached to each asset that allows the user to select the desired crop position (in %, so '0% 0%' , '0% 50%' , and so on). </p>

<p>In my twig template I have this inside a for loop</p>

<pre><code>{% set entryImage = entry.pageHeader.first() %}
{% set imageCrop = entryImage.cropPosition %}

  {% set transformedImages = craft.imager.transformImage(entryImage, [
        { width: 1680, jpegQuality: 75 },
        { width: 1080, jpegQuality: 75 },
        { width: 680, jpegQuality: 70 },
        { width: 480, jpegQuality: 70 }
      ], { ratio: 21/9, position: 'entryImage.cropPosition' }) %}
</code></pre>

<p>As you can see, I've set the crop position inside the imageCrop variable and when I print it to screen the correct value is there. </p>

<p>But how the hell do I get the value that is set inside that imageCrop variable into my transformedImages array? I keep getting errors like: <code>Undefined offset: 1</code>.</p>

<plugin-imager><responsive-images>
Setting Imager crop position dynamically
# Setting Imager crop position dynamically

(Asked by: username_0 on 2017-09-08)

I have a simple dropdown attached to each asset that allows the user to select the desired crop position (in %, so '0% 0%' , '0% 50%' , and so on). 
In my twig template I have this inside a for loop
{% set entryImage = entry.pageHeader.first() %}
{% set imageCrop = entryImage.cropPosition %}

  {% set transformedImages = craft.imager.transformImage(entryImage, [
        { width: 1680, jpegQuality: 75 },
        { width: 1080, jpegQuality: 75 },
        { width: 680, jpegQuality: 70 },
        { width: 480, jpegQuality: 70 }
      ], { ratio: 21/9, position: 'entryImage.cropPosition' }) %}

As you can see, I've set the crop position inside the imageCrop variable and when I print it to screen the correct value is there. 
But how the hell do I get the value that is set inside that imageCrop variable into my transformedImages array? I keep getting errors like: Undefined offset: 1.

**Tags:** plugin-imager, responsive-images


---

## 2 answers

### Answer by username_1 on 2017-09-09. Score: 2 | Accepted answer

Your issue is that Craft (or rather, Imager) is not treating your entry.cropPosition Dropdown field as a string; you're essentially passing the actual DropdownFieldType model (an array like object).
To fix it, replace
position: entry.cropPosition

with 
position: entry.cropPosition.value

Also, you might want to add a default value to the field, in case you have entries without a value set:
position: entry.cropPosition.value|default('50% 50%')

Full, corrected code:
{% set transformedImages = craft.imager.transformImage(entryImage, [
    { width: 1680, jpegQuality: 75 },
    { width: 1080, jpegQuality: 75 },
    { width: 680, jpegQuality: 70 },
    { width: 480, jpegQuality: 70 }
  ], { ratio: 21/9, position: entryImage.cropPosition.value|default('50% 50%') }) %}

Also, make sure you're not wrapping entryImage.cropPosition in quotes (i.e. 'entryImage.cropPosition'), which you do in your example (you probably don't have this in your actual code, based on the error message you're seeing). If you wrap the value in quotes, you're actually passing Imager the string "entryImage.cropPosition", not the actual value for the field.

> **Comments:**
> **username_0**: Beautifully and clearly explained, thank you so much!  

---

### Answer by username_2 on 2017-09-08. Score: 2

If the value of imageCrop is a string in the correct format (ie 50% 50%, 0% 0%, or similar), this should do it:
{% set entryImage = entry.pageHeader.first() %}
{% set imageCrop = entryImage.cropPosition %}

{% set transformedImages = craft.imager.transformImage(entryImage, [
    { width: 1680, jpegQuality: 75 },
    { width: 1080, jpegQuality: 75 },
    { width: 680, jpegQuality: 70 },
    { width: 480, jpegQuality: 70 }
  ], { ratio: 21/9, position: imageCrop }) %}

> **Comments:**
> **username_0**: Yeah that's what I thought, but now I just get this error `Illegal offset type in isset or empty` . The values when I've set them in Craft are the same as `0% 0%`, `0% 50%` and so on... really scratching my head here... I'm sure it's something simple and I need to step away from it for a day.  

---

