ascorbic / unpic

Universal image CDN translator
https://unpic.pics/lib
280 stars 31 forks source link

Add `position` prop to support all Builder params #128

Open thomkrupa opened 4 months ago

thomkrupa commented 4 months ago

Hey,

First of all, fantastic work on the unpic library.

I would love to have option to set position param, it's especially useful for setting better crop.

https://www.builder.io/c/docs/image-api

Thanks!

thomkrupa commented 4 months ago

Can you support more params? We deliberately just support the most common params that are shared between all CDNs. If you need more params then you can use the CDN-specific API directly.

I think position/crop is a pretty important prop, but I think is ok not to add it as official prop to keep the base simple.

@ascorbic what about a good way to extend props/add customs for transformers? Currently it's not that obvious. Something like:

const url = transformUrl(
  {
    URL: "...",
    width: 800,
    height: 600,
    cdn: "builder",
    customSearchParams: {
       position: "left top"
    }
  },
);

Right now, I pass those custom params to the URL, like this:

<Image src={imageSrc + "?position=left%20top"} />

It works. I know I can build a custom component for this, but it would be cool if the official component could look like this:

<Image
  src={imageSrc}
  customSearchParams={{
    position: "left top"
  }}
/>