How to correctly use ImageTransformInput with Image.url in GraphQL?

1b4PI
Shopify Partner
5 1 2

When wanting to crop images  as aliases with GraphQL I use to be able to:

image {
  ...
  lg: transformedSrc(maxHeight: 704, maxWidth: 2816, crop: CENTER)
  xl: transformedSrc(maxHeight: 960, maxWidth: 3840, crop: CENTER)
}

 However, transformedSrc is now deprecated, and we are to use: https://shopify.dev/api/storefront/2022-01/input-objects/ImageTransformInput. But it's not obvious how to correctly use a set of ImageTransformInputs as a transform argument for Image.url object. I've tried things such as...

xl: url(transform:"maxHeight: 960, maxWidth: 3840, crop: CENTER")
xl: url(transform(maxHeight: 960, maxWidth: 3840, crop: CENTER))
xl: url(transform{maxHeight: 960, maxWidth: 3840, crop: CENTER})
xl: url(transform[{ maxHeight: 960}, { maxWidth: 3840}, {crop: CENTER}])

I just get parse errors with every argument style I try, be it string, array, or object.

 

How do we correctly use ImageTransformInput as a set of arguments on the Image.url object? 

Screen Shot 2022-03-20 at 8.33.38 AM.png

 

Replies 2 (2)

1b4PI
Shopify Partner
5 1 2

Sometimes you just have to shout into the either...

Correct way to use an input_object as argument.

xl: url(transform: { maxHeight: 960, maxWidth: 3840, crop: CENTER })

 

jamesauble
Shopify Partner
9 0 6

does this api just generally suck or am I missing something? How can i just ensure the image is a specifc aspect ratio with a max height?