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.     {% if is_mobile() %}
  5.         {% set path = source_path|imagine_filter('hyfindr_product_mobile_thumbnail') %}
  6.     {% else %}
  7.         {% set path = source_path|imagine_filter(filter|default('hyfindr_product_large_thumbnail')) %}
  8.     {% endif %}
  9. {% elseif product.images.first %}
  10.     {% set source_path = product.images.first.path %}
  11.     {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  12.     {% if is_mobile() %}
  13.         {% set path = source_path|imagine_filter('hyfindr_product_mobile_thumbnail') %}
  14.     {% else %}
  15.         {% set path = source_path|imagine_filter(filter|default('hyfindr_product_large_thumbnail')) %}
  16.     {% endif %}
  17. {% else %}
  18.     {% set original_path = asset('assets/shop/img/400x300.png') %}
  19.     {% set path = original_path %}
  20. {% endif %}
  22. {% if is_mobile() %}
  23.     <div class="swiper pdp-Swiper swiper-initialized swiper-horizontal swiper-ios swiper-backface-hidden">
  24.         <div class="swiper-wrapper-pdp">
  25.             {% for image in product.images %}
  26.                 <div class="swiper-slide slide_1" role="group">
  27.                     <a href="{{ image.path|imagine_filter('sylius_shop_product_original') }}" data-lightbox="sylius-product-image">
  28.                         <img src="{{ image.path|imagine_filter('hyfindr_product_mobile_thumbnail') }}" alt="Slide Image">
  29.                     </a>
  30.                 </div>
  31.             {% endfor %}
  32.         </div>
  33.         <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"></div>
  34.         <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
  35.     </div>
  36. {% else %}
  37.     <div class="product-images">
  38.         {# <div data-product-image="{{ path }}" data-product-link="{{ original_path }}"></div> #}
  39.         <a href="{{ original_path }}" data-lightbox="sylius-product-image" id="main-image-container">
  40.             <img src="{{ path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} />
  41.         </a>
  42.         {% if product.images|length > 1 %}
  43.             {{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }}
  44.             <div class="image-thumbnails">
  45.                 {% for image in product.images %}
  46.                     {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_small_thumbnail') : asset('assets/shop/img/200x200.png') %}
  47.                     <div class="ui image">
  48.                         {% if product.isConfigurable() and product.enabledVariants|length > 0 %}
  49.                             {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
  50.                         {% endif %}
  51.                         <a href="{{ image.path|imagine_filter('sylius_shop_product_original') }}" data-lightbox="sylius-product-image">
  52.                             <img src="{{ path }}" data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ product.name }}" class="{{ loop.index > 1 ? 'product-image-inactive' : '' }}"/>
  53.                         </a>
  54.                     </div>
  55.                 {% endfor %}
  56.             </div>
  57.         {% endif %}
  58.     </div>
  59. {% endif %}
  61. <style>
  62. #main-image-container {
  63.     width: 100%; 
  64.     height: 412px; 
  65.     overflow: hidden;
  66. }
  67. #main-image {
  68.     width: 100%; 
  69.     height: 100%; 
  70.     object-fit: contain;
  71. }
  72. </style>