How to get efficient product images

Solved
HunkyBill
Shopify Expert
4370 36 463

I am using GraphQL to download images to a Resource List. When I render the resources I am using the first image assigned to the product. I am using the originalSrc to get the URL to the image. Unfortunately, in the Resource Item I only need a Thumbnail image and therefore I am rendering a large (1500x2450) pixel image as a thumb. So this is super slow and clunky.

 

What is the secret sauce to getting thumbnail product images using GraphQL? I am not seeing a way to do that? Is it simple?

 

I see transformedSrc but it seems a little vague about how to use it. How to use Scale or CropRegion? I guess I will experiment to see how this works out.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
HunkyBill
Shopify Expert
4370 36 463

This is an accepted solution.

Ok. transformedSrc is the shizzle. works like a charm. learn something every day.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
vix
Shopify Staff
Shopify Staff
534 105 103

fo shizzle - spot on. 

Vix | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
CWSites
Tourist
16 0 0

Can you post an example of your final code? I'm trying to do the same and it tells me that the image is not part of the product data

0 Likes
HunkyBill
Shopify Expert
4370 36 463

A product node indeed has images. I get at them this way from the product node...

 

         images(first: 1) {
              edges {
                node {
                  originalSrc
                  transformedSrc(maxWidth: 100, maxHeight: 100)
                }
              }
            }

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
CWSites
Tourist
16 0 0

Perfect, thank you!

0 Likes