themes/BootstrapChildTheme/SyliusShopBundle/views/Product/Show/_images.html.twig line 1

Open in your IDE?
  1. {% set hasMain = false %}
  3. {% if product.imagesByType('main') is not empty %}
  4.     {% set hasMain = true %}
  5.     {% set source_path = product.imagesByType('main').first.path %}
  6.     {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  7.     {% set path = source_path|imagine_filter(filter|default('app_shop_product_large_thumbnail')) %}
  8. {% elseif product.images.first %}
  9.     {% set source_path = product.images.first.path %}
  10.     {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  11.     {% set path = source_path|imagine_filter(filter|default('app_shop_product_large_thumbnail')) %}
  12. {% else %}
  13.     {% set original_path = 'https://via.placeholder.com/400x300' %}
  14.     {% set path = original_path %}
  15. {% endif %}
  17. <div class="gallery d-none d-lg-block">
  18.     <div class="row">
  19.         <div class="col {% if product.images|length > 1 %}col-md-9{% endif %}">
  20.             <a href="{{ original_path }}" class="image" data-lightbox="sylius-product-image">
  21.                 <img class="main-image" src="{{ path }}" alt="{{ product.name }}">
  22.             </a>
  23.         </div>
  24.         {% if product.images|length > 1 %}
  25.             <div class="col-md-3 ">
  26.                 {{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }}
  28.                 <div class="tiny-images">
  29.                     {% set count = 0 %}
  30.                     {% for image in product.images %}
  31.                         {% if (hasMain == true and image.type != 'main') or (hasMain == false and count > 0) %}
  32.                             {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_small_thumbnail') : '//placehold.it/200x200' %}
  33.                             <div class="tiny-image-box{% if count > 4 %} d-none{% endif %}">
  34.                                 {#{% if product.isConfigurable() and product.enabledVariants|length > 0 %}
  35.                                     {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
  36.                                 {% endif %}#}
  37.                                 <a class="tiny-link" href="{{ image.path|imagine_filter('sylius_shop_product_original') }}" data-lightbox="sylius-product-image">
  38.                                     <img class="tiny-image" src="{{ path }}" alt="{{ product.name }}">
  39.                                     {% if count > 5 %}<span class="tiny-others-images">+{{ product.images|length - 5 }}</span>{% endif %}
  40.                                 </a>
  41.                             </div>
  42.                         {% endif %}
  44.                         {% set count = count + 1 %}
  45.                     {% endfor %}
  46.                 </div>
  47.             </div>
  48.         {% endif %}
  49.     </div>
  50. </div>
  52. <div class="col-xs-10 offset-xs-1 col-sm-8 offset-sm-2">
  53.     <div class="splide d-lg-none mb-7">
  54.         <div class="splide__track">
  55.             <ul class="splide__list">
  56.                 {% for image in product.images %}
  57.                     <li class="splide__slide">
  58.                         <img class="splide-img" src="{{ image.path|imagine_filter('sylius_shop_product_original') }}" alt="{{ product.name }}">
  59.                     </li>
  60.                 {% endfor %}
  61.             </ul>
  62.         </div>
  63.     </div>
  64. </div>