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