Skip to content

Sample GetStaffMembers GraphQL Query that uses 'image transforms' in Craft

Casey Grzecka edited this page Aug 20, 2021 · 3 revisions

This is mainly to show the usage of 'image transforms' from Craft: https://craftcms.com/docs/3.x/graphql.html#query

query GetStaffMembers {
  entries(type: "staffMember") {
    id
    ... on staffMember_staffMember_Entry {
      id
      nameFirst
      nameLast
      email
      department {
        id
        title
      }
      staffMemberImage {
        ... on staffMemberImage_staffMemberImageContent_BlockType {
          id
          staffMemberImageTitle
          staffMemberImageAltText
          staffMemberImage {
            urlSmall: url @transform(transform: "small")
            urlMedium: url @transform(transform: "medium")
            urlLarge: url @transform(transform: "large")
            filename
            ... on mediaAndDocuments_Asset {
              id
              path
            }
          }
        }
      }
    }
  }
}

Result:

{
  "id": "486",
  "nameFirst": "Casey",
  "nameLast": "Grzecka",
  "email": "[email protected]",
  "department": [
    {
      "id": "504",
      "title": "Digital Initiatives and Information Technology (DIIT)"
    }
  ],
  "staffMemberImage": [
    {
      "id": "882",
      "staffMemberImageTitle": null,
      "staffMemberImageAltText": "Casey's World",
      "staffMemberImage": [
    {
      "urlSmall": "https://test-craft.library.ucla.edu/assets/images/_small/ISS002-E-7377_1024c.jpeg",
      "urlMedium": "https://test-craft.library.ucla.edu/assets/images/_medium/ISS002-E-7377_1024c.jpeg",
      "urlLarge": "https://test-craft.library.ucla.edu/assets/images/_large/ISS002-E-7377_1024c.jpeg",
      "filename": "ISS002-E-7377_1024c.jpeg",
      "id": "286",
      "path": "images/ISS002-E-7377_1024c.jpeg"
    }
  ]
}

All the image transforms are defined here: https://test-craft.library.ucla.edu/admin/settings/assets/transforms