Cloudimage

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

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

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

Types

The cloudimage provider supports the following arguments:

Options

token

Type: string

Operations

w

Type: number

Width of the image in pixels.

h

Type: number

Height of the image in pixels.

q

Type: number

force_format

Type: ImageFormat

org_if_sml

Type: 1

Prevents resizing if the target size is larger than the original image.

func

Type: "cover" | "crop" | "fit" | "cropfit" | "bound" | "face"

Crop mode. Available options: crop, fit, cropfit, bound, cover.

gravity

Type: "center" | ${number},${number}| "north" | "south" | "east" | "west" | "auto" | "face" | "smart" |${number}p,${number}p“

Gravity for cropping, defines the part of the image to be retained.

tl_px

Type: string

Top-left corner of the crop area.

br_px

Type: string

Bottom-right corner of the crop area.

r

Type: number

Rotates the image in degrees counterclockwise.

flip

Type: "h" | "v"

Flips the image horizontally and/or vertically.

trim

Type: number

Trims any solid-color border.

radius

Type: number

Applies rounded corners and optionally fills the background with a color.

face_margin

Type: string

Sets the margin around a detected face during face crop.

bg_color

Type: string

Background color for the image, accepts color name or hex code.

ci_url_encoded

Type: 1 | "1"

width

Type: string | number

height

Type: string | number

format

Type: (string & {}) | ImageFormat

quality

Type: string | number

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