Save field data in object form

The CMS Questions
1

I store x and y values in a custom field, which are passed as an array.

Kirby::plugin('fb/image-crop-field', [
    'fields' => [
        'imagecropfield' => [
            'props' => [
                'label' => function (string $label = null) {
                    return $label ?? 'Image Crop Field';
                },
                'value' => function ($value = null) {
                    return $value;
                },
                'image' => function ($image = null) {
                    return $image;
                }
            ],
            'save' => function ($value = null) {
                if ($value && is_array($value)) {
                    $json = [
                        'x' => (float)$value['x'],
                        'y' => (float)$value['y'] 
                    ];

                    return $json;
                }
                return null;
            }
        ]
    ]
]);

Kirby saves the data in this form:

----

Crop:

x: 0.141745
y: 0.00678

----

Under value I get the content back as plain text. How do I stay in the object?

2

You need the value under computed rather than props. Not clear how you input that data from the code above, maybe take a look at the source code of the object field for ideas.

3

This is how I input the data

panel.plugin('fb/image-crop-field', {
  fields: {
    imagecropfield: {
      props: {
        label: String,
        value: Object
      },
      data() {
        return {
          crop: this.value || { x: 0, y: 0 }
        };
      },
      methods: {
         onMouseDown(event) {
         const onMouseUp = () => {
            const croppedValues = {
              x: parseFloat(this.crop.x.toFixed(6)),
              y: parseFloat(this.crop.y.toFixed(6))
            };

            this.$emit('input', croppedValues);
          };
      }
      }
});
5

I took the fields plugin crash course. There’s a perfect explanation how to store objects:

That was the solution to the problem. I will implement it with YAML.

I have one last question. If I get dynamic input in the blueprint e.g. page.image.url. How do I resolve this in my own field, as it is automatically resolved in the label, for example?

6

$this->model->toSafeString($value) converts query language