-
Notifications
You must be signed in to change notification settings - Fork 2
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