src/Package/Openform/Front/Templates/RelictPack/_templates/template-o4a.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__wrapper" style="width: {{entity.lineHeightLeft|default('9') }}%; background: {{entity.imageBackgroundColor|default('#F8F7F0') }}; {% if not entity.showHeader %}padding-top:{{rootParent is defined and rootParent.headerHeight is defined and rootParent.headerHeight ? rootParent.headerHeight : 90}}px; {% else %} padding-top: 0.8%;{% endif %} height:100%; ">
  5.     {% set img = openform_front_util.getImagePathByType(entity.Thumb ?? '','column') %}
  6.     {% if img is defined and img %}
  7.         <div class="collections__wrapper__fullsize" style="background:{{entity.lineColorLeft|default('#231F17')}}; height: calc(100% - {{entity.lineHeightBottom2|default('3.3') }}% - 36px);">
  8.         </div>
  9.     {% endif %}
  10. </div>
  11. <div class="collections__container" style="width:  {{ entity.lineHeightLeft is same as(0) ? 100 : entity.lineHeightLeft ? 100 - entity.lineHeightLeft : 91 }}%; height: 100%; max-height:100%; background: {{entity.imageBackgroundColor|default('#F8F7F0') }}; {% if not entity.showHeader %}padding-top:{{rootParent is defined and rootParent.headerHeight is defined and rootParent.headerHeight ? rootParent.headerHeight : 90}}px; {% else %} padding-top: 0.8%;{% endif %}">
  12.     <div class="collections__line {% if not entity.showHeader %}collections__line--padding{% endif %}" style="background: {{entity.imageBackgroundColor|default('#F8F7F0') }}; max-height:{{entity.lineHeightTop1|default('1') }}%;  min-height:{{entity.lineHeightTop1|default('1') }}%;">
  13.         <div class="collections__line__inner" style="width: 100%; background: {{entity.lineColorTop1|default('#F5DB7B') }}; height:100%;"></div>
  14.     </div>
  15.     <div class="collections__container__wrapper" style="height: calc(100% - {{entity.lineHeightTop1|default('1') }}% - 23px - {{entity.lineHeightBottom2|default('3.3') }}% - 36px">
  16.         <div class="collections__wrapper__content" style=" 
  17.         position: relative;
  18.         width: 
  19.             {% if entity.textAreaWidth %}
  20.                 {{ entity.textAreaWidth}}%;
  21.             {% else %}
  22.                 28%;
  23.             {% endif %}
  24.             
  25.         " data-lenis-prevent>  
  26.             <div class="collections__line-2" style="background: {{entity.lineColorTop2|default('#231F17')}}; height: {{entity.lineHeightTop2|default('4')}}%">
  27.                 
  28.             </div>
  29.             
  30.             
  31.             <div class="collections__content" style="background: {{entity.background|default('#F5DB7B') }}; height: {{ entity.lineHeightTop2 and entity.lineHeightBottom1 ? 83.1 - entity.lineHeightTop2 - entity.lineHeightBottom1 : entity.lineHeightTop2 and entity.lineHeightBottom1 == null ? 83.1 - entity.lineHeightTop2 : entity.lineHeightTop2 == null and entity.lineHeightBottom1 ? 83.1 - entity.lineHeightBottom1 : 78 }}%;">
  32.                 <div class="collections__content__scroll">
  33.                     {% if entity.Translation[app.request.locale].titleHtml is defined and entity.Translation[app.request.locale].titleHtml %}
  34.                         <div class="collections__content__title block__h3">
  35.                             {{ entity.Translation[app.request.locale].titleHtml|raw }}
  36.                         </div>
  37.                     {% endif %}
  38.                     
  39.                     {% if entity.link is defined and entity.link %}
  40.                             <a href="{{entity.link}}" class="block-text__btns__btn button-read-more button-read-more--black">
  41.                                 <span>{{('T_RELICT_LINK')|trans({}, 'openform_front', app.request.locale)}}</span>
  42.                                 {{arrowright()}}
  43.                             </a>
  44.                     {% endif %}
  45.                     {% if entity.Translation[app.request.locale].text is defined and entity.Translation[app.request.locale].text %}
  46.                         <div class="collections__content__text block__text">
  47.                             {{ entity.Translation[app.request.locale].text|raw }}
  48.                         </div>
  49.                     {% endif %}
  50.                     {% if entity.filePath is defined and entity.filePath and openform_front_util.isMp3File(entity.filePath) %}
  51.                         <div class="block-image__image__audio">
  52.                             <div class="block-audio__player">
  53.                                 <audio controls class="js-audio-player block-audio__inner">
  54.                                     <source src="{{ entity.filePath }}">
  55.                                     Your browser does not support the audio element.
  56.                                 </audio>
  57.                             </div>
  58.                         </div>
  59.                     {% endif %}
  60.                     {% if entity.Translation[app.request.locale].description is defined and entity.Translation[app.request.locale].description %}
  61.                         <div class="collections__content__text block__text">
  62.                             {{ entity.Translation[app.request.locale].description|raw }}
  63.                         </div>
  64.                     {% endif %}
  65.                     {% if entity.Translation[app.request.locale].attributesText is defined and entity.Translation[app.request.locale].attributesText %}
  66.                         <div class="collections__content__text block__text">
  67.                             {{ entity.Translation[app.request.locale].attributesText|raw }}
  68.                         </div>
  69.                     {% endif %}
  70.                 </div>
  71.                 
  72.                 
  73.                 
  74.             </div>
  75.             <div class="collections__arrows">
  76.                     {% for key, Relict in entity.RelictPack.getVisibleRelicts(app.request.locale) %}
  77.                 {% if entity.id == Relict.id  %}
  78.                     {% if entity.RelictPack.getVisibleRelicts(app.request.locale)[key - 1] is defined %}
  79.                         {% set prevElement = entity.RelictPack.getVisibleRelicts(app.request.locale)[key - 1] %}
  80.                         {% set href = toolkit_route_localizer.generate('relict_item',{ slug : prevElement.Translation[app.request.locale].slug }, app.request.locale) %}
  81.                         <a href="{{href}}" class="slider-nav__btn slider-nav__btn--prev">
  82.                             {{ sliderprev('PREV_Relict'|trans({}, 'openform_front', app.request.locale)) }}
  83.                         </a>
  84.                     {% endif%}
  85.                     {% if entity.RelictPack.getVisibleRelicts(app.request.locale)[key + 1] is defined %}
  86.                         {% set nextElement = entity.RelictPack.getVisibleRelicts(app.request.locale)[key + 1] %}
  87.                         {% set href = toolkit_route_localizer.generate('relict_item',{ slug : nextElement.Translation[app.request.locale].slug }, app.request.locale) %}
  88.                         <a href="{{href}}" class="slider-nav__btn slider-nav__btn--next">
  89.                             {{ slidernext('Next_Relict'|trans({}, 'openform_front', app.request.locale)) }}
  90.                         </a>
  91.                     {% endif%}
  92.                 {% endif %}
  93.     {% endfor %}
  94.                 </div>
  95.                 <div class="collections__line-3" style="position:absolute; bottom: 0; background: {{entity.lineColorBottom1|default('#231F17')}}; height: {{entity.lineHeightBottom1|default('1.1')}}%"></div>
  96.         </div>
  98.         <div class="collections__wrapper" style="background: {{entity.imageBackgroundColor|default('#F8F7F0') }}; width: 
  99.             {% if entity.textAreaWidth %}
  100.                 {{ 100 - entity.textAreaWidth }}%;
  101.             {% else %}
  102.                 72%;
  103.             {% endif %}">
  104.         {% if ImageSlides|length > 0 %}
  106.             <div class="js-collection-gallery-standard" style="height: 84%;">
  107.                 <div class="splide js-collections-gallery-o5 collection-gallery" style="height: 100%;">
  108.                     <div class="splide__track" style="height: 100%;">
  109.                         <ul class="splide__list" style="height: 100%;">
  110.                             {% for key, image in ImageSlides %}
  111.                                 {% set img = openform_front_util.getImagePathByType(image.Thumb ?? '','original') %}
  112.                                 {# {% set imgSmall = openform_front_util.getImagePathByType(image.Thumb ?? '','detal') %}
  113.                                 {% set imgPagination = openform_front_util.getImagePathByType(image.Thumb ?? '','list') %} #}
  114.                                 <li class="splide__slide" style="display:flex; align-items: center; justify-content:center;" style="height: 100%;">
  115.                                     <div class="js-zoom" data-alt="{{image.Translation[app.request.locale].alt}}" style="{{image.imageWidth ? 'width:' ~ image.imageWidth ~ '%;' : 'width: 100%;'}} height: 100%; display:flex; align-items: center; justify-content:center;">
  116.                                         <div class="collection-gallery__item" style="{{image.imageHeight ? 'height:' ~ image.imageHeight ~ '%;' : 'height: 100%;'}} {{image.imageHeight ? 'max-height:' ~ image.imageHeight ~ '%;' : 'max-height: 100%;'}}">
  117.                                                 <style>
  118.                                                     .my-zoomist-{{key}} img{
  119.                                                         {% if image.imageBorderColor and image.imageBorderWidth %}border: {{image.imageBorderColor}} solid {{image.imageBorderWidth}}px;{% endif %}"
  120.                                                     }
  121.                                                     .my-zoomist-{{key}} .zoomist-wrapper{
  122.                                                         background:{{image.imageBackgroundColor ? image.imageBackgroundColor : entity.imageBackgroundColor ? entity.imageBackgroundColor : '#F8F7F0' }};
  123.                                                     }
  124.                                                 </style>
  125.                                             <div class="my-zoomist my-zoomist-{{key}}" data-zoomist-src="{{img}}" data-alt="{{image.Translation[app.request.locale].alt}}" tabindex="0"></div>
  126.                                         </div>
  127.                                         
  128.                                         <div class="collection-gallery__wrap">
  129.                                             <div class="collection-gallery__content block__text">
  130.                                                 {# {{image.Translation[app.request.locale].text ? image.Translation[app.request.locale].text}} #}
  131.                                             </div>
  132.                                             <div class="collection-gallery__buttons">
  133.                                                 {% if image.Translation[app.request.locale].text is defined and image.Translation[app.request.locale].text %}
  134.                                                             <div class="object__info-wrap">
  135.                                                                 <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>
  136.                                                                 <div class="object__info object__info--info js-info-{{key}}" data-lenis-prevent>
  137.                                                                     <div class="object__info__text block__text">{{image.Translation[app.request.locale].text|raw}}</div>
  138.                                                                     <button class="object__info__close js-expanded-close" type="button">{{infoClose()}}</button>
  139.                                                                 </div>
  140.                                                             </div>
  141.                                                         {% endif %}
  142.                                                         {% if image.Translation[app.request.locale].copyrights %}
  143.                                                             <div class="object__info-wrap">
  144.                                                                 <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>
  145.                                                                 <div class="object__info object__info--copyright js-copyright-{{key}}" data-lenis-prevent>
  146.                                                                     <div class="object__info__text block__text">{{image.Translation[app.request.locale].copyrights|raw}}</div>
  147.                                                                     <button class="object__info__close js-expanded-close" type="button">{{infoClose()}}</button>
  148.                                                                 </div>
  149.                                                             </div>
  150.                                                         {% endif %}
  151.                                                 <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 }}"
  152.                                                     data-image="{{img}}"
  153.                                                     data-description="{{image.Translation[app.request.locale].text}}"
  154.                                                     data-copyrights="{{image.Translation[app.request.locale].copyrights}}"
  155.                                                     data-start="{{key}}"
  156.                                                     data-imagestyle="{% if image.imageBorderColor and image.imageBorderWidth %}border: {{image.imageBorderColor}} solid {{image.imageBorderWidth}}px;{% endif %}"
  157.                                                 >
  158.                                                     {{fullscreen(('T_FULLSCREEN')|trans({}, 'openform_front', app.request.locale))}}
  159.                                                 </button>
  160.                                                 <button class="collection-gallery__buttons__btn js-zoom-out">{{zoomout(('T_ZOOMOUT')|trans({}, 'openform_front', app.request.locale))}}</button>
  161.                                                 <button class="collection-gallery__buttons__btn js-zoom-in">{{zoomin(('T_ZOOMIN')|trans({}, 'openform_front', app.request.locale))}}</button>
  162.                                             </div>
  163.                                         </div>
  164.                                     </div>
  165.                                 </li>    
  166.                             {% endfor %}                               
  167.                         </ul>
  169.                         <div class="splide__arrows{{ ImageSlides|length < 2 ? ' hide' }}">
  170.                             <div class="slider-nav collection-gallery__nav collection-gallery__nav--white">
  171.                                 <button class="splide__arrow splide__arrow--prev slider-nav__btn slider-nav__btn--prev" disabled>
  172.                                     {{ sliderprev('PREV_SLIDE'|trans({}, 'openform_front', app.request.locale)) }}
  173.                                 </button>
  174.                                 
  175.                                 <button class="splide__arrow splide__arrow--next slider-nav__btn slider-nav__btn--next">
  176.                                     {{ slidernext('NEXT_SLIDE'|trans({}, 'openform_front', app.request.locale)) }}
  177.                                 </button>
  178.                             </div>
  179.                         </div>
  180.                         <ul class="splide__pagination collection-gallery__pagination"></ul>
  181.                     </div>
  182.                 </div>
  183.             </div>
  184.             {% endif %}
  185.         </div> 
  186.     </div>
  187.     <div class="collections__line-4" style="height: {{entity.lineHeightBottom2|default('3.3') }}%; background: {{entity.lineColorBottom2|default('#231F17') }};"></div>
  188. </div>