README

此 Statamic GraphQL 扩展在所有 AssetInterface 字段上提供 thumbnail 字段。可以通过提供 name 参数按预定义格式查询，或者使用即时缩略图生成并提供 width、height 或 fit。

功能

• 预定义缩略图格式：按 name 查询
• 即时缩略图：按 width、height 或 fit 查询
• 控制面板 UI 以定义格式和启用/禁用 JIT 缩略图生成
• 管理 GraphQL 缩略图设置的权限

安装

运行 composer require legrisch/statamic-graphql-thumbnails

设置

安装后，您必须访问控制面板以定义查询的格式或启用 JIT 缩略图生成。

使用方法

格式使用

thumbnail 字段需要一个 name 参数，该参数解析为您的格式之一的名字。

如果已定义格式，您还可以直接访问资产上的 srcset 属性。

asset {
  thumbnail(name: "small")
  srcset
}

yields

"asset": {
  "thumbnail": "http://absolute.url/to/thumbnail-small.jpg",
  "srcset": "http://absolute.url/to/thumbnail-small.jpg 500w, http://absolute.url/to/thumbnail-medium.jpg 1000w",
}

JIT 使用

thumbnail 字段需要一个整数参数 width 或 height。您还可以指定 fit 参数。可能的值有：contain、max、fill、stretch、crop、crop_focal，默认为 crop_focal。

asset {
  thumbnail(width: 100)
}

yields

"asset": {
  "thumbnail": "http://absolute.url/to/thumbnail-with-100px-width.jpg"
}

完整示例

查询单个缩略图

query MyQuery {
  entries(collection: "pages") {
    data {
      ... on Entry_Pages_Pages {
        image {
          id
          thumbnail(width: 200)
        }
      }
    }
  }
}

yields

{
  "data": {
    "entries": {
      "data": [
        {
          "image": {
            "id": "assets::20210409232458.jpg",
            "thumbnail": "http://absolute.url/to/thumbnail.jpg"
          }
        }
      ]
    }
  }
}

查询多个缩略图

使用 GraphQL 别名查询多个缩略图

query MyQuery {
  entries(collection: "pages") {
    data {
      ... on Entry_Pages_Pages {
        image {
          id
          thumbnailSmall: thumbnail(width: 100)
          thumbnailMedium: thumbnail(width: 250)
          thumbnailLarge: thumbnail(width: 500)
          thumbnailSquare: thumbnail(width: 500, height: 200, fit: "crop")
        }
      }
    }
  }
}

yields

{
  "data": {
    "entries": {
      "data": [
        {
          "image": {
            "id": "assets::20210409232458.jpg",
            "thumbnailSmall": "http://absolute.url/to/small/thumbnail.jpg",
            "thumbnailMedium": "http://absolute.url/to/medium/thumbnail.jpg",
            "thumbnailLarge": "http://absolute.url/to/large/thumbnail.jpg",
            "thumbnailSquare": "http://absolute.url/to/square/thumbnail.jpg"
          }
        }
      ]
    }
  }
}

许可证

本项目受 MIT 许可证的许可。