src/Package/Openform/Front/Templates/RelictPack/_templates/template-o10.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 %}">
  4. <div class="collections__wrapper" style="
  5.     width:
  6.     {% if entity.imageColumnWidth and entity.textAreaWidth %}
  7.         calc(100vw - {{entity.imageColumnWidth}}vw - {{entity.textAreaWidth}}vw)
  8.     {% elseif entity.textAreaWidth and not entity.imageColumnWidth %}
  9.         calc((100vw - {{entity.textAreaWidth}}vw) / 2)
  10.     {% elseif entity.imageColumnWidth and not entity.textAreaWidth %}
  11.         calc((100vw - {{entity.imageColumnWidth}}vw) / 2)
  12.     {% else %}
  13.         34vw
  14.     {% endif %}; {{entity.sliderThumbsBackgroundColor ? 'background-color: ' ~ entity.sliderThumbsBackgroundColor ~ ';'}}">
  15.                 {% if ImageSlides|length > 0 %}
  16.                     
  17.                     <div class="object__gallery__splide collection-gallery js-collection-gallery-standard" style="height: 100%; background: {{entity.imageBackgroundColor|default('#F8F7F0') }};">
  18.                         <div class="splide js-collections-gallery2 collection-gallery__gallery" style="{{entity.thumbsHeight ? 'height:' ~ (100 - entity.thumbsHeight) ~ '%;' : 'height: 63%;'}}">
  19.                             <div class="splide__track">
  20.                                 <ul class="splide__list" style="height: 100%;">
  21.                                     {% for key, image in ImageSlides %}
  22.                                         {% set img = openform_front_util.getImagePathByType(image.Thumb ?? '','original') %}
  23.                                         {# {% set img = openform_front_util.getImagePathByType(image.Thumb ?? '','temp11') %}
  24.                                         {% set imgPagination = openform_front_util.getImagePathByType(image.Thumb ?? '','list') %} #}
  25.                                         <li class="splide__slide" style="height: 100%;">
  26.                                             <div class="js-zoom" data-alt="{{image.Translation[app.request.locale].alt}}" style="position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;">
  27.                                                 <div class="collection-gallery__item" style="display: flex; justify-content: center; align-items: center; {{image.imageWidth ? 'width:' ~ image.imageWidth ~ '%;' : 'width: 100%;'}}
  28.                                                 {{image.imageHeight ? 'height:' ~ image.imageHeight ~ '%;' : 'height: 100%;'}}
  29.                                                 {{image.imageWidth ? 'max-width:' ~ image.imageWidth ~ '%;' : 'max-width: 100%;'}}
  30.                                                 {{image.imageHeight ? 'max-height:' ~ image.imageHeight ~ '%;' : 'max-height: 100%;'}}
  31.                                                  ">
  32.                                                     <style>
  33.                                                         .my-zoomist-{{key}} img{
  34.                                                             {% if image.imageBorderColor and image.imageBorderWidth %}border: {{image.imageBorderColor}} solid {{image.imageBorderWidth}}px;{% endif %}"
  35.                                                         }
  36.                                                         .my-zoomist-{{key}} .zoomist-wrapper{
  37.                                                             background:{{image.imageBackgroundColor ? image.imageBackgroundColor : entity.imageBackgroundColor ? entity.imageBackgroundColor : '#F8F7F0' }};
  38.                                                         }
  39.                                                     </style>
  40.                                                     <div class="my-zoomist my-zoomist-{{key}}" style="" data-zoomist-src="{{img}}" data-alt="{{image.Translation[app.request.locale].alt}}"></div>
  41.                                                     
  42.                                                 </div>
  43.                                                             
  44.                                                 <div class="collection-gallery__wrap">
  45.                                                     <div class="collection-gallery__content block__text">
  46.                                                     </div>
  47.                                                     <style>
  48.                                                         .collection-gallery-buttons{{image.id}}{
  49.                                                             {% if not image.Translation[app.request.locale].copyrights %}
  50.                                                                 .object__info--info::before {
  51.                                                                     right: 166px;
  52.                                                                 }
  53.                                                             {% endif %}
  54.                                                         }
  55.                                                     </style>
  56.                                                     <div class="collection-gallery__buttons collection-gallery-buttons{{image.id}}">
  57.                                                         {% if image.Translation[app.request.locale].text is defined and image.Translation[app.request.locale].text %}
  58.                                                                 <div class="object__info-wrap">
  59.                                                                     <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>
  60.                                                                     <div class="object__info object__info--info js-info-{{key}}" data-lenis-prevent>
  61.                                                                         <div class="object__info__text block__text">{{image.Translation[app.request.locale].text|raw}}</div>
  62.                                                                         <button class="object__info__close js-expanded-close" type="button">{{infoClose()}}</button>
  63.                                                                     </div>
  64.                                                                 </div>
  65.                                                             {% endif %}
  66.                                                             {% if image.Translation[app.request.locale].copyrights %}
  67.                                                                 <div class="object__info-wrap">
  68.                                                                     <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>
  69.                                                                     <div class="object__info object__info--copyright js-copyright-{{key}}" data-lenis-prevent>
  70.                                                                         <div class="object__info__text block__text">{{image.Translation[app.request.locale].copyrights|raw}}</div>
  71.                                                                         <button class="object__info__close js-expanded-close" type="button">{{infoClose()}}</button>
  72.                                                                     </div>
  73.                                                                 </div>
  74.                                                             {% endif %}
  75.                                                         <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 }}"
  76.                                                             data-image="{{img}}"
  77.                                                             data-description="{{image.Translation[app.request.locale].text}}"
  78.                                                             data-copyrights="{{image.Translation[app.request.locale].copyrights}}"
  79.                                                             data-start="{{key}}"
  80.                                                                         data-imagestyle="{% if image.imageBorderColor and image.imageBorderWidth %}border: {{image.imageBorderColor}} solid {{image.imageBorderWidth}}px;{% endif %}"
  81.                                                         >
  82.                                                             {{fullscreen(('T_FULLSCREEN')|trans({}, 'openform_front', app.request.locale))}}
  83.                                                         </button>
  84.                                                         <button class="collection-gallery__buttons__btn js-zoom-out">{{zoomout(('T_ZOOMOUT')|trans({}, 'openform_front', app.request.locale))}}</button>
  85.                                                         <button class="collection-gallery__buttons__btn js-zoom-in">{{zoomin(('T_ZOOMIN')|trans({}, 'openform_front', app.request.locale))}}</button>
  86.                                                     </div>
  87.                                                 </div>
  88.                                             </div>
  89.                                         </li>    
  91.                                         
  92.                                     {% endfor %}                               
  93.                                 </ul>
  94.                                 {% if entity.showThumbs == null %}
  95.                                 
  96.                                     <div class="splide__arrows splide__arrows-no-thumbs{{ ImageSlides|length < 2 ? ' hide' }}">
  97.                                         <div class="slider-nav collection-gallery__nav" style="{{not entity.showThumbs ? 'top:60%'}}">
  98.                                             <button class="splide__arrow splide__arrow--prev slider-nav__btn slider-nav__btn--prev" disabled>
  99.                                                 {{ sliderprev('PREV_SLIDE'|trans({}, 'openform_front', app.request.locale)) }}
  100.                                             </button>
  101.                                             <button class="splide__arrow splide__arrow--next slider-nav__btn slider-nav__btn--next">
  102.                                                 {{ slidernext('NEXT_SLIDE'|trans({}, 'openform_front', app.request.locale)) }}
  103.                                             </button>
  104.                                         </div>
  105.                                     </div>
  106.                                 {% endif %}
  107.                             </div>
  108.                         </div>
  109.                         {% if entity.thumbsBackgroundColor %}
  110.                             <style>
  111.                                 .collection-gallery__navigation .splide__slide.is-active {
  112.                                     border-color: {{entity.thumbsBackgroundColor}};
  113.                                 }
  114.                                 .collection-gallery__navigation .splide__slide.is-active::after{
  115.                                     border-bottom: 34px solid {{entity.thumbsBackgroundColor}};
  116.                                 }   
  117.                             </style>
  118.                         {% endif %}
  119.                         <div style="{{entity.thumbsHeight ? 'height:' ~ entity.thumbsHeight ~ '%;' : 'height: 37%;'}} {{entity.sliderThumbsBackgroundColor ? 'background-color: ' ~ entity.sliderThumbsBackgroundColor ~ ';' }}">
  120.                             <div class="splide js-collections-navigation2 collection-gallery__navigation" data-height="100%" style="height:100%;" data-disabled="{{entity.showThumbs ? 'true' : 'false'}}" >
  121.                                 <div class="splide__track">
  122.                                     <ul class="splide__list">
  123.                                         {% for image in ImageSlides %}
  124.                                             {% set img = openform_front_util.getImagePathByType(image.Thumb ?? '','original') %}
  125.                                             {# {% set imgSmall = openform_front_util.getImagePathByType(image.Thumb ?? '','detal') %}
  126.                                             {% set imgPagination = openform_front_util.getImagePathByType(image.Thumb ?? '','list') %} #}
  127.                                             <li class="splide__slide">
  128.                                                 <img src="{{img}}" alt="{{image.Translation[app.request.locale].alt ? image.Translation[app.request.locale].alt}}">
  129.                                             </li>    
  130.                                         {% endfor %}                               
  131.                                     </ul>
  133.                                     <div class="splide__arrows{{ ImageSlides|length < 2 ? ' hide' }}">
  134.                                         <div class="slider-nav collection-gallery__nav">
  135.                                             <button class="splide__arrow splide__arrow--prev slider-nav__btn slider-nav__btn--prev" disabled>
  136.                                                 {{ sliderprev('PREV_SLIDE'|trans({}, 'openform_front', app.request.locale)) }}
  137.                                             </button>
  138.                                             <button class="splide__arrow splide__arrow--next slider-nav__btn slider-nav__btn--next">
  139.                                                 {{ slidernext('NEXT_SLIDE'|trans({}, 'openform_front', app.request.locale)) }}
  140.                                             </button>
  141.                                         </div>
  142.                                     </div>
  143.                                 </div>
  144.                             </div>
  145.                         </div>
  146.                     </div>
  147.                 {% endif %}
  148. </div>                     
  149. <div class="collections__wrapper" style="{% if not entity.showHeader %}padding-top:90px;{% endif %} background: {{entity.background|default('#F5DB7B') }};" data-lenis-prevent>
  150.     <div class="collections__wrapper__wrap" style="
  151.     width:
  152.     {% if entity.imageColumnWidth and entity.textAreaWidth %}
  153.        {{entity.textAreaWidth}}vw
  154.     {% elseif not entity.textAreaWidth and entity.imageColumnWidth %}
  155.         calc((100vw - {{entity.imageColumnWidth}}vw) / 2)
  156.     {% elseif not entity.imageColumnWidth and entity.textAreaWidth %}
  157.         {{entity.textAreaWidth}}vw
  158.     {% else %}
  159.         33vw
  160.     {% endif %};">
  161.         <div class="collections__content">
  162.             {% if entity.Translation[app.request.locale].titleHtml is defined and entity.Translation[app.request.locale].titleHtml %}
  163.                 <div class="collections__content__title block__h3">
  164.                     {{ entity.Translation[app.request.locale].titleHtml|raw }}
  165.                 </div>
  166.             {% endif %}
  167.             
  168.             {% if entity.link is defined and entity.link %}
  169.                     <a href="{{entity.link}}" class="block-text__btns__btn button-read-more button-read-more--black">
  170.                         <span>{{('T_RELICT_LINK')|trans({}, 'openform_front', app.request.locale)}}</span>
  171.                         {{arrowright()}}
  172.                     </a>
  173.             {% endif %}
  174.             {% if entity.Translation[app.request.locale].text is defined and entity.Translation[app.request.locale].text %}
  175.                 <div class="collections__content__text block__text">
  176.                     {{ entity.Translation[app.request.locale].text|raw }}
  177.                 </div>
  178.             {% endif %}
  179.         </div>
  180.     </div>
  181.     
  182.     
  183.     <div class="collections__wrapper__wrap" style="background: {{entity.background|default('#F5DB7B') }};
  184.     width:
  185.     {% if entity.imageColumnWidth and entity.textAreaWidth %}
  186.        {{entity.imageColumnWidth}}vw
  187.     {% elseif not entity.imageColumnWidth and entity.textAreaWidth %}
  188.         calc((100vw - {{entity.textAreaWidth}}vw) / 2)
  189.     {% elseif not entity.textAreaWidth and entity.imageColumnWidth %}
  190.         {{entity.imageColumnWidth}}vw
  191.     {% else %}
  192.         33vw
  193.     {% endif %};
  194.     " data-lenis-prevent>
  195.         <div class="collections__content">
  196.             {% if entity.filePath is defined and entity.filePath and openform_front_util.isMp3File(entity.filePath) %}
  197.                 <div class="block-image__image__audio">
  198.                     <div class="block-audio__player">
  199.                         <audio controls class="js-audio-player block-audio__inner">
  200.                             <source src="{{ entity.filePath }}">
  201.                             Your browser does not support the audio element.
  202.                         </audio>
  203.                     </div>
  204.                 </div>
  205.             {% endif %}
  206.             {% if entity.Translation[app.request.locale].description is defined and entity.Translation[app.request.locale].description %}
  207.                 <div class="collections__content__text block__text">
  208.                     {{ entity.Translation[app.request.locale].description|raw }}
  209.                 </div>
  210.             {% endif %}
  211.             {% if entity.Translation[app.request.locale].attributesText is defined and entity.Translation[app.request.locale].attributesText %}
  212.                 <div class="collections__content__text block__text">
  213.                     {{ entity.Translation[app.request.locale].attributesText|raw }}
  214.                 </div>
  215.             {% endif %}
  216.         </div>
  217.     </div>
  218. </div>
  220. <div class="collections__arrows">
  221.     {% for key, Relict in entity.RelictPack.getVisibleRelicts(app.request.locale) %}
  222.                 {% if entity.id == Relict.id  %}
  223.                     {% if entity.RelictPack.getVisibleRelicts(app.request.locale)[key - 1] is defined %}
  224.                         {% set prevElement = entity.RelictPack.getVisibleRelicts(app.request.locale)[key - 1] %}
  225.                         {% set href = toolkit_route_localizer.generate('relict_item',{ slug : prevElement.Translation[app.request.locale].slug }, app.request.locale) %}
  226.                         <a href="{{href}}" class="slider-nav__btn slider-nav__btn--prev">
  227.                             {{ sliderprev('PREV_Relict'|trans({}, 'openform_front', app.request.locale)) }}
  228.                         </a>
  229.                     {% endif%}
  230.                     {% if entity.RelictPack.getVisibleRelicts(app.request.locale)[key + 1] is defined %}
  231.                         {% set nextElement = entity.RelictPack.getVisibleRelicts(app.request.locale)[key + 1] %}
  232.                         {% set href = toolkit_route_localizer.generate('relict_item',{ slug : nextElement.Translation[app.request.locale].slug }, app.request.locale) %}
  233.                         <a href="{{href}}" class="slider-nav__btn slider-nav__btn--next">
  234.                             {{ slidernext('Next_Relict'|trans({}, 'openform_front', app.request.locale)) }}
  235.                         </a>
  236.                     {% endif%}
  237.                 {% endif %}
  238.     {% endfor %}
  239. </div>
  240. </div>