Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

How to fetch multiple image sizes

How to fetch multiple image sizes

bonttimo
Tourist
3 0 5

Hi,

I'm trying to add different image sizes for the img srcset but I can't figure out how to query multiple images at once. Would also be nice if I could get the image width and height for the transformed images but I think that that is not possible in Shopify?

My current code:

 

 

root.addConnection("products", { args: { first: limit } }, (product) => {
    product.add("title");
    product.add("handle");
    product.add("availableForSale");
    product.add("descriptionHtml");
    product.addConnection("images", { args: { first: limit } }, (image) => {
        image.add("src");
        image.add("url", { args: { transform: { maxHeight: 800 } } });
        
        // I found this example but dont know how to add it to the .add("url" syntax
        // smallImage: transformedSrc(maxWidth: 200, crop: CENTER)
        // bigImage: transformedSrc(maxWidth: 400, crop: CENTER)

        image.add("width");
        image.add("height");
        image.add("altText");
    });
 });

 

I found this: smallImage: transformedSrc(maxWidth: 200, crop: CENTER) but I dont know how to add it to the .add("url" syntax.
Link to the smallImage: transformedSrc: https://stackoverflow.com/a/63810796

Replies 0 (0)