Get cropped image from Storefront Graphql API with desired aspect ratio

[jamesauble]

Here's the ask:

I have a collections grid with grid items with the size 250x300.

My product featured images are not at this aspect ratio but I don't want to ship MORE than I need to when the page loads. Using transformedSrc with ImageTransformInput only returns a url to a cropped image with the desired aspect ratio if the maxWidth and maxHeight is below my requested size. 

Since I have no way of guaranteeing that an image is above the max's, I end up getting some results back with the wrong aspect ratio and thus have to send unseen parts of my image to the client (browser).

Is there no way of forcing an aspect ratio?

In other words, if the original image is less than 300 height, let's say it's 280px in height, I want an image returned that is 280px in height but 233.33px in width (the same aspect ratio as 250x300).

I believe this is easily possible using Liquid. Am I wrong? I feel like I or shopify is missing something here. Who is it? Thanks!

[Liam]

Are you able to achieve this with the image_url filter to specify width and height parameters, and using some custom logic to ensure the aspect ratio fits your requirements? There's an example of what that logic could look like in this stack overflow post. 

[jamesauble]

Sorry I could have been more clear in the body of my post. I mean, you CAN do this in Liquid, so why CAN'T you (or can you?) do this with by querying GraphQL.

Here's what I'm working with:

  fragment image on Image {
    url
    thumbnailUrl: transformedSrc(maxWidth: 250, maxHeight: 300, crop: CENTER)
    altText
    width
    height
  }

If the original source image is 4000x280px, I'm just gonna get the same back. I'm only rendering this at 250x300 so this is a huge waste to ship to the user.

See what I mean?

[Liam]

I see what you mean James - the Storefront API was not intended to replicate or have parity with Liquid, so not everything will be possible to achieve between both APIs. Could you manually edit the theme code instead of using the Storefront API?

[jamesauble]

Possibly. I'll give that a try. Thanks.