themes/BootstrapTheme/templates/bundles/SyliusShopBundle/Product/Show/_images.html.twig line 1

Open in your IDE?
  1. {% if product.imagesByType('main') is not empty %}
  2.     {% set source_path = product.imagesByType('main').first.path %}
  3.     {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  4.     {% set zoom_path = source_path|imagine_filter('app_shop_product_show_zoom') %}
  5.     {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
  6. {% elseif product.images.first %}
  7.     {% set source_path = product.images.first.path %}
  8.     {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  9.      {% set zoom_path = source_path|imagine_filter('app_shop_product_show_zoom') %}
  10.     {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
  11. {% else %}
  12.     {% set original_path = asset('images/spacer.png') %}
  13.      {% set zoom_path = asset('images/spacer.png') %}
  14.     {% set path = original_path %} 
  15. {% endif %}
  16. <div class="d-flex_">
  17.     <div data-product-image="{{ path }}" data-product-link="{{ original_path }}" class="big-img {% if product.images|length > 1 %}{% else %}hasno-supp w-100{% endif %}">
  18.         <div class="swiper-container gallery-art-image">
  19.             <div class="swiper-wrapper">
  20.                 <div class="swiper-slide img-bit-article ">
  21.                     <a href="{{ zoom_path}}" class="zoomable" id="bigLink">
  22.                         <img  id="big" class="img-fluid  w-100" src="{{ zoom_path}}" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }}/>
  23.                     </a>
  24.                     {% if product.callouts is not null %}
  25.                         {% include "@SetonoSyliusCalloutPlugin/Shop/Product/Callout/_callouts.html.twig" with {'callouts' : product.callouts|setono_callouts} %}
  26.                     {% endif %}
  27.                 </div>
  28.                 {% if product.images|length > 1 %} 
  29.                     {% set myVal = 0 %}
  30.                     {% for image in product.images %}
  31.                         {% set myVal = myVal + 1 %}
  32.                         {% if myVal > 1 %}
  33.                         {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_small_thumbnail') : asset('images/spacer.png') %}
  34.                         <div class="img-bit-article   swiper-slide" data-js-product-thumbnail>
  35.                             {% if product.isConfigurable() and product.variants|length > 0 %}
  36.                                 {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
  37.                             {% endif %}
  38.                             <a href="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" class=""  >
  39.                                 <img class="w-100" src="{{ path }}" data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ product.name }}" />
  40.                             </a>
  41.                         </div> 
  42.                         {% endif %}
  43.                     {% endfor %} 
  44.                 {% endif %}
  45.             </div>
  46.             {% if product.images|length > 1 %} 
  47.             <div class="text-center content-pagination pt-2">
  48.                 <div class="select-container position-relative">
  49.                     <div class="artimg-prev btn2-slide-prev"></div>
  50.                     <div class="artimg-next btn2-slide-next"></div>
  51.                     <div class="swiper-pagination swiper-pagination-produit"></div> 
  52.                 </div> 
  53.             </div>
  54.              {% endif %}
  55.         </div>
  56.     </div>
  57.    
  58.     <div class="thumbs-img-art d-none d-md-block {% if product.images|length <= 0 %} hidden-important {% endif %} ">
  59.         <div class="swiper-container gallery-thumbs-art">
  60.             <div class="swiper-wrapper">
  61.                 <div class="swiper-slide gallery-bit-article ">
  62.                     <div class="cursor-pointer"><img src="{{ zoom_path }}" alt="" class="w-100" /></div>
  63.                 </div> 
  64.                 {% if product.images|length > 1 %} 
  65.                     {% set myVal2 = 0 %}
  66.                     {{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }}
  67.                     {% for image in product.images %}
  68.                         {% set myVal2 = myVal2 + 1 %}
  69.                         {% if myVal2 > 1 %}
  70.                             {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_small_thumbnail') : '//placehold.it/200x200' %}
  71.                             <div class="swiper-slide gallery-bit-article " data-js-product-thumbnail>
  72.                                 {% if product.isConfigurable() and product.variants|length > 0 %}
  73.                                     {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
  74.                                 {% endif %}
  75.                                 <div class="cursor-pointer">
  76.                                     <img class="w-100" src="{{ path }}" data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ product.name }}" />
  77.                                 </div>
  78.                             </div> 
  79.                             {% endif %} 
  80.                     {% endfor %} 
  81.                 {% endif %}
  82.             </div>
  83.         </div>
  84.     </div>
  85.     
  86.     
  87. </div>