Builder.io

Unpic can transform images with Builder.io using the builder.io 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 builder.io provider from the unpic package using a subpath import:

import { transform } from 'unpic/providers/builder.io';

If using an Unpic component, you can optionally pass custom operations and options to the component using an object with a builder.io key. This is lets you use extra features supported by Builder.io, 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={{
      "builder.io": {
      // builder.io options here
      }
  }}
  operations={{
      "builder.io": {
      // builder.io 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/builder.io';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  transformer={transformer}
/>

Types

The builder.io provider supports the following arguments:

Options

The builder.io provider does not support any extra configuration options.

Operations

fit

Type: FitType

Defines how the image fits into the specified dimensions. Possible values:

• cover: Scales the image to cover the target dimensions while maintaining aspect ratio.
• contain: Scales the image to fit within the target dimensions without cropping.
• fill: Stretches the image to fill both dimensions, potentially distorting the aspect ratio.
• inside: Scales the image to fit within the target dimensions, with both sides being within the limits.
• outside: Scales the image to be fully outside the target dimensions, while maintaining aspect ratio.

position

Type: Position

Defines the cropping anchor point when resizing the image. Possible values:

• center, top, right top, right, right bottom, bottom, left bottom, left, left top.

sharp

Type: boolean

Undocumented option to enable use of sharp library. ENabled automatically when using format: "webp". Required for crop support, so is enabled by default with Unpic.

width

Type: string | number

height

Type: string | number

format

Type: (string & {}) | ImageFormat

quality

Type: string | number

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