Contentful

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

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

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

Types

The contentful provider supports the following arguments:

Options

The contentful provider does not support any extra configuration options.

Operations

w

Type: number

Specifies the width of the image in pixels. Maximum allowed value is 4000 pixels.

h

Type: number

Specifies the height of the image in pixels. Maximum allowed value is 4000 pixels.

fit

Type: FitType

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

  • pad: Adds padding if necessary to fit the dimensions.
  • fill: Crops the image to fit exactly in the specified dimensions.
  • scale: Resizes the image while changing the aspect ratio.
  • crop: Crops a portion of the image to fit the dimensions.
  • thumb: Creates a thumbnail of the image.

f

Type: FocusArea

Defines the focal area for cropping or padding. Works with fit values like crop, pad, etc. Possible values:

  • center, top, right, left, bottom
  • top_right, top_left, bottom_right, bottom_left
  • face: For the largest detected face.
  • faces: For all detected faces.

bg

Type: string

Sets the background color when padding is applied or with rounded corners. It accepts RGB or hex values.

q

Type: number

Adjusts the image quality as a percentage from 1 to 100. Ignored for 8-bit PNG images.

r

Type: number | "max"

Rounds the corners of the image. You can specify the corner radius in pixels or use “max” to create a full circle/ellipse.

fm

Type: ImageFormat

Specifies the output format for the image. Possible values:

  • jpg
  • png
  • webp
  • avif

fl

Type: "progressive" | "lossless"

Sets the compression method for the image. Possible values:

  • progressive: For progressive JPEG images.
  • lossless: For lossless PNG/WebP images.

width

Type: string | number

height

Type: string | number

format

Type: ImageFormat | (string & {})

quality

Type: string | number

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