Kontent.ai

Unpic can transform images with Kontent.ai using the kontent.ai provider. It can be used with Unpic framework components, or you can use the base unpic libary to generate image URLs directly.

You can import the kontent.ai provider from the unpic package using a subpath import:

import { transform } from 'unpic/providers/kontent.ai';

If using an Unpic component, you can optionally pass custom operations and options to the component using an object with a kontent.ai key. This is lets you use extra features supported by Kontent.ai, or set custom configuration options.

This example uses @unpic/astro, but the same applies to any Unpic component:

---
import { Image } from '@unpic/astro';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  options={{
      "kontent.ai": {
      // kontent.ai options here
      }
  }}
  operations={{
      "kontent.ai": {
      // kontent.ai operations here
      }
  }}
/>

In supported frameworks you can also import the base component and pass the transformer to it directly. This lets you create a custom component that doesn’t need to include and other transformer code.

---
import { Image } from '@unpic/astro/base';
import { transform } from 'unpic/providers/kontent.ai';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  transformer={transformer}
/>

Types

The kontent.ai provider supports the following arguments:

Options

The kontent.ai provider does not support any extra configuration options.

Operations

w

Type: number

Resize the image to a specified width in pixels.

h

Type: number

Resize the image to a specified height in pixels.

fit

Type: "crop" | "scale" | "clip"

Defines the fit mode to apply to the image.

rect

Type: string

Select a rectangular region of the image to process. Format: x,y,width,height as either pixels or percentages.

fp-x

Type: number

Horizontal focal point for cropping.

fp-y

Type: number

Vertical focal point for cropping.

fp-z

Type: number

Focal point zoom level, where 1 is the original size.

bg

Type: string

Background color for transparent areas. Accepts RGB or ARGB hex values.

fm

Type: ImageFormat | "gif" | "pjpg" | "png8"

Image format conversion.

q

Type: number

Quality of the output image for lossy formats (jpg, pjpg, webp).

lossless

Type: boolean | 0 | 1

Lossless compression for WebP format.

auto

Type: "format"

Automatically select the best format for the browser.

width

Type: string | number

height

Type: string | number

format

Type: ImageFormat | "gif" | "pjpg" | "png8"

quality

Type: string | number

This page is auto-generated from the kontent.ai provider types. See anything wrong or missing? Suggest a change on GitHub.