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

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



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



<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.



Replies 4 (4)

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 }}


size: 0
JSON: ["\/\/\/s\/files\/123\/1234\/1234\/files\/some_file01.jpg?v=1672186743","\/\/\/s\/files\/123\/1234\/1234\/files\/some_file02.jpg?v=1672186742","\/\/\/s\/files\/123\/1234\/1234\/files\/some_file03?v=1672186743","\/\/\/s\/files\/123\/1234\/1234\/files\/some_file04.jpg?v=1672186743","\/\/\/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?

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 %}



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.

Shopify Partner
1 0 0

Me too