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.
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;
}>;
}