templates/includes/areas/images-with-detail-text.html.twig line 1

Open in your IDE?
  1. {% set isDecor = isDecor | default(false) %}
  2. {% set isSurface = isSurface | default(false) %}
  4. {% set isAnchorNavItem = isAnchorNavItem|default(false) %}
  5. {% set anchorNavTitle = anchorNavTitle|default(null) %}
  6. {% set anchorNavPosition = anchorNavPosition|default(null) %}
  8. <section class="content-block {{ anchorNavTitle }} {{ isAnchorNavItem ? 'js-anchor-nav__item' : '' }}"
  9.     {{ anchorNavTitle ? 'data-anchor-nav-title='~anchorNavTitle~'' : '' }}
  10.     {{ anchorNavPosition ? 'data-anchor-nav-position='~anchorNavPosition~'' : '' }}>
  11.     {% if isDecor %}
  12.         {% if object.isNew and (not decor.newUntilDate or dateIsCurrent(decor.newUntilDate))%}
  13.             <div class="position-relative ribbon-new__container ">
  14.         {% endif %}
  15.             {% if object.teaserImage %}
  16.                 <div class="ratio ratio-15x7">
  17.                     {{ object.teaserImage.thumbnail('product-landscape').html({
  18.                         imgAttributes:{
  19.                             class:'js-lazy-img ratio-item'
  20.                         },
  21.                         lowQualityPlaceholder:true
  22.                     })|raw }}
  24.                     <div class="ribbon-new__buttons">
  25.                         <div class="d-flex flex-row" style=" background-color: white;">
  26.                             {% if app.user %}
  27.                                 {{ include('includes/utils/wishlist-button.html.twig') }}
  28.                                 <hr style="border: calc(1rem/16) solid black; height: auto; margin:calc(10rem/16) 0;">
  29.                             {% endif %}
  30.                             {% if object.gallery.items is not empty %}
  31.                                 {{ include('includes/areas/multiple-image-download.html.twig', {
  32.                                     object: object,
  33.                                 }) }}
  34.                             {% endif %}
  35.                             {% if object.gallery.items is empty %}
  36.                                 {{ include('includes/areas/single-image-download.html.twig', { object: object }) }}
  37.                             {% endif %}
  38.                         </div>
  39.                     </div>
  40.                 </div>
  41.                 {% if object.isNew and (not decor.newUntilDate or dateIsCurrent(decor.newUntilDate))%}
  42.                     <div class="ribbon-new__ribbon">
  43.                         {{ 'badge.neu' | trans }}
  44.                     </div>
  45.                 {% endif %}
  47.             {% endif %}
  48.             <span class="mt-2">{{ 'detail.color may vary' | trans }}</span>
  50.             {% if object.isNew and (not decor.newUntilDate or dateIsCurrent(decor.newUntilDate)) %}
  51.                 </div>
  52.             {% endif %}
  54.     {% elseif isSurface %}
  55.         <div class="position-relative">
  56.             {% if object.teaserImage %}
  57.                 <div class="ratio ratio-15x7">
  58.                     {{ object.teaserImage.thumbnail('product-landscape').html({
  59.                         imgAttributes:{
  60.                             class:'js-lazy-img ratio-item'
  61.                         },
  62.                         lowQualityPlaceholder:true
  63.                     })|raw }}
  64.                 </div>
  65.                 <div class="position-absolute bottom-0 end-0">
  66.                     <a href="{{ object.teaserImage.thumbnail('product-landscape') }}"
  67.                        download="surface_{{ object.surfaceCode }}.jpg" class="btn btn-white btn--no-transition"><span
  68.                             class="btn__icon"><span
  69.                                 class="icon icon-download" aria-hidden="true"></span></span><span class="btn__text">{{ 'detail.download' | trans }}</span></a>
  70.                 </div>
  71.             {% endif %}
  72.         </div>
  73.     {% else %}
  74.         <div class="row gx-md-4 gx-2">
  75.             <div class="col-8">
  76.                 {% if object.teaserImage %}
  77.                     <div class="ratio ratio-10x7 h-100">
  78.                         {{ object.teaserImage.thumbnail('product-detail-big').html({
  79.                             imgAttributes:{
  80.                                 class:'js-lazy-img ratio-item'
  81.                             },
  82.                             lowQualityPlaceholder:true
  83.                         }) | raw }}
  84.                     </div>
  85.                 {% endif %}
  86.             </div>
  87.             <div class="col-4">
  88.                 <div class="vertical-gutter gy-md-4 gy-2">
  89.                     {% for image in object.gallery %}
  90.                         <div class="vertical-gutter__item">
  91.                             <div class="ratio ratio-10x7">
  92.                                 {{ image.thumbnail('product-detail-small').html({
  93.                                     imgAttributes:{
  94.                                         class:'js-lazy-img ratio-item'
  95.                                     },
  96.                                     lowQualityPlaceholder:true
  97.                                 }) }}
  98.                             </div>
  99.                         </div>
  100.                     {% endfor %}
  101.                 </div>
  102.             </div>
  103.         </div>
  104.     {% endif %}
  107.     {% if shortDescriptionTitle and shortDescription %}
  108.         <div class="mt-4">
  109.             {{ include('includes/title-blocks/title-block.html.twig', {
  110.                 className: 'mb-2',
  111.                 title: shortDescriptionTitle,
  112.                 titleTag:'h2',
  113.                 titleStyle:'h4',
  114.                 subtitle:null
  115.             }) }}
  117.             <div class="wysiwyg">
  118.                 {{ shortDescription|raw }}
  119.             </div>
  120.         </div>
  121.     {% endif %}
  123. </section>