Load Image with ID

Highlighted
Shopify Expert
61 1 6

Is there any way to load an image based on it's ID?

 

I'm getting a variant's featured image id via AJAX but I don't know how to load the image once I have the image ID:

 

Query.getJSON('/products/PRODUCT-HANDLE.js', function(product) {
 $(variants).each(function (i, variant) {
    variant.featured_image.id
 }
});



0 Likes
Highlighted
Shopify Partner
1781 211 370

The image map should be available under product.images. You can then match on the image id you get from the variant.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Shopify Expert
61 1 6

I don't believe product.images give you any data other than the image url eg.

 

{
  "id": 329678821,
  "title": "Red Rain Coat",
  "handle": "red-rain-coat",
  "description": "<p>Lorem Ipsum.</p>",
  "published_at": "2014-06-12T16:28:11-04:00",
  "created_at": "2014-06-12T16:28:13-04:00",
  "vendor": "Shopify",
  "type": "Coat",
  "tags": [
    "Spring"
  ],
  "images": [
    "//cdn.shopify.com/s/files/1/0040/7092/products/red-rain-coat.jpeg?v=1402604893"
  ],
  "url": "/products/red-rain-coat"
}

 

I think what I'm going to try do is include all the product images and their IDs in javascript as variables on page load so I can access the variables with AJAX calls at a later time:

 

<script>
{% for image in product.images %} var id_{{ image.id }} = {{image | img_url: '600x' }} {% endfor %}
</script>

 

0 Likes
Highlighted