Query media connection for variant images

[mckenzieclark]

It would be great if the media connection could be used for ProductVariant images, as you have done for Products.

At the moment, product.images gives you an array of MediaImage objects e.g.

[
  [
    "id" => "gid://shopify/MediaImage/1234567890"
    "alt" => ""
    "image" => array:4 [▶]
    "createdAt" => "2021-08-09T16:28:29Z"
    "updatedAt" => "2025-03-31T19:55:12Z"
    "__parentId" => "gid://shopify/Product/1234567890"
    "mediaContentType" => "IMAGE"
  ],
  [
    "id" => "gid://shopify/MediaImage/4567890123"
    "alt" => ""
    "image" => array:4 [▶]
    "createdAt" => "2021-08-09T16:28:29Z"
    "updatedAt" => "2025-03-31T19:55:12Z"
    "__parentId" => "gid://shopify/Product/4567890123"
    "mediaContentType" => "IMAGE"
  ],
]

However, variant.image gives you a standard Image object e.g.

  "id" => "gid://shopify/ProductImage/1234567890"
  "src" => "https://cdn.shopify.com/s/files/1234567890"
  "url" => "https://cdn.shopify.com/s/files/1234567890"
  "width" => 1000
  "height" => 768
  "altText" => null

Previously, I was able to find a variant's image in the parent product's image array by id. This was useful when switching to a different variant on a product page and updating the main product image respectively. However now I don't see a way to match them given the different URIs.

It's interesting that the Images connection on Product has been deprecated, yet Image on ProductVariant continues to live alongside the newer Media connection.

[linear]

PT-2784 Query media connection for variant images

[nfourtythree]

Hi @mckenzieclark

Thank you for your feedback and info. You certainly raise an interesting point here, especially with Shopify's handling of some of the properties in their Api (images on Product vs image on ProductVariant).

We will have to put a little bit of time into thinking how we go about solving this. The way the sync works means that adding a MediaConnection inside the variants request will likely just mean more media objects are returned. They won't be embedded inside the variant like the image property is. This means we are unsure at this time as if that will be the solution, but we are going to spend some time looking into the possibilities.

To try and help for now we have put together a small Twig solution that will tell you which of the product images belong to which variant (we weren't sure if you we achieving this in Twig or PHP but the solution applies to both).

{% for img in product.getImages() %}
  {% set variantForImage = collect(product.getVariants()).filter(v => not v.image == null and v.image.url == img.image.url).one() %}
  <div>Image for variant: {{ variantForImage ? variantForImage.id : '' }}</div>
  <img src="{{ img.image.url }}" />
{% endfor %}

As you can see from the code above looping over the product images the variants are filtered to find the one with the matching image file.

We will keep this issue open as we investigate it further, hopefully the code above means you can at least keep your project moving forward to now.

Thanks!

[mckenzieclark]

Hi @nfourtythree thanks for taking the time to consider this, and for the solution you've offered! Tbh I didn't realise that there was a match on image URLs, mostly because of the length of them. But that's great, I can match them up by URL for now.