How can I display multiple images metafield on a website?

[fbx20541606]

Hello! I got a bit stuck on how to display multiple images metafield on my website. I want my client to be able to upload campaign pictures for each product: 

I've created a metafield worn_images with list of files in product section:

All the solutions that I find don't work for me or I'm doing something wrong. Any help would be appreciated. Thank you!

@MetafieldsGuru 

[MetafieldsGuru · Accepted solution]

Hi @fbx20541606 ,

The payload returned for this metafield type is an array of image objects. So you should process it accordingly. You may want to use code like this (with proper CSS rules applied, of course):

{% assign array_of_image_objects = product.metafields.custom.worn_images.value %}
{% if array_of_image_objects %}
 {% for image_object in array_of_image_objects %}
  <img src="{{ image_object | image_url }}">
 {% endfor %}
{% endif %}

[fbx20541606]

Thank you so much!:)

[CXShift]

Thanks for the solution.
And is it possible to access/retrieve a specific file/image in a product metafield reference list, so it would show up on the website in the right place like it would be possible to do so with a metafield list single-line text, like the below code but instead for files/images?
<p>First item in list: {{ product.metafields.custom.table.value[0] }}</p>
ٍ<p>Second item in list: {{ product.metafields.custom.table.value[1] }}</p>
<p>Third item in list (seond): {{ product.metafields.custom.table.value[2] }}</p>
<p>Fourthitem in list: {{ product.metafields.custom.table.value.[3] }}</p>

[mfelling]

This is great, but what if my array could include images or videos? There must be a way to add an if, else if, else Logic to look at the file type and then display it in the correct way? Such as:

{% assign array_of_image_objects = product.metafields.custom.worn_images.value %}
{% if array_of_image_objects %}
{% for image_object in array_of_image_objects %}
   {% if image_object.type=image %}
     <img src="{{ image_object | image_url }}">
   {% elseif image_object.type=video %}
     <vid src="{{ image_object | video_url }}">
   {% else %}
     <file src="{{ image_object | file_url }}">
% endif %}
% endfor %}
% endif %}