README

此模块提供了一个可以用于使用Cloudinary服务加载（响应式）图像的graphql数据生产者。

数据生产者接受原始图片URL作为参数，可选宽度、高度、尺寸和一个任意的cloudinary转换字符串，并生成一个包含图片HTML属性的JSON编码字符串（src、width、height、sizes、srcset）。

type Page {
  heroImage(
    width: Int
    height: Int
    sizes: [[Int!]!]
    transform: String
  ): String
}

您可以使用数据生产者如下

  addResolver('Page.heroImage',
    $builder->compose(
      // ...any other calls to data producers or callbacks that will return a string (image url), for example:
      //$builder->callback(function ($value) {
      //  return 'http://www.example.com/demo.jpg';
      //}),
      $builder->produce('responsive_image')
        ->map('image', $builder->fromParent())
        ->map('width', $builder->fromArgument('width'))
        ->map('height', $builder->fromArgument('height'))
        ->map('sizes', $builder->fromArgument('sizes'))
        ->map('transform', $builder->fromArgument('transform'))
      )
    )
  );

如果没有提供宽度，返回的数据将仅包含原始图片URL，编码为JSON

然后您可以这样查询数据

fragment Hero on Page {
  heroImage(
    # 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]
    ]
    transform: "co_rgb:000000,e_colorize:60"
  )
}

然后您收到的响应应该包含您构建显示图片所需的所有数据。

除了数据生产者之外，还有一个名为responsiveImage的指令，您可以直接在graphql模式中使用。因此，上面的代码可以变成

fragment Hero on Page {
  heroImage(
    # 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]
    ]
    transform: "co_rgb:000000,e_colorize:60"
  )
    @responsiveImage(
      width: "$width"
      height: "$height"
      sizes: "$sizes"
      transform: "$transform"
    )
}

其他部分

• Gatsby插件

安装

Drupal

• composer require amazeelabs/silverback_cloudinary
• 确保您已按照Cloudinary仪表板上的说明设置了CLOUDINARY_URL环境变量（测试凭证：CLOUDINARY_URL=cloudinary://219736568324247:PsDMMn1fMdm2lj9TlJMICX25KEA@ddj1ybv54）
• drush en silverback_cloudinary

Gatsby

• yarn add @amazeelabs/gatsby-silverback-cloudinary
• 确保您已设置了以下环境变量：CLOUDINARY_API_SECRET、CLOUDINARY_API_KEY、CLOUDINARY_CLOUDNAME
• 在 gatsby-config.ts 中添加插件如下（非常重要：在 @amazeelabs/gatsby-source-silverback 插件之后）

{
  resolve: '@amazeelabs/gatsby-silverback-cloudinary';
}