Iterating within a metafield data?

[mustaphadem]

Hello all,

I am using the metafields master app and what I am trying to achieve is using their multiple image metafield option, I'd like to display a set of icons for each product. I am trying to incorporate this small piece of code on product-form.liquid for Vantage theme.  When I do this, I see all the urls of icons that I upload to the metafield is being returned as a whole -hopefully a string?- separated with a comma, that's why I tried that split thing, but apparently it fails.

Would anyone be able to guide me through the correct way of doing this please?

{% for image in product.images %} -->> this part is most likely wrong, as I was just trying to take something as a starting point;

  <img src="{{ product.metafields['icons']['Icons'] | split: ", " }}">

{% endfor %}

[drakedev]

Hello,

can you please copy here the string you defined in the metafield.

You can find some examples how to iterate over a metafield also here: The metafield object 

Here one example that show how to split a comma delimited string

{%- assign r = product.metafields.related.items | split:"," -%}
<div class="related-products">
    {%- for p in r -%}
        {% assign relatedProduct = all_products[p] %}
        {%- include 'some-snippet' product: relatedProduct -%}
    {%- endfor -%}
</div>

[mustaphadem]

Hey drakedev,

Thank you for your reply. One of the problems is that i am not sure what the metafields app returns as a result of their multiple image type. Below is the screenshot from the app.

When I use the following code;

<div class="product-icons">
      
		<img src={{ product.metafields['icons']['Icons'] }} /img>
      
           
       </div>

on the dom, when i inspect i see the following;

<div class="product-icons">
      
		<img src="https://metafields-manager-by-hulkapps.s3-accelerate.amazonaws.com/uploads/sabun-co.myshopify.com/1602456611-Vegan.png,https://metafields-manager-by-hulkapps.s3-accelerate.amazonaws.com/uploads/sabun-co.myshopify.com/1602461646-Handmade_Soap_Bar.png" img="">
      
           
       </div>

so my expectation was to somehow get that whole combined URLs, separate them by the coma so i can get individual urls, and then using an iteration display each.

Sorry if this is too much, i'm not a coder as you can see  

Your help is much appreciated!

[drakedev · Accepted solution]

You can try the following code:

{%- assign icons = product.metafields['icons']['Icons'] | split:"," -%}
<div class="product-icons">
    {% for i in icons %}
        <img src="{{ i }}">
    {% endfor %}
</div>

[mustaphadem]

Works like a charm, now time to play around with some CSS  

Thank you very much!

[drakedev]

You're welcome, happy that it worked.