templates/Includes/regionSlide.html.twig line 1

Open in your IDE?
  1. {# render footer-template #}
  2. {% set index = 0 %}
  3. {% set includeMainRegion = true %}
  4. {% if document.property('region') and not document.property('region').isMainRegion %}
  5.     {% set index = getIndexFromRegion(document.property('region'), includeMainRegion) %}
  6. {% endif %}
  8. {% set regions = getRegionsArray(includeMainRegion) %}
  9. {% set regionsData = [] %}
  10. {% for name, regionObject in regions %}
  11.     {% if regionObject.siteConfig.regionSlideMap.marker and regionObject.siteConfig.regionSlideMap.marker[0] %}
  12.         {% set regionsData = regionsData|merge([
  13.             {
  14.                 "title": regionObject.name,
  15.                 "href": regionObject.siteConfig.home,
  16.                 "linkText": "region-slide.Zur Region"|trans,
  17.                 "hotspotName": name,
  18.                 "hotspotPosition": {
  19.                     "top": regionObject.siteConfig.regionSlideMap.marker[0]['top'],
  20.                     "left": regionObject.siteConfig.regionSlideMap.marker[0]['left']
  21.                 }
  22.             }
  23.         ]) %}
  24.     {% endif %}
  25. {% endfor %}
  26. <div class="js-render-template js-render-template--not-initially" style="min-height: 1px;">
  27.     <template class="js-render-template__template">
  28.         <section class="region-slide-wrapper">
  29.             <div class="region-slide">
  30.                 {# This is no content-area. Only used above footer #}
  31.         
  32.                 <div class="region-slide__inner" style='--image-src: url("{{ siteConfig.regionSlideBg.thumbnail('region-slide-bg') }}"); --image-src-xs: url("{{ siteConfig.regionSlideBg.thumbnail('region-slide-bg--xs') }}");'>
  33.                     <div class="region-slide__inner-body">
  34.                         <div class="region-slide__title-wrapper">
  35.                             <h2 class="region-slide__title">{{ siteConfig.regionSlideHeadline }}</h2>
  36.                             <div class="region-slide__sub-title">
  37.                                 {{ siteConfig.regionSlideSubHeadline }}
  38.                             </div>
  39.                         </div>
  40.                 
  41.                         <div class="js-region-slider region-slider" data-region-slider-initial-slide="{{ index }}">
  42.                             <div class="swiper-container region-slider__container js-region-slider__slider">
  43.                                 <div class="swiper-wrapper">
  44.                                     {% for region in regionsData %}
  45.                                         <div class="swiper-slide region-slider__item"
  46.                                              data-region-link="{{ region.href }}"
  47.                                              data-region-link-text="{{ region.linkText }}"
  48.                                              data-region-id="{{ region.hotspotName }}">
  49.                                             <div class="region-slider__title">
  50.                                                 {{ region.title }}
  51.                                             </div>
  52.                                     
  53.                                             <div class="region-slider__title--active">
  54.                                                 {{ region.title }}
  55.                                             </div>
  56.                                 
  57.                                         </div>
  58.                                     {% endfor %}
  59.                                 </div>
  60.                             </div>
  61.                         </div>
  62.                 
  63.                         <div class="region-slide__content">
  64.                             <div class="region-hotspots js-region-hotspots">
  65.                                 {{ siteConfig.regionSlideMap.thumbnail('region-slide-map').html({
  66.                                     imgAttributes: {
  67.                                         class: 'js-lazy-img region-slide__map'
  68.                                     },
  69.                                     lowQualityPlaceholder: true,
  70.                                 }) | raw }}
  71.                         
  72.                                 {% for region in regionsData %}
  73.                                     <div class="region-hotspots__wrapper" style="top: {{ region.hotspotPosition.top }}%; left: {{ region.hotspotPosition.left }}%;">
  74.                                         <a role="button" href="{{ region.href }}" class="region-hotspots__hotspot  js-region-hotspots__hotspot"
  75.                                            aria-label="{{ region.title }}" title="{{ region.title }}"
  76.                                            data-hotspot-id="{{ region.hotspotName }}"
  77.                                            aria-controls="hotspot-{{ region.hotspotName }}"
  78.                                            aria-expanded="false">
  79.                                     <span class="hotspots__hotspot-inner">
  80.                                         <span class="hotspots__hotspot-icon" aria-hidden="true"></span>
  81.                                     </span>
  82.                                         </a>
  83.                                     </div>
  84.                                 {% endfor %}
  85.                             </div>
  86.                     
  87.                     
  88.                             {#  HREF and data-event-tracking-label is set with JS #}
  89.                             <a href="#" class="btn btn-outline-white mt-md-5 mt-2 region-slide__btn js-region-slider__link gtm-navigation-regionen" data-event-tracking-category="Navigation Regionen" data-event-tracking-action="Footer" data-event-tracking-label="">
  90.                                 {{ 'region-slide.Zur Region'|trans }}
  91.                             </a>
  92.                     
  93.                             {% if not document.property('region').isMainRegion %}
  94.                                 <a href="/" class="region-slide__link mt-4">
  95.                                     {{ 'region-slide.zurück zur Steiermark.com'|trans }}
  96.                                 </a>
  97.                             {% endif %}
  98.                         </div>
  99.                     </div>
  100.         
  101.                 </div>
  102.     
  103.             </div>
  104.         </section>
  105.     </template>
  106. </div>