Contentstack

Unpic can transform images with Contentstack using the contentstack 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 contentstack provider from the unpic package using a subpath import:

import { transform } from 'unpic/providers/contentstack';

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

Types

The contentstack provider supports the following arguments:

Options

`baseURL`

Type: (string & {}) | "https://images.contentstack.io/" | "https://eu-images.contentstack.com/" | "https://azure-na-images.contentstack.com/" | "https://azure-eu-images.contentstack.com/"

The base URL for the images.

Operations

`fit`

Type: "crop" | "bounds"

Defines how the image fits into the specified dimensions.

`auto`

Type: "webp" | "avif"

Enables automatic format selection (usually WebP).

`format`

Type: ImageFormat | "pjpg" | "webpll" | "webply"

`disable`

Type: false | "upscale"

Disables upscaling of images. True by default.

`trim`

Type: EdgeValues

Trim an image from the edges. The value for this parameter can be given in pixels or percentage.

`orient`

Type: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8

Control the cardinal orientation of the given image

`overlay`

Type: string

Overlay an image on top of another image.

`overlay-align`

Define the position of the overlay image

`padding`

Type: EdgeValues

Pad the image edges

`overlay-padding`

Type: EdgeValues

Pad the overlay edges

`bgcolor`

Type: string

Set the background color for padding

`dpr`

Type: number

Device pixel ratio

`blur`

Type: number

Blur the image

`frame`

Type: 1

Extract a frame from an animated gif. Only the first frame is supported.

`sharpen`

Type: a${number},r${number},t${number}

Sharpen the image

`saturation`

Type: number

Saturation of the image

`contrast`

Type: number

Contrast of the image

`brightness`

Type: number

Brightness of the image

`filter`

Type: "nearest" | "bilinear" | "bicubic" | "lanczos3" | "lanczos2"

Sets the resize filter

`canvas`

Type: string

Increase the size of the canvas that surrounds an image

`width`

Type: string | number

`height`

Type: string | number

`quality`

Type: string | number

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