Gatsby Silverback Cloudinary

Gatsby plugin that extends the GraphQL schema with a field (and a resolver) that can load (responsive) images from the Cloudinary service.

The field resolver will use the original source value of the field and a config object (see bellow) to build the Cloudinary image urls.

Installation & Configuration

Simply install the package, add to your Gatsby configuration, and make sure you have defined the following env variables that you can get from the Cloudinary dashboard:

• CLOUDINARY_API_SECRET
• CLOUDINARY_API_KEY
• CLOUDINARY_CLOUDNAME

yarn add @amazeelabs/gatsby-silverback-cloudinary

export const plugins = {
  resolve: '@amazeelabs/gatsby-silverback-cloudinary',
};

Very important: the plugin must be added after the @amazeelabs/gatsby-source-silverback, or any other source plugin that can add a DrupalResponsiveImage field.

Now you can do queries like:

fragment Hero on Page {
  heroImage(
    config: {
      # Display a 1600/800 header image by default.
      width: 1600
      height: 800
      sizes: [
        # For screens smaller than 800px, scale down to 780px width.
        [800, 780]
      ]
      variants: [
        {
          # Use this variant for small portrait displays like phones.
          media: "(max-width: 800px) and (orientation: portrait)"
          # Request a portrait cut instead of landscape.
          width: 800
          height: 1600
          # On mobile, text overlays the image, so we tint it a bit.
          # https://cloudinary.com/documentation/transformation_reference
          transform: "co_rgb:000000,e_colorize:60"
        }
      ]
    }
  )
}

The response will be on this type (DrupalResponsiveImage):

{
  src: string;
  srcset: string;
  sizes: string;
  width: number;
  height: number;
  sources: Array<{
    media: string;
    src: string;
    srcset: string;
    width: number;
    height: number;
  }>;
}