Setting Imager crop position dynamically

Question

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.

Answer 1

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.

Answer 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 }) %}