Adding Image and Video (metafield) on product page

[Dharmit]

{% for i in (1..12) %}
  {% capture image_key %}image_{{ i }}{% endcapture %}
  {% assign media = product.metafields.custom[image_key] %}
  
  {% if media %}

    <pre> {{ media }}</pre>

    {% if media contains 'gid://shopify/Video' %}
      <p>Media Type: Video</p>
    {% endif %}

    <pre>{{ media | media_tag }}</pre>
    <div class="gallery-image gallery-image-{{ i }}">
      {% if media contains "gid://shopify/Video" %}
        <video playsinline="playsinline" controls="controls" preload="metadata" >
          <source src="{{ media | media_tag }}" type="video/mp4">
        </video>
      {% else %}
        <img src="{{ media | img_url: 'master' }}" width="100%" height="100%" alt="Gallery Image {{ i }}">
      {% endif %}
    </div>

  {% endif %}
{% endfor %}

I'm using 12 custom metafields in my Shopify product and looping through them to display media. My goal is to check whether the uploaded media is an image or a video and render it accordingly.

Currently, I'm extracting the gid from {{ media }}, and for videos, I see values like gid://shopify/Video/. However, when I use a condition to check the type and render it properly, the output is incorrect.

However, the condition doesn't seem to work as expected. How can I properly check whether the metafield contains an image or a video and display it correctly?

Any guidance would be greatly appreciated. Thanks in advance!

[Kyle_liu]

Hi  @Dharmit 

Try this

{% assign media = product.metafields.custom[image_key].value %}

{% assign media = product.metafields.custom[image_key].value %}