templates/partials/experience/content-tabs.html.twig line 1

Open in your IDE?
  1. <section class="content-tabs" id="{{ experience.downloadsAnchor }}">
  2.     <div class="container">
  3.         {% if experience.experienceHasDownloadableItem|length > 1 %}
  4.             <div class="content-tabs--navigation js-scroll-arrow">
  5.                 <div class="content-tabs--navigation-list">
  6.                     {% for item in experience.experienceHasDownloadableItem %}
  7.                     <a class="link black {{ loop.first ? 'is-active' : '' }}" href="#" data-target="js-item-{{ loop.index }}">
  8.                         <span>{{ item.downloadableItem.tabTitle }}</span>
  9.                     </a>
  10.                     {% endfor %}
  11.                 </div>
  12.                 <div class="arrow-icon">
  13.                     <span>{{ 'app.scroll_show_more' | trans }}</span>
  14.                     {% include 'partials/global/svg/arrow-bold-right.svg.twig' %}
  15.                 </div>
  16.             </div>
  17.         {% endif %}
  19.         <div class="content-tabs--list">
  20.             {% for item in experience.experienceHasDownloadableItem %}
  21.                 {% if item.downloadableItem.title %}
  22.                     <div class="content-tabs--item js-item-{{ loop.index }} {{ loop.first ? 'is-active' : '' }}">
  23.                         <div class="content-tabs--img">
  24.                             <picture-component class="js-picture-component is-absolute" :image="{{ picture_data(item.downloadableItem.image, null, null) }}"></picture-component>
  25.                         </div>
  27.                         <div class="content-tabs--container">
  28.                             <h3 class="content-tabs--title">{{ item.downloadableItem.title }}</h3>
  29.                             <div class="content-tabs--text">
  30.                                 {{ item.downloadableItem.content | raw }}
  31.                             </div>
  33.                             {% if item.downloadableItem.linkTitle %}
  34.                                 <div class="content-tabs--link">
  35.                                     <a class="button green is-dark" target="_blank" href="{{ item.downloadableItem.linkUrl }}">
  36.                                         <span>{{ item.downloadableItem.linkTitle }}</span>
  37.                                     </a>
  38.                                 </div>
  39.                             {% endif %}
  41.                             {% if item.downloadableItem.secondLinkTitle %}
  42.                                 <div class="content-tabs--link">
  43.                                     <a class="button green is-dark" target="_blank" href="{{ item.downloadableItem.secondLinkUrl }}">
  44.                                         <span>{{ item.downloadableItem.secondLinkTitle }}</span>
  45.                                     </a>
  46.                                 </div>
  47.                             {% endif %}
  49.                             {% if item.downloadableItem.thirdLinkTitle %}
  50.                                 <div class="content-tabs--link">
  51.                                     <a class="button green is-dark" target="_blank" href="{{ item.downloadableItem.thirdLinkUrl }}">
  52.                                         <span>{{ item.downloadableItem.thirdLinkTitle }}</span>
  53.                                     </a>
  54.                                 </div>
  55.                             {% endif %}
  57.                             {% if item.downloadableItem.documentTitle %}
  58.                                 <div class="content-tabs--link">
  59.                                     <a class="button green is-dark" target="_blank" href="{{ item.downloadableItem.document | file_url }}">
  60.                                         <span>{{ item.downloadableItem.documentTitle }}</span>
  61.                                     </a>
  62.                                 </div>
  63.                             {% endif %}
  65.                             {% if item.downloadableItem.secondDocumentTitle %}
  66.                                 <div class="content-tabs--link">
  67.                                     <a class="button green is-dark" target="_blank" href="{{ item.downloadableItem.secondDocument | file_url }}">
  68.                                         <span>{{ item.downloadableItem.secondDocumentTitle }}</span>
  69.                                     </a>
  70.                                 </div>
  71.                             {% endif %}
  73.                             {% if item.downloadableItem.thirdDocumentTitle %}
  74.                                 <div class="content-tabs--link">
  75.                                     <a class="button green is-dark" target="_blank" href="{{ item.downloadableItem.thirdDocument | file_url }}">
  76.                                         <span>{{ item.downloadableItem.thirdDocumentTitle }}</span>
  77.                                     </a>
  78.                                 </div>
  79.                             {% endif %}
  81.                             {% if item.downloadableItem.galleryTitle %}
  82.                                 <div class="content-tabs--link">
  83.                                     <a href="#" class="button green is-dark js-gallery-open" data-dest="introduction--gallery">
  84.                                         <span>{{ item.downloadableItem.galleryTitle }}</span>
  85.                                     </a>
  86.                                 </div>
  87.                             {% endif %}
  89.                             {% if item.downloadableItem.secondGalleryTitle %}
  90.                                 <div class="content-tabs--link">
  91.                                     <a href="#" class="button green is-dark js-gallery-open" data-dest="introduction--gallery">
  92.                                         <span>{{ item.downloadableItem.secondGalleryTitle }}</span>
  93.                                     </a>
  94.                                 </div>
  95.                             {% endif %}
  97.                             {% if item.downloadableItem.thirdGalleryTitle %}
  98.                                 <div class="content-tabs--link">
  99.                                     <a href="#" class="button green is-dark js-gallery-open" data-dest="introduction--gallery">
  100.                                         <span>{{ item.downloadableItem.thirdGalleryTitle }}</span>
  101.                                     </a>
  102.                                 </div>
  103.                             {% endif %}
  105.                             {% if item.downloadableItem.gallery %}
  106.                                 <div class="introduction--gallery js-gallery-container">
  107.                                     <div class="introduction--gallery-content">
  108.                                         <div class="introduction--gallery-slider js-gallery-slider">
  109.                                             {% for media in item.downloadableItem.gallery.medias %}
  110.                                                 {% if media is youtubeVideo %}
  111.                                                     <a data-src="{{ media|media_url }}">
  112.                                                         <img src="{{ get_thumbnail_url(media) }}">
  113.                                                     </a>
  114.                                                 {% else %}
  115.                                                     <a data-src="{{ media|resize(1280)|file_url }}">
  116.                                                         <img src="{{ media|resize(1280)|file_url }}">
  117.                                                     </a>
  118.                                                 {% endif %}
  119.                                             {% endfor %}
  120.                                         </div>
  121.                                     </div>
  122.                                 </div>
  123.                             {% endif %}
  125.                             {% if item.downloadableItem.secondGallery %}
  126.                                 <div class="introduction--gallery js-gallery-container">
  127.                                     <div class="introduction--gallery-content">
  128.                                         <div class="introduction--gallery-slider js-gallery-slider">
  129.                                             {% for media in item.downloadableItem.secondGallery.medias %}
  130.                                                 {% if media is youtubeVideo %}
  131.                                                     <a data-src="{{ media|media_url }}">
  132.                                                         <img src="{{ get_thumbnail_url(media) }}">
  133.                                                     </a>
  134.                                                 {% else %}
  135.                                                     <a data-src="{{ media|resize(1280)|file_url }}">
  136.                                                         <img src="{{ media|resize(1280)|file_url }}">
  137.                                                     </a>
  138.                                                 {% endif %}
  139.                                             {% endfor %}
  140.                                         </div>
  141.                                     </div>
  142.                                 </div>
  143.                             {% endif %}
  145.                             {% if item.downloadableItem.thirdGallery %}
  146.                                 <div class="introduction--gallery js-gallery-container">
  147.                                     <div class="introduction--gallery-content">
  148.                                         <div class="introduction--gallery-slider js-gallery-slider">
  149.                                             {% for media in item.downloadableItem.thirdGallery.medias %}
  150.                                                 {% if media is youtubeVideo %}
  151.                                                     <a data-src="{{ media|media_url }}">
  152.                                                         <img src="{{ get_thumbnail_url(media) }}">
  153.                                                     </a>
  154.                                                 {% else %}
  155.                                                     <a data-src="{{ media|resize(1280)|file_url }}">
  156.                                                         <img src="{{ media|resize(1280)|file_url }}">
  157.                                                     </a>
  158.                                                 {% endif %}
  159.                                             {% endfor %}
  160.                                         </div>
  161.                                     </div>
  162.                                 </div>
  163.                             {% endif %}
  164.                         </div>
  165.                     </div>
  166.                 {% endif %}
  167.             {% endfor %}
  168.         </div>
  169.     </div>
  170. </section>