{% if product.imagesByType('thumbnail') is not empty %}
    {% set image = product.imagesByType('thumbnail').first %}
    {% set path = image.path %}
{% elseif product.images.first %}
    {% set image = product.images.first %}
    {% set path = image.path %}
{% else %}
    {% set path = '//placehold.it/200x200' %}
{% endif %}

{%  set runtimeConfigurationImage = [
    {
        'media': '(max-width: 379px)',
        'sizes' : '(max-width: 980px) 100vw, 380px',
        'srcset':
        [
            {'width':'175', 'height': '175'},
        ]
    },
    {
        'media': '(max-width: 767px)',
        'sizes' : '(max-width: 980px) 100vw, 768px',
        'srcset':
        [
            {'width':'265', 'height': '265'},
        ]
    },
    {
        'media': '(max-width: 991px)',
        'sizes' : '(max-width: 980px) 100vw, 992px',
        'srcset':
        [
            {'width':'165', 'height': '165'},
        ]
    },
    {
        'media': '(max-width: 1199px)',
        'sizes' : '(max-width: 980px) 100vw, 1200px',
        'srcset':
        [
            {'width':'232', 'height': '232'},
        ]
    },
    {
        'sizes' : '(max-width: 3488px) 100vw, 1920px',
        'srcset':
        [
            {'width':'280', 'height': '280'},
        ]
    },
]
%}

{% if image is defined and image.alt is defined and image.alt is not empty %}
    {% set alt = image.alt %}
{% else %}
    {% set alt = product.name|default('') %}
{% endif %}

{{ dedi_sylius_image_optimizer_for_image(path, alt, { 'class' : 'w-100' }, runtimeConfigurationImage) }}
