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