templates/website/page/events.html.twig line 1

  1. {% extends '@web/base.html.twig' %}
  2. {% if page is defined and page is not empty %}
  3.     {% set metaParams = {
  4.         'title': event.title,
  5.         'metaDescription': event.metaDescription,
  6.         'metaKeywords': event.metaKeywords,
  7.         'image':(event.image is defined ? event.image : null)
  8.     } %}
  9. {% else %}
  10.     {% set metaParams = {} %}
  11. {% endif %}
  12. {% block content %}
  13.     <section class="section-events">
  14.         {% block header %}
  15.             {% include '@web/parts/header.html.twig' %}
  16.         {% endblock %}
  17.         <div class="events-wrapper my-container-fluid">
  18.             <div class="image-wrapper">
  19.                 {% if event.image is not empty%}
  20.                 <img src="{{ event.image }}" alt="{{event.title}}">
  21.                 {% endif %}
  23.                 <div class="title">{{event.title}}</div>
  24.             </div>
  25.         </div>
  26.         <div class="body-wrapper ">
  27.             {% if event.body|length > 0 %}
  28.                 <div class="section-fragmented ">
  29.                     <div class="standard-text">{{event.body|raw}}</div>
  30.                 </div>
  31.             {% endif %}
  32.             {% if event.additionalInfo|length > 0 %}
  33.                 <div class="section-fragmented mt-5">
  34.                     <div class="standard-text">{{event.additionalInfo|raw}}</div>
  35.                 </div>
  36.             {% endif %}
  37.             <div class=" my-container-fluid">
  38.                 <div class="event-video-images">
  39.                      {% if event.video %}
  40.                     <div class="video-wrapper">
  41.                         <video  muted autoplay loop  id="event-video">
  42.                             <source src="{{ event.video }}">
  43.                         </video>
  44.                          <button class="play-button"  id="playBtn" onclick="toggleVideoPlay()">{{ svg('public/static_images/svg/play.svg')|raw }}</button>
  45.                     </div>
  46.                     {% endif %}
  47.                     <div class="image-wrapper">
  48.                         {% if event.eventImages|length > 0 %}
  49.                             {% for item in event.eventImages %}
  50.                                 <div class="image">
  51.                                     <img src="{{ item.image }}" alt="{{ item.title }}">
  52.                                     <div class="title color-darkblue">{{ item.title }}</div>
  53.                                 </div>
  54.                             {% endfor %}
  55.                         {% endif %}
  56.                     </div>
  57.                 </div>
  59.             </div>
  61.         </div>
  63.         {% block footer %}
  64.             {% include '@web/parts/footer.html.twig' %}
  66.         {% endblock %}
  67.         <script>
  68.             function toggleVideoPlay() {
  69.                 const video = document.getElementById('event-video');
  70.                 const playBtn = document.getElementById('playBtn');
  71.                 if (window.innerWidth < 991 ){
  72.                     if (playBtn.style.opacity === "0") {
  73.                         playBtn.style.opacity = "1";
  74.                     } else {
  75.                         playBtn.style.opacity = "0";
  76.                     }
  77.                 }
  78.                 if (video.paused) {
  79.                     video.play();
  80.                     playBtn.classList.add('button-opacity')
  81.                 } else {
  82.                     playBtn.classList.remove('button-opacity')
  83.                     video.pause();
  84.                 }
  85.             }
  86.         </script>
  87.     </section>
  88. {% endblock %}