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

[Hilyin]

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!

[Hilyin]

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]

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]

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]

Me too