{% set nonVariantImages = [] %}
{% set variantImages = [] %}

{% for image in product.images %}
    {% if image.productVariants|length == 0 %}
        {% set nonVariantImages = nonVariantImages|merge([image]) %}
    {% else %}
        {% set variantImages = variantImages|merge([image]) %}
    {% endif %}
{% endfor %}

{% set orderedImages = nonVariantImages|merge(variantImages) %}

{% if orderedImages|length > 0 %}
    {% set firstImage = orderedImages|first %}
    {% set path = firstImage.path|imagine_filter(filter|default('sylius_shop_product_original')) %}
{% else %}
    {% set size = random(5) * 200 %}
    {% set path = "https://picsum.photos/#{ size }/#{ size }.jpg" %}
{% endif %}

<div class="ratio ratio-1x1">
    <img src="{{ path }}" alt="{{ product.name }}" class="{{ class|default('') }} object-fit-cover rounded-3 border border-light bg-light" {{ sylius_test_html_attribute('main-image') }} />
</div>