Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
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