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

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