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

Open in your IDE?
  1. <div id="product-image">
  2.     {% if product.imagesByType('main') is not empty %}
  3.         {% set source_path = product.imagesByType('main').first.path %}
  4.         {# {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %} #}
  5.         {# {% set path = source_path | imagine_filter('my_original_webp') %} #}
  6.         {% set final_path = source_path|imagine_filter(filter|default('sylius_shop_product_original')) %}
  7.         {% set final_path_webp = source_path|imagine_filter('my_original_webp') %}
  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('sylius_shop_product_original')) %} #}
  12.         {% set final_path = source_path|imagine_filter(filter|default('sylius_shop_product_original')) %}
  13.         {% set final_path_webp = source_path|imagine_filter('my_original_webp') %}
  14.     {% else %}
  15.         {% set original_path = asset('assets/shop/img/400x300.png') %}
  16.         {# {% set path = original_path %} #}
  17.         {% set final_path_webp = original_path %}
  18.         {% set final_path = original_path %}
  19.     {% endif %}
  21.     {% set taxon = product.mainTaxon %}
  23.     <div data-product-image="{{ final_path }}" data-product-link="{{ final_path }}"></div>
  24.         {# {{ dump(source_path|imagine_filter('my_thumb_webp')) }} #}
  28.     {% if taxon.slug == 'gift-cards' %}
  29.         <div class="ui fluid image">
  30.             <picture>
  31.                 {% if app.environment == "prod" %}
  32.                     <source id="picture_source_1" type="image/webp" data-original="{{ final_path_webp }}" srcset="{{ final_path_webp  }}">
  33.                     <source id="picture_source_2" type="image/jpeg" data-original="{{ final_path }}" srcset="{{ final_path   }}">
  34.                     <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ final_path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} onerror="this.src='{{  final_path  }}';document.getElementById('picture_source_1').srcset=document.getElementById('picture_source_2').srcset=this.src;this.onerror=null;">
  35.                 {% else %}
  36.                     <source id="picture_source_1" type="image/webp" data-original="{{ final_path_webp }}" srcset="{{ final_path_webp }}">
  37.                     <source id="picture_source_2" type="image/jpeg" data-original="{{ final_path }}" srcset="{{ final_path }}">
  38.                     <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ final_path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} onerror="this.src='{{ final_path }}';document.getElementById('picture_source_1').srcset=document.getElementById('picture_source_2').srcset=this.src;this.onerror=null;">
  39.                 {% endif %}
  40.                 {# <img src="{{ path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} /> #}
  41.             </picture>
  42.         </div>
  43.     {% else %}
  45.         <a href="{{ final_path }}" class="ui fluid image --" data-lightbox="sylius-product-image">
  46.             <picture>
  47.                 {# <source type="image/webp" data-original="{{ source_path }}" srcset="{{ source_path | imagine_filter(filter|default('sylius_shop_product_original')) ~ '.webp' | replace({"/resolve"}) }}"> #}
  48.                 {% if app.environment == "prod" %}
  49.                     <source id="picture_source_1" type="image/webp" data-original="{{ final_path_webp }}" srcset="{{ final_path_webp  }}">
  50.                     <source  id="picture_source_2" type="image/jpeg" data-original="{{ final_path }}" srcset="{{ final_path  }}">
  51.                     <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ final_path  }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} onerror="this.src='{{  final_path  }}';document.getElementById('picture_source_1').srcset=document.getElementById('picture_source_2').srcset=this.src;this.onerror=null;">
  52.                 {% else %}
  53.                     <source id="picture_source_1" type="image/webp" data-original="{{ final_path_webp }}" srcset="{{ final_path_webp }}">
  54.                     <source id="picture_source_2" type="image/jpeg" data-original="{{ final_path }}" srcset="{{ final_path }}">
  55.                     <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ final_path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} onerror="this.src='{{ final_path }}';document.getElementById('picture_source_1').srcset=document.getElementById('picture_source_2').srcset=this.src;this.onerror=null;">
  56.                 {% endif %}
  57.             </picture>
  58.             {# <img src="{{ path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} /> #}
  59.         </a>
  60.     {% endif %}
  61.     {% if product.images|length > 1 %}
  62.     <div class="ui hidden divider"></div>
  64.     {{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }}
  66.     <div class="owl-carousel images">
  67.         {% for image in product.images %}
  68.             {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_small_thumbnail') : asset('assets/shop/img/200x200.png') %}
  69.             <div class="item">
  70.                 {% if product.isConfigurable() and product.enabledVariants|length > 0 %}
  71.                     {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
  72.                 {% endif %}
  73.                 <a href="{{ image.path|imagine_filter('sylius_shop_product_original') }}" data-lightbox="sylius-product-image">
  74.                     <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ path }}" data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ product.name }}" />
  75.                 </a>
  76.             </div>
  77.         {% endfor %}
  78.     </div>
  79.     {% endif %}
  80. </div>