Use thumb function in KQL query

Kirby 4 Solved ✔️
1

Hello,

i use Kirby as Headless and NUXT in the frontend.

If i use the thumb function in the query, kql still response with the org. image size and not with the resized and cropped file.

I tried different typos but non seems to be correct.

Is it not possible to use this function?

const { data } = await useKql({
  query: 'page("home")',
  select: {
    id: true,
    title: true,
    ...
    exposes: {
      query: 'page("exposes").children.listed',
      select: {
        id: true,
        title: true,
        image: {
          query: 'page.images.first',
          select: {
            thumb: {
              query: "file.thumb(1200, 1200, true)",
            },
            alt: true,
          },
          
        },
      },
    }
  },
});

I also tried:

const { data } = await useKql({
  query: 'page("home")',
  select: {
    id: true,
    title: true,
    ...
    exposes: {
      query: 'page("exposes").children.listed',
      select: {
        id: true,
        title: true,
        image: {
          query: 'page.images.first',
          select: {
            thumb: {
              query: "file.thumb([1200, 1200, true])",
            },
            alt: true,
          },
          
        },
      },
    }
  },
});

All other variants threw errors.

The response is in both cases:

{
    "thumb": {
        "extension": "jpg",
        "filename": "bildschirmfoto-2024-04-17-um-18.47.41.jpg",
        "height": 1500,
        "id": "exposes/designer-anwesen-in-traumhaftem-garten/bildschirmfoto-2024-04-17-um-18.47.41.jpg",
        "mime": "image/jpeg",
        "niceSize": "805,07 KB",
        "template": "imageExposeHead",
        "type": "image",
        "url": "http://api.rh-homes.test/media/pages/exposes/designer-anwesen-in-traumhaftem-garten/328f25d766-1713372787/bildschirmfoto-2024-04-17-um-18.47.41.jpg",
        "width": 2100
    },
    "alt": "",
    "url": "http://api.rh-homes.test/media/pages/exposes/designer-anwesen-in-traumhaftem-garten/328f25d766-1713372787/bildschirmfoto-2024-04-17-um-18.47.41.jpg"
}

I also changed the size of the thumb to prevent, that the thumb has already been created.

Thanks in advance.

2

I don’t think those do anything.

Use crop()

I’m guessing that true means you want a crop. The best function doing that would be crop:

              query: "file.crop(1200, 1200)",

Why thumb() doesn’t work

In the PHP api the thumb method would be used as:

$file->thumb(['width' => 1200, 'height' => 1200, 'crop' => true]);

But the query language doesn’t support associative arrays (for now). So, effectively, you can’t use the thumb() method in KQL.
If you absolutely need to use the thumb() method because you need options that aren’t accessible otherwise, you would need to write your own File method in a plugin, and then also explicitly allow it to be used in KQL:
/site/plugins/site/index.php

<?php 

Kirby::plugin('site/methods', [
  'fileMethods' => [
    /**
     * @kql-allowed
     */
    'myThumb' => function ($width, $height, $crop) {
      return $this->thumb([
        'width' => $width,
        'height' => $height,
        'crop' => $crop,
         // other stuff you need
      ]);
    }
  ]
]);

and then use it in the query like this:

              query: "file.myThumb(1200, 1200, true)",
1 Like
3

Thanks rasteiner, the Plugin will work. :ok_hand: