Options

To set configurations for Cloudinary source plugin, we use inner options section of the gridsome-source-cloudinary in gridsome.config.js.

The list of available options are shown as below

cloudName - Required

• Type: String
• required

The cloud name associated with your Cloudinary account. It is used to configure and enable Cloudinary features such as generating delivery asset URL.

/* gridsome.config.js */

export default {
  plugins: [
    {
      use: 'gridsome-source-cloudinary',
      options: {
        cloudName: 'your-cloud-name'
      }
    },
  ]
}

Cloud name presents in every delivered URL from Cloudinary, hence it's important to have it configured correctly.

You can find your cloud name details in Dashboard page, or in Account Settings page in Cloudinary console

apiKey - Required

• Type: String
• required

The API Key associated with your Cloudinary account. It is used together with apiSecret to query images and videos from your Cloudinary account to GraphQL Data Layer.

/* gridsome.config.js */

export default {
  plugins: [
    {
      use: 'gridsome-source-cloudinary',
      options: {
        apiKey: 'your-api-key'
      }
    },
  ]
}

You can find your API Key in your Cloudinary Dashboard page, or in Settings/Security page in Cloudinary console

Warning These private keys should be kept as environment variables in .env.

apiSecret - Required

• Type: String
• required

The API Secret Key associated with your Cloudinary account. It is used together with apiKey to query images and videos from your Cloudinary account to GraphQL Data Layer.

/* gridsome.config.js */

export default {
  plugins: [
    {
      use: 'gridsome-source-cloudinary',
      options: {
        apiSecret: 'your-api-secret-key'
      }
    }
  ]
}

You can find your API Secret Key in your Cloudinary Dashboard page, or in Settings/Security page in Cloudinary console.

Warning These private keys should be kept as environment variables in .env.

secure

• Type: Boolean
• Default: true

Force secure HTTPS delivery urls for all assets (images + videos) generated by Cloudinary, even if they are embedded in HTTP originally.

Disable this flag to have all delivery urls built with HTTP protocol instead.

/* gridsome.config.js */

export default {
  plugins: [
    {
      use: 'gridsome-source-cloudinary',
      options: {
        secure: false
      }
    },
  ]
}

secureDistribution

• Type: String
• Relevant only when secure is true

Set custom domain name for building secure HTTPS urls.

/* gridsome.config.js */

export default {
  plugins: [
    {
      use: 'gridsome-source-cloudinary',
      options: {
        secureDistribution: 'your-custome-domain-name'
      }
    },
  ]
}

Only relevant if you are Advanced plan Cloudinary user with private CDN distribution and custom CNAME set. You can see more details here

cname

• Type: String
• Use only when secure is false

Set custom domain name for building non-secure HTTP urls.

/* gridsome.config.js */

export default {
  plugins: [
    {
      use: 'gridsome-source-cloudinary',
      options: {
        cname: 'your-custome-domain-name'
      }
    },
  ]
}

Only relevant if you are Advanced plan Cloudinary user with private CDN distribution and custom CNAME set. You can see more details here

privateCdn

• Type: Boolean
• Default: false

Set to true if you'd like to use private CDN distribution.

/* gridsome.config.js */

export default {
  plugins: [
    {
      use: 'gridsome-source-cloudinary',
      options: {
        privateCdn: true
      }
    },
  ]
}

Only relevant for Advanced plan Cloudinary users. You can see more details here

resourceOptions - Required

• Type: Object
• required

This object provides the information of the resources (images/videos) you want to retrieve from your Cloudinary account and have them added to the data layer.

/* gridsome.config.js */
export default {
  plugins: [
    {
      use: 'gridsome-source-cloudinary',
      options: {
        resourceOptions: {
          type: "upload",
          prefix: 'folder-name',
          max_results: 50
        },
      },
    },
  ]
}

Below are some main acceptable properties for resourceOptions:

Property	Type	Default	Required	Description
type	string	all	no	Delivery (storage) type of the asset: upload private authenticated facebook, twitter gravatar, youtube, hulu vimeo, animoto
resourceType	string	image	no	Type of the asset: image (also for gif) raw video (includes audio like .mp3)
prefix	string	n/a	no	The directory path in Cloudinary storage to look for assets.
maxResults	number	10	no	Maximum number of asset to return. Up to 500.
next_cursor	string	n/a	no	The value for the next page. Available in the response if there is more assets.
direction	string/number	-1	no	Sort order of returned assets based on creation day. Ignore and sorted by publicId if has prefix. Values:desc, -1, 1
tags	boolean	false	no	Whether to include list of tags per asset.
context	boolean	false	no	Whether to include key-value context pairs per asset. Good for setting alt value

transformations

• Type: Object

This object provides the additional bulk transformation effects to apply on the returned resources (images/videos) before adding them to the Data Layer.

/* gridsome.config.js */
export default {
  plugins: [
    {
      use: 'gridsome-source-cloudinary',
      options: {
        transformations: {
          width: 200,
          height: 200,
          gravity: 'auto', //auto detect the main subject as center for cropping
          crop: 'fill',
        }
      },
    },
  ]
}

See Transformations for a full detailed list of available transformation options.