Question: how do you extend or create your own output directive?

[davedbase]

I was wondering if there was an example of how to properly extend or add your own output directive? Better yet a way to add into metadata would be great. Thanks!

[davedbase]

Hmmm, I've tried a few variations but the structure isn't totally clear to me. Would be wonderful and super helpful if someone could supply a snippet, I'd be happy to populate the https://github.com/JonasKruckenberg/imagetools/blob/main/docs/guide/extending.md#custom-output-formats section which is marked todo.

Thanks!

[zerodevx]

This may be helpful: https://github.com/zerodevx/svelte-img/blob/master/src/lib/vite.js

Here, I created a custom ?run directive to handle a few things:

• generate a base64 LQIP;
• output only relevant metadata;
• allow directives to be overridden via query params

[davedbase]

@zerodevx thanks for that! It was extremely helpful as your example got me going! I noticed that it outputs an array with the original and the lqip version:

// Current output
[
  {
    width: 1000,
    height: 1000,
    src: '/@imagetools/14b7840c19b88447113dfaa94a7e0e4912ae079e'
  },
  {
    width: 500,
    height: 500,
    src: '/@imagetools/a7d32f3d2c03ffed0a9fb975d2277aa0307eb061'
  }
]

// My target output
{
  width: 1000,
  height: 1000,
  myMetaValue: "something goes here",
  src: '/@imagetools/14b7840c19b88447113dfaa94a7e0e4912ae079e'
}

I need to keep the original object structure, matter of fact my solution just adds a value to the output object. I've played with the sample you provided and I don't understand how it becomes an array.

If you don't mind, I'd appreciate some insight/direction. I suspect it's happening in resolveConfigs but it's unclear what that function is doing exactly.

[zerodevx]

What's your use-case, expected input and output? Depending on your requirements, you might not need a custom resolveConfigs() at all.

[davedbase]

@zerodevx thanks for getting back to me :-)

I basically need to run the image through an analyzer and return some metadata to the same object. So basically I'd like to import the image like so:

import myimage from "~/assets/myimg.jpg?mycustommeta&meta=height;width";
import myimage from "~/assets/myimg.jpg?meta=height;width;mycustommeta";

Either of the options above would work. The expected output I'm hoping for would be:

{
  width: 1000,
  height: 1000,
  mycustommeta: "the computed value that my custom meta provides",
  src: '/@imagetools/14b7840c19b88447113dfaa94a7e0e4912ae079e'
}

Basically I wont need to edit the image, I just want to append to the object that it returns. Your example seems to return an array with the original path and the lqip image. I'm just doing meta extraction which should be a lot simple.

Thank you so much.