Connect your Hygraph project to Cloudinary

Cloudinary empowers companies to deliver visual experiences that inspire and connect by unleashing the full potential of their media.

The Cloudinary UIX has been deprecated. If you are using it, you need to replace it with the App. Here is a step-by-step guide on how to do it.

What you can do with the Hygraph-Cloudinary integrationAnchor

  • You can continue to use Cloudinary as your preferred DAM solution for images, videos, and other digital assets, in a similar way that you would use assets hosted by Hygraph.

Prerequisites to use this integrationAnchor

  • You must have a Hygraph account. If you don't have one, you can create one here.
  • You must have an Cloudinary account. If you don't have one, you can create one here.

Install the Cloudinary AppAnchor

Click here to install the Cloudinary App on Hygraph, then follow these steps:

Cloudinary installation
Cloudinary installation

  1. In the dropdown, select which project you want to install the app in, then click on the Add App button. You should be redirected to the Configure Cloudinary section of your Hygraph project dashboard.
  2. Fill in the Cloud Name and API Key fields using the information available in the Account Details section of your Cloudinary account.
  3. Click on the Submit button. A pop-up notification in the lower right corner of the screen will indicate that the changes have been saved.

Use the Cloudinary asset field in HygraphAnchor

Add the Cloudinary asset field to a model
Add the Cloudinary asset field to a model

  1. Navigate to the Schema builder.
  2. Select the model that you would like to add the Cloudinary Asset field to.
  3. Select the Cloudinary Asset field from the Add fields right sidebar.
  4. Complete the Display name field, and the API ID will be auto-filled by the system. Optionally, you can also add a Description. This screen allows you to control different properties of your Cloudinary asset field: you can allow multiple values, or you can localize the field, by selecting the checkboxes under the Field options section of the screen.
  5. Click on the Create button.

After this, if you navigate to the Content Editor and select the model you added the Cloudinary Asset field to, you will be able to use it to select an asset hosted in your Cloudinary account simply by clicking on the Add from Cloudinary button.

Cloudinary asset field in the Hygraph content editor
Cloudinary asset field in the Hygraph content editor

Query your Cloudinary assetsAnchor

You can query the Cloudinary assets used in your Hygraph project using our API Playground, which you will find on the left side menu of your Hygraph project dashboard.

Cloudinary assets query in our API Playground
Cloudinary assets query in our API Playground

Find additional information on how to query content in Hygraph here.

How to replace the UIX with the new appAnchor

Before you delete the Cloudinary UIX, make sure that you have the Cloud Name and API Key in a safe place. You will need them to setup the app.

Here is the step-by-step guide on how to install the Cloudinary app for Hygraph to replace the UIX.

  1. Remove the Cloudinary UIX from your project. To do that, go to Settings > UI Extensions. Click on the three dots, then click on the Remove button.
  2. Click here to install the Cloudinary app.
  3. Select your project in the dropdown, then click on Add App.
  4. Enter the Cloud Name and API Key in the fields, then click Submit to save the settings.

Cloudinary migration - Configuration
Cloudinary migration - Configuration

  1. Now, go to the Schema editor and open the model that you are using the Cloudinary asset field in.
  2. Click on Edit Field. On the left top corner of the dialog, click on the dropdown, then click on Cloudinary asset. Finally, click on the Update button.

Cloudinary migration - Select asset
Cloudinary migration - Select asset

ResourcesAnchor

  • Click here to access Cloudinary's online documentation.