Builder + Cloudinary Plugin

Installation

From the organization settings page in Builder, click the edit button next to "Plugins", click "Add plugin", enter "@zapier/builder-plugin-cloudinary", then click "Save".

Usage

After adding the plugin in Builder, it can be used in a component by defining an input with type: 'cloudinaryImage.

Builder.registerComponent(Image, {
  name: 'Image',
  inputs: [
    {
      name: 'src',
      type: 'cloudinaryImage',
    },
  ],
});

The value passed to the component is a URL that can be used with a standard HTML <img> element. When an image is selected from the Cloudinary media library, some default transformation parameters (f_auto, q_auto) are automatically added to the URL.

function Image(props) {
  return <img src={props.src} />;
}

Configuration

When opening the media library for the first time, you will be prompted to enter a Cloudinary cloud name and API key. These can be changed at anytime by clicking the settings button next to the "Media Library" button.