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

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