How do I output a specific image index from a custom metafield that uses "Files" type

Hilyin
Shopify Partner
4 0 1

I attempting to loop through product variants, I have a business requirement that the variant images not be used, as they are used for a slider on the product page and may differ. So I created a custom metafield with the type of "File" that allows multiple images.

 

So I have the index of the product variant loop through

forloop.index0

 

I want to select the images available in the custom metafield using the index of the product variants loop. 

 

Example: 

<img src="{{ product.metafields.custom.product_selection_images.value[forloop.index0] | img_url: '180x180' }}"/> 

In the custom metafield there is a corresponding image for each product variant. 

 

If I select the value from the array directly like above, it fails and is null. If I loop through product.metafields.custom.product_selection_images.value the urls output with no issues.

 

What am I missing? I just want to use my own index value while outputting these metafield images.

 

Thanks!

Replies 4 (4)

Hilyin
Shopify Partner
4 0 1

More info...

 

When doing:

 

 

{% assign product_selection_images = product.metafields.custom.product_selection_images.value %}

size: {{ product_selection_images | size }}<br>
JSON: {{ product_selection_images | json }}

outputs:

size: 0
JSON: ["\/\/cdn.shopify.com\/s\/files\/123\/1234\/1234\/files\/some_file01.jpg?v=1672186743","\/\/cdn.shopify.com\/s\/files\/123\/1234\/1234\/files\/some_file02.jpg?v=1672186742","\/\/cdn.shopify.com\/s\/files\/123\/1234\/1234\/files\/some_file03?v=1672186743","\/\/cdn.shopify.com\/s\/files\/123\/1234\/1234\/files\/some_file04.jpg?v=1672186743","\/\/cdn.shopify.com\/s\/files\/123\/1234\/1234\/files\/some_file05.jpg?v=1672186743"]

 

(actual cdn locations masked)

 

Is the metafield type "File" broken?? How is it size 0 and also have values?

Hilyin
Shopify Partner
4 0 1

OK I got something working, but it is terribly inefficient.

 

I had to pass in the parent loop's index and compare it against a sub loop's index to output the correct image. Ridiculous workaround, but it works.

 

 {% for option in product.options_with_values %}

  {% assign variant_loop_index = forloop.index0 %}
  
  {% for image in product.metafields.custom.product_selection_images.value %}

    {% if forloop.index0 == variant_loop_index %}
      <img src="{{ image | img_url: '180x180' }}" alt=""> 
    {% endif %}

  {% endfor %}

{% endfor %}

 

 

Francis_Kolms
Shopify Partner
4 1 2

Had exactly the same problem. I also had to use a similar workaround but it's terribly inefficient and Shopify needs to fix this asap.

vanbara
Shopify Partner
1 0 0

Me too