{% if product.imagesByType('main') is not empty %}
    {% set source_path = product.imagesByType('main').first.path %}
    {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
    {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
{% elseif product.images.first %}
    {% set source_path = product.images.first.path %}
    {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
    {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
{% else %}
    {% set original_path = '//placehold.it/400x300' %}
    {% set path = original_path %}
{% endif %}
<div class="product-image">
    {# <div data-product-image="{{ path }}" data-product-link="{{ original_path }}"></div>
    <a href="{{ original_path }}" class="ui fluid image" data-lightbox="sylius-product-image">
        <img src="{{ path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} />
    </a> #}
    <div class="product_img_box">
        <img id="product_img" src='{{ original_path }}' data-zoom-image="{{ path }}" alt="{{ product.name }}" />
        <a href="#" class="product_img_zoom" title="Zoom">
            <span class="linearicons-zoom-in"></span>
        </a>
    </div>
{% if product.images|length > 1 %}

{# {{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }} #}

<div id="pr_item_gallery" class="product_gallery_item slick_slider" data-slides-to-show="4" data-slides-to-scroll="1" data-infinite="false">
    {% for image in product.images %}
    {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_small_thumbnail') : '//placehold.it/200x200' %}
    <div class="item">
    {# {% if product.isConfigurable() and product.enabledVariants|length > 0 %}
        {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
    {% endif %} #}
        {# <a href="{{ image.path|imagine_filter('sylius_shop_product_original') }}" data-lightbox="sylius-product-image">
            <img src="{{ path }}" data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ product.name }}" />
        </a> #}
                    
                <a href="{{ image.path|imagine_filter('sylius_shop_product_original') }}" class="product_gallery_item active" data-image="{{ image.path|imagine_filter('sylius_shop_product_original') }}" data-zoom-image="{{ image.path|imagine_filter('sylius_shop_product_original') }}">
                    <img src="{{ path }}" alt="{{ product.name }}" />
                </a>
    </div>
    {% endfor %}
</div>
{% endif %}
</div>
    {# <div class="product-image">
        <div class="product_img_box">
            <img id="product_img" src='assets/images/product_img1.jpg' data-zoom-image="assets/images/product_zoom_img1.jpg" alt="product_img1" />
            <a href="#" class="product_img_zoom" title="Zoom">
                <span class="linearicons-zoom-in"></span>
            </a>
        </div>
        <div id="pr_item_gallery" class="product_gallery_item slick_slider" data-slides-to-show="4" data-slides-to-scroll="1" data-infinite="false">
            <div class="item">
                <a href="#" class="product_gallery_item active" data-image="assets/images/product_img1.jpg" data-zoom-image="assets/images/product_zoom_img1.jpg">
                    <img src="assets/images/product_small_img1.jpg" alt="product_small_img1" />
                </a>
            </div>
            <div class="item">
                <a href="#" class="product_gallery_item" data-image="assets/images/product_img1-2.jpg" data-zoom-image="assets/images/product_zoom_img2.jpg">
                    <img src="assets/images/product_small_img2.jpg" alt="product_small_img2" />
                </a>
            </div>
            <div class="item">
                <a href="#" class="product_gallery_item" data-image="assets/images/product_img1-3.jpg" data-zoom-image="assets/images/product_zoom_img3.jpg">
                    <img src="assets/images/product_small_img3.jpg" alt="product_small_img3" />
                </a>
            </div>
            <div class="item">
                <a href="#" class="product_gallery_item" data-image="assets/images/product_img1-4.jpg" data-zoom-image="assets/images/product_zoom_img4.jpg">
                    <img src="assets/images/product_small_img4.jpg" alt="product_small_img4" />
                </a>
            </div>
        </div>
    </div>
</div> #}