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

[joeybab3]

This is another weird quirk of the liquid implementation that Shopify uses that leads me to believe that there is no one from Shopify that actually has to use this language after they have built it. 

Per https://shopify.dev/docs/api/liquid/objects#metafield-accessing-metafields-of-type-list:
"If the list is of type single_line_text_field, then you can access the items in the array directly in Liquid using a 0-based index."

This leads me to believe that they have purposely not implemented index access for anything other than single-line text fields. 

Because clearly, no one will ever need to access a specific index of an array of images. 

It's not even like it is a limitation of arrays in Shopify because you can create a blank array using yet another botched workaround:

assign indexable_images = '' | split: ''

 Then you can iterate through it using a for loop and create individual array elements to concat using a third ugly workaround:

{% for image in product.metafields.shopify_failures.image_lists.value -%}
{% assign image = image | sort %}
{% assign indexable_images = indexable_images | concat: image %}
{%- endfor %}

 All of this is ridiculous. I know sometimes Shopify support staff looks at new comments on old posts so if one of you is seeing this and happens to code, please take this to your development team and ask them what they were on when they implemented this. 

[joeybab3]

This is not correct. This is what AI autocompletes for this query because that's what it was trained on but the img_url filter is deprecated and will be removed.