1.2.26 • Published 9 months ago

@amazeelabs/gatsby-silverback-cloudinary v1.2.26

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

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

9 months ago

1.2.25

9 months ago

1.2.24

12 months ago

1.2.23

1 year ago

1.2.21

1 year ago

1.2.22

1 year ago

1.2.20

1 year ago

1.2.19

1 year ago

1.2.18

1 year ago

1.2.17

1 year ago

1.2.16

1 year ago

1.2.15

1 year ago

1.2.14

1 year ago

1.2.13

1 year ago

1.2.12

1 year ago

1.2.11

1 year ago

1.2.10

1 year ago

1.2.9

1 year ago

1.2.8

1 year ago

1.2.7

1 year ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.0

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.1.11

2 years ago

1.1.9

2 years ago

1.1.10

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.33

2 years ago

1.0.32

2 years ago

1.0.31

2 years ago

1.0.37

2 years ago

1.0.36

2 years ago

1.0.35

2 years ago

1.0.34

2 years ago

1.1.1

2 years ago

1.0.39

2 years ago

1.0.38

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.0.40

2 years ago

1.0.44

2 years ago

1.0.43

2 years ago

1.0.42

2 years ago

1.0.41

2 years ago

1.0.48

2 years ago

1.0.47

2 years ago

1.0.46

2 years ago

1.0.45

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.24

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago