Position syntax using FPF with Imager and Eager Loaded Images

[jayhlee]

I'm having trouble getting the correct syntax for my FPF field when I'm using it with Imager with eager-loaded images. Specifically, I'm not sure what follows "position: " because this doesn't seem to work:

{% set image = entry.projectFeatureImage[0] ?? null %}
{% set transformedImages = craft.imager.transformImage(image, [
	{ width: 1200 },
	{ width: 720 },
	{ width: 290 }
	], {
		format: 'jpg',
		ratio: 3/4,
		allowUpscale: false,
		mode: 'crop',
		position: image.focalPointField,
		interlace: true
	}) %}

When I test out {{ image.focalPointField }}, it outputs the correct percentages that I set for my image positions (e.g. '30% 40%'). However, it doesn't seem to work within the Imager code syntax. Any guidance would be great!

[aelvan]

That looks correct to me. What's the error you're seeing?

[jayhlee]

I get an "Undefined offset: 1" PHP notice. Specifically, it says the error is at:

craft/plugins/imager/services/ImagerService.php(914), which is... list($leftOffset, $topOffset) = explode(' ', $position);

[aelvan]

Weird. Since you're mentioning eager loading, does it work if you don't eager-load?

[jayhlee]

Just tried using it without the eager loading, but I still get the same error thrown. Here's what it's showing.

[aelvan]

There must be something wrong with the value that is being passed in, that space in '30% 40%' maybe isn't a space? Is '30% 40%' the default value you've assigned to the field? Try erasing the value, write it again, save, and check again.

Also, what happens if you replace the position part with position: image.focalPointField ?? '50% 50%',?

[lukakemperle]

+1

[jayhlee]

@aelvan I tried removing the positions, but I get the same error. I also replaced the position to what you wanted me to try out, but I get the same error.

[aelvan]

Can you try opening up craft/plugins/imager/services/ImagerService.php, right before line 914 add Craft::dd($position), and let me know what the output is.

Is there only this one image on the page, or several? If there're more than one, can you try to make a minimal test case with only one and see if you still get the error.

[jayhlee]

@aelvan Hi Andre, Sorry about the late reply. I reduced the images down to one on the page and added the line of code as you instructed. Here's the error message:

[ghost]

Any progress on this? I'm getting the same error.

[aelvan]

Yeah, this keeps popping up from time to time, and the reason is always that an invalid value is being passed. I'd check (and double check) that the default values that is set in the config and on the field(s), are correct. It's suppose to be xx% xx%, with a plain space inbetween. No dash, comma, invisible utf-8 space thingy, or whatever...

[ghost]

Ah, I see what the issue is. You HAVE to input a default value for the FocalPoint field. For some reason the default value FocalPoint says it will output doesn't get outputted if you leave it blank. So looping over an image array with some images having a focal point and some not was causing the error. As soon as I added a default value (50% 50%) to my field everything worked fine.

[aelvan]

Ok, that sounds like a bug. I'll have a look at it.

[samlous]

I got the same problem. While waiting for a fix, is there a simple code solution I can use, instead of looping through all images and giving them a default value?

[ghost]

@samlous All you have to do is put the default value in the Focal Point Field when you create it, not every time you insert images in the code. Once that default value is there you should be fine.