I am currently building a commerce shop. Usually, I use embed, entity browser and dropzone js, to make a product images collection available to shop administrators. This time, I used a Drupal media collection as a product variation field. And now I don't know how to loop through the fields array to retrieve the file uris for each image.
<div class="gallery">
{% for item in product.variation_field_product_images['#items'] %}
{% if loop.first %}
<figure class="gallery_thumb first">
<a href="{{ file_url(item.entity.uri.value) }}" data-size="1024x1024">
<img src="{{ file_url(item.entity.uri.value) }}" alt="Product Title" />
</a>
</figure>
{% else %}
<figure class="gallery_thumb">
<a href="{{ file_url(item.entity.uri.value) }}" data-size="1024x1024">
<img src="{{ file_url(item.entity.uri.value) }}" alt="Product Title" />
</a>
</figure>
{% endif %}
{% endfor %}
</div>
The above code works as desired for a ordinary image field type. But when I set the type to media, the file uri is rendered as "unknown".
{{ product.variation_field_product_images.0 }}
{{ product.variation_field_product_images.1 }}
The above twig code for example gives me back the first two images rendered as complete image tags. But I am somehow not able to get the desired file uri. Thank you very much in advance!