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

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 5 (5)

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

joeybab3
Shopify Partner
118 16 30

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.