src/Package/Openform/Front/Templates/RelictPack/_templates/template-o15b.html.twig line 1

Open in your IDE?
  1. {% from '@openform_front_templates/_includes/_icons.html.twig' import fullscreen, zoomin, zoomout, arrowObjectPrev, arrowObjectNext, arrowright, info, sliderprev, slidernext, copyrights, infoClose, info %}
  2. {% set ImageSlides = entity.ImageSlide|filterVisibles(app.request.locale) %}
  3. <div class="collections__container" style="{% if not entity.showHeader %}height:100vh; {% elseif rootParent is defined and rootParent.headerHeight is defined and rootParent.headerHeight %}height: calc(100vh - {{rootParent.headerHeight}}px);{% else %} height: calc( 100vh - 90px );{% endif %}">
  4.     <div class="collections__wrapper" style="width: {{entity.textAreaWidth ? 'calc(100% - ' ~ entity.textAreaWidth ~ '%)' : '64%'}}; {{entity.imageBackgroundColor ? "background-color:" ~  entity.imageBackgroundColor ~ ";" }}">
  5.     {% if ImageSlides|length > 0 %}
  6.     <div class="js-collection-gallery-standard" style="width: 96%; position: relative; margin: 0 auto; height: 100%">
  7.         <div class="collections__line" style="height: {{entity.lineHeight|default('2')}}%; background-color: {{entity.lineColor|default('#231F17')}};"></div>
  8.         <div class="splide js-collections-gallery-o8 collection-gallery" style="height: {{entity.lineHeight ? 96 - entity.lineHeight : 94}}%;">
  9.             <div class="splide__track">
  10.                 <ul class="splide__list">
  11.                    {% for key1, images in entity.getImageSlidePairs() %}
  12.                                 
  13.                                 <li class="splide__slide" style="display:flex; align-items: center; justify-content:center; gap:32px;" style="height: 100%;">
  14.                                     {% for key2, image in images %}
  15.                                         {% set img = openform_front_util.getImagePathByType(image.Thumb ?? '','original') %}
  16.                                         {# {% set imgSmall = openform_front_util.getImagePathByType(image.Thumb ?? '','detal') %}
  17.                                         {% set imgPagination = openform_front_util.getImagePathByType(image.Thumb ?? '','list') %} #}
  18.                                         <div class="js-zoom" data-alt="{{image.Translation[app.request.locale].alt}}" style="{{key2 == 0 ?'width: 44%;' : key2 == 1 ? 'width: 30%;'}} height: 100%; display:flex; align-items: center; justify-content: flex-end; flex-direction:column;">
  19.                                             <div class="collection-gallery__item" style="height: 100%; max-height: 100%; display:flex; flex-direction:column; justify-content:center; align-items: center;">
  20.                                                 <div style="{{image.imageWidth ? 'width:' ~ image.imageWidth ~ '%;' : 'width: 100%;'}}
  21.                                                 {{image.imageHeight ? 'height:' ~ image.imageHeight ~ '%;' : 'height: 100%;'}}
  22.                                                 {{image.imageWidth ? 'max-width:' ~ image.imageWidth ~ '%;' : 'max-width: 100%;'}}
  23.                                                 {{image.imageHeight ? 'max-height:' ~ image.imageHeight ~ '%;' : 'max-height: 100%;'}}">
  24.                                                 <style>
  25.                                                     .my-zoomist-{{ key1 == 0 ? key1 + key2 : key1 + key2 + 1}} img{
  26.                                                         {% if image.imageBorderColor and image.imageBorderWidth %}border: {{image.imageBorderColor}} solid {{image.imageBorderWidth}}px;{% endif %}"
  27.                                                     }
  28.                                                     .my-zoomist-{{ key1 == 0 ? key1 + key2 : key1 + key2 + 1}} .zoomist-wrapper{
  29.                                                         background:{{image.imageBackgroundColor ? image.imageBackgroundColor : entity.imageBackgroundColor ? entity.imageBackgroundColor : '#F8F7F0' }};
  30.                                                     }
  31.                                                  </style>
  32.                                                     <div class="my-zoomist my-zoomist-{{ key1 == 0 ? key1 + key2 : key1 + key2 + 1}}" data-zoomist-src="{{img}}" tabindex="0"></div>
  33.                                                 </div>
  34.                                                 
  35.                                             </div>
  36.                                             
  37.                                             <div class="collection-gallery__wrap"style="">
  38.                                                 <div class="collection-gallery__buttons">
  39.                                                     {% if image.Translation[app.request.locale].text is defined and image.Translation[app.request.locale].text %}
  40.                                                                 <div class="object__info-wrap">
  41.                                                                     <button class="collection-gallery__buttons__btn" type="button" aria-expanded="false" data-expanded="js-info-{{ key1 == 0 ? key1 + key2 : key1 + key2 + 1}}" tabindex="0">{{info(('T_INFO')|trans({}, 'openform_front', app.request.locale))}}</button>
  42.                                                                     <div class="object__info object__info--info js-info-{{ key1 == 0 ? key1 + key2 : key1 + key2 + 1}}" data-lenis-prevent>
  43.                                                                         <div class="object__info__text block__text">{{image.Translation[app.request.locale].text|raw}}</div>
  44.                                                                         <button class="object__info__close js-expanded-close" type="button">{{infoClose()}}</button>
  45.                                                                     </div>
  46.                                                                 </div>
  47.                                                     {% endif %}
  48.                                                     {% if image.Translation[app.request.locale].copyrights %}
  49.                                                                 <div class="object__info-wrap">
  50.                                                                     <button class="collection-gallery__buttons__btn" type="button" aria-expanded="false" data-expanded="js-copyright-{{ key1 == 0 ? key1 + key2 : key1 + key2 + 1}}" tabindex="0">{{copyrights(('T_INFO')|trans({}, 'openform_front', app.request.locale))}}</button>
  51.                                                                     <div class="object__info object__info--copyright js-copyright-{{ key1 == 0 ? key1 + key2 : key1 + key2 + 1}}" data-lenis-prevent>
  52.                                                                         <div class="object__info__text block__text">{{image.Translation[app.request.locale].copyrights|raw}}</div>
  53.                                                                         <button class="object__info__close js-expanded-close" type="button">{{infoClose()}}</button>
  54.                                                                     </div>
  55.                                                                 </div>
  56.                                                     {% endif %}
  57.                                                     <button class="collection-gallery__buttons__btn js-fullscreen" data-alt="{{image.Translation[app.request.locale].alt}}" tabindex="0" data-color="{{image.imageBackgroundColor is defined and image.imageBackgroundColor ? image.imageBackgroundColor }}"
  58.                                                         data-image="{{img}}"
  59.                                                         data-description="{{image.Translation[app.request.locale].text}}"
  60.                                                         data-copyrights="{{image.Translation[app.request.locale].copyrights}}"
  61.                                                         data-start="{{ key1 == 0 ? key1 + key2 : key1 + key2 + 1}}"
  62.                                                         data-imagestyle="{% if image.imageBorderColor and image.imageBorderWidth %}border: {{image.imageBorderColor}} solid {{image.imageBorderWidth}}px;{% endif %}"
  63.                                                     >
  64.                                                     {{fullscreen(('T_FULLSCREEN')|trans({}, 'openform_front', app.request.locale))}}
  65.                                                     </button>
  66.                                                     <button class="collection-gallery__buttons__btn js-zoom-out">{{zoomout(('T_ZOOMOUT')|trans({}, 'openform_front', app.request.locale))}}</button>
  67.                                                     <button class="collection-gallery__buttons__btn js-zoom-in">{{zoomin(('T_ZOOMIN')|trans({}, 'openform_front', app.request.locale))}}</button>
  68.                                                 </div>
  69.                                             </div>
  70.                                         </div>
  71.                                     {% endfor %} 
  72.                                 </li>    
  73.                             {% endfor %}            
  74.                 </ul>
  75.                                     <div class="splide__arrows{{ ImageSlides|length < 2 ? ' hide' }}">
  76.                                         <div class="slider-nav collection-gallery__nav">
  77.                                             <button class="splide__arrow splide__arrow--prev slider-nav__btn slider-nav__btn--prev" disabled>
  78.                                                 {{ sliderprev('PREV_SLIDE'|trans({}, 'openform_front', app.request.locale)) }}
  79.                                             </button>
  80.                                             <button class="splide__arrow splide__arrow--next slider-nav__btn slider-nav__btn--next">
  81.                                                 {{ slidernext('NEXT_SLIDE'|trans({}, 'openform_front', app.request.locale)) }}
  82.                                             </button>
  83.                                         </div>
  84.                                     </div>
  85.                                 </div>
  86.                             </div>
  87.                     </div>
  88.     {% endif %}
  89.     </div>
  90.     <div class="collections__wrapper" style="width: {{entity.textAreaWidth|default('36')}}%;" data-lenis-prevent>
  91.         <div class="collections__content__image" style="{{entity.imageBackgroundColor ? "background-color:" ~  entity.imageBackgroundColor ~ ";" }} height: {{entity.imageHeight|default('47') }}%;">
  92.             {% set img = openform_front_util.getImagePathByType(entity.Thumb ?? '','detail') %}
  93.              <img src="{{img}}" alt="{{entity.Translation[app.request.locale].alt}}" style="height: 100%; {% if entity.imageBorderColor and entity.imageBorderWidth %}outline: {{entity.imageBorderColor}} solid {{entity.imageBorderWidth}}px;{% endif %} width: {{entity.imageWidth|default('100') }}%;">
  94.         </div>
  95.         <div class="collections__content" style="background: {{entity.background|default('#F5DB7B') }}; height: {{entity.imageHeight ? 100 - entity.imageHeight - 9 : 44 }}%;">
  96.             {% if entity.Translation[app.request.locale].titleHtml is defined and entity.Translation[app.request.locale].titleHtml %}
  97.                 <div class="collections__content__title block__h3">
  98.                     {{ entity.Translation[app.request.locale].titleHtml|raw }}
  99.                 </div>
  100.             {% endif %}
  101.             {% if entity.Translation[app.request.locale].attributesText is defined and entity.Translation[app.request.locale].attributesText %}
  102.                 <div class="collections__content__text block__text">
  103.                     {{ entity.Translation[app.request.locale].attributesText|raw }}
  104.                 </div>
  105.             {% endif %}
  106.             {% if entity.link is defined and entity.link %}
  107.                     <a href="{{entity.link}}" class="block-text__btns__btn button-read-more button-read-more--black">
  108.                         <span>{{('T_RELICT_LINK')|trans({}, 'openform_front', app.request.locale)}}</span>
  109.                         {{arrowright()}}
  110.                     </a>
  111.             {% endif %}
  112.             {% if entity.Translation[app.request.locale].text is defined and entity.Translation[app.request.locale].text %}
  113.                 <div class="collections__content__text block__text">
  114.                     {{ entity.Translation[app.request.locale].text|raw }}
  115.                 </div>
  116.             {% endif %}
  117.             {% if entity.filePath is defined and entity.filePath and openform_front_util.isMp3File(entity.filePath) %}
  118.                 <div class="block-image__image__audio">
  119.                     <div class="block-audio__player">
  120.                         <audio controls class="js-audio-player block-audio__inner">
  121.                             <source src="{{ entity.filePath }}">
  122.                             Your browser does not support the audio element.
  123.                         </audio>
  124.                     </div>
  125.                 </div>
  126.             {% endif %}
  127.             {% if entity.Translation[app.request.locale].description is defined and entity.Translation[app.request.locale].description %}
  128.                 <div class="collections__content__text block__text">
  129.                     {{ entity.Translation[app.request.locale].description|raw }}
  130.                 </div>
  131.             {% endif %}
  132.             
  133.             
  134.         </div>
  135.         <div class="collections__arrows" style="background: {{entity.naviBackgroundColor|default('transparent') }};">
  136.             {% for key, Relict in entity.RelictPack.getVisibleRelicts(app.request.locale) %}
  137.                         {% if entity.id == Relict.id  %}
  138.                             {% if entity.RelictPack.getVisibleRelicts(app.request.locale)[key - 1] is defined %}
  139.                                 {% set prevElement = entity.RelictPack.getVisibleRelicts(app.request.locale)[key - 1] %}
  140.                                 {% set href = toolkit_route_localizer.generate('relict_item',{ slug : prevElement.Translation[app.request.locale].slug }, app.request.locale) %}
  141.                                 <a href="{{href}}" class="slider-nav__btn slider-nav__btn--prev">
  142.                                     {{ sliderprev('PREV_Relict'|trans({}, 'openform_front', app.request.locale)) }}
  143.                                 </a>
  144.                             {% endif%}
  145.                             {% if entity.RelictPack.getVisibleRelicts(app.request.locale)|length > 0 %}
  146.                                 <div class="collections__arrows__numbers">
  147.                                     <span>{{ key + 1 }}</span>/{{ entity.RelictPack.getVisibleRelicts(app.request.locale) is defined ? entity.RelictPack.getVisibleRelicts(app.request.locale)|length }}
  148.                                 </div>
  149.                             {% endif %}
  150.                             {% if entity.RelictPack.getVisibleRelicts(app.request.locale)[key + 1] is defined %}
  151.                                 {% set nextElement = entity.RelictPack.getVisibleRelicts(app.request.locale)[key + 1] %}
  152.                                 {% set href = toolkit_route_localizer.generate('relict_item',{ slug : nextElement.Translation[app.request.locale].slug }, app.request.locale) %}
  153.                                 <a href="{{href}}" class="slider-nav__btn slider-nav__btn--next object__nav__button--right">
  154.                                     {{ slidernext('Next_Relict'|trans({}, 'openform_front', app.request.locale)) }}
  155.                                 </a>
  156.                             {% endif%}
  157.                         {% endif %}
  158.             {% endfor %}
  159.         </div>
  160.     </div> 
  161.    
  162. </div>