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.         {% set alt = product.images.first.alt %}
  7.     {% elseif product.images.first %}
  8.         {% set source_path = product.images.first.path %}
  9.         {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  10.         {% set zoom_path = source_path|imagine_filter('app_shop_product_show_zoom') %}
  11.         {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
  12.         {% set alt = product.images.first.alt %}
  13.     {% else %}
  14.         {% set original_path = asset('images/spacer.png') %}
  15.         {% set zoom_path = original_path %}
  16.         {% set path = original_path %}
  17.         {% set alt = product.name %}
  18.     {% endif %}
  20. {% if alt == "" or alt is null %}
  21.     {% set alt = product.name %}
  22. {% endif %}
  23. {% set productIsInWishlist = false %}
  24. {% if wishlist is not defined or wishlist is null %}
  25.     {% set wishlist = app_get_wishlist() %}
  26. {% endif %}
  27. {% if wishlist is defined and wishlist %}
  28.     {% set productIsInWishlist = wishlist.hasProduct(product) %}
  29. {% endif %}
  30. <div class="mx-md-0 mx-n3">
  31.     <div data-product-image="{{ path }}" data-product-link="{{ original_path }}" class="big-img position-relative">
  32.         <div class="btn-slide2-prev artimg-prev d-none d-md-block"></div>
  33.         <div class="btn-slide2-next artimg-next  d-none d-md-block"></div>
  34.         <div class="swiper-container gallery-art-image">
  35.             <div class="swiper-wrapper">
  36.                 <div class="swiper-slide img-bit-article">
  37.                     <a href="{{ zoom_path}}" class="position-relative overflow-hidden" id="bigLink" data-toggle="lightbox">
  38.                         <img  id="big" class="img-fluid  w-100" src="{{ zoom_path}}" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }}/>
  40.                     </a>
  42.                     {% if product.callouts is not null and product.callouts|length > 0 %}
  43.                         {% include "@SetonoSyliusCalloutPlugin/Shop/Product/Callout/_callouts.html.twig" with {'callouts' : product.callouts|setono_callouts, "spot": "product_image"} %}
  44.                     {% endif %}
  47.                     
  48.                     
  50.                 </div>
  51.                 {% if product.images|length > 1 %}
  52.                     {% set myVal = 0 %}
  53.                     {% for image in product.images %}
  54.                         {% if image.alt is not null %}
  55.                             {% set alt = image.alt %}
  56.                         {% else %}
  57.                             {% set alt = product.name %}
  58.                         {% endif %}
  59.                         {% set myVal = myVal + 1 %}
  60.                         {% if myVal > 1 %}
  61.                         {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_small_thumbnail') : asset('images/spacer.png') %}
  62.                         <div class="img-bit-article swiper-slide" data-js-product-thumbnail>
  63.                             {% if product.isConfigurable() and product.variants|length > 0 %}
  64.                                 {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
  65.                             {% endif %}
  66.                             <a href="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" class="" data-toggle="lightbox" data-gallery="test-{{myVal}}" >
  67.                                 {% if app_file_exists((path ~ ".webp")|replace({"resolve/": ""})) %}
  68.                                     <img class="w-100" src="{{ (path ~ ".webp")|replace({'resolve/':''}) }}" data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ product.name }}" />
  69.                                 {% else %}
  70.                                     <img class="w-100" src="{{ path }}" data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ alt }}" />
  71.                                 {% endif %}
  72.                             </a>
  73.                         </div>
  74.                         {% endif %}
  75.                     {% endfor %}
  76.                 {% endif %}
  77.             </div>
  78.             <div class="position-relative pt-md-3 pt-2 d-flex_ d-md-none_ d-none align-items-center justify-content-center container-pagination">
  79.                 <div class="swiper-pagination swiper-pagination-produit position-relative bottom-0 w-auto"></div>
  80.             </div>
  81.         </div>
  82.     </div>
  83.     <div class="thumbs-img-art d-none d-md-block">
  84.         <div class="swiper-container gallery-thumbs-art"> 
  85.             <div class="swiper-wrapper">
  86.                 <div class="swiper-slide gallery-bit-article ">
  87.                     {% include '@SyliusShop/Product/Show/_video.html.twig' %}
  88.                 </div>
  89.                 {% if product.images|length > 0 %} 
  90.                     {% set myVal2 = 0 %}
  91.                     {{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }}
  92.                     {% for image in product.images %}
  93.                         {% set myVal2 = myVal2 + 1 %}
  94.                         {% if myVal2 > 0 %}
  95.                             {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_small_thumbnail') : '//placehold.it/200x200' %}
  96.                             <div class="swiper-slide gallery-bit-article " data-js-product-thumbnail>
  97.                                 {% if product.isConfigurable() and product.variants|length > 0 %}
  98.                                     {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
  99.                                 {% endif %}
  100.                                 <a class="cursor-pointer" data-toggle="lightbox" href="{{ image.path|imagine_filter('app_shop_product_show_zoom') }}">
  101.                                     <img class="w-100" src="{{ path }}" data-large-thumbnail="{{ image.path|imagine_filter('app_shop_product_show_zoom') }}" alt="{{ product.name }}" />
  102.                                 </a>
  103.                             </div>  
  104.                             {% endif %} 
  105.                     {% endfor %} 
  106.                 {% endif %}
  107.             </div>
  108.         </div>
  109.     </div>
  110. </div>