templates/areas/teaser-experience-slider/view.html.twig line 1

Open in your IDE?
  1. {% set bgImageSrc = '' %}
  2. {% set bgImageSrcMobile = '' %}
  3. {% if not pimcore_relation('backgroundImage').empty %}
  4.     {% set bgImageSrc = pimcore_relation('backgroundImage').element.thumbnail('experience-slider-area-bg') %}
  5.     {% set bgImageSrcMobile = pimcore_relation('backgroundImage').element.thumbnail('experience-slider-area--xs') %}
  6. {% endif %}
  7. {% if not pimcore_relation('backgroundImageMobile').empty %}
  8.     {% set bgImageSrcMobile = pimcore_relation('backgroundImageMobile').element.thumbnail('experience-slider-area--xs') %}
  9. {% endif %}
  11. <section class="content-block js-fade-in {{ editmode ? '' : 'experience-slider-area'}} js-lazy-img js-lazy-img--bg {{ include('Layout/includes/editmode-box-classes.html.twig') }} {{ styleModifier | default(null) }} {{ not pimcore_input('anchorTitle').empty ? 'js-anchor-nav__item' : '' }}"
  12.          data-lazy-img-media-query-backgrounds='{
  13.         "default": "{{ bgImageSrc }}",
  14.         "(max-width: 767px)": "{{ bgImageSrcMobile }}"
  15.          }' {% if not pimcore_input('anchorTitle').empty %}data-anchor-nav-title="{{ pimcore_input('anchorTitle').frontend }}"{% endif %}>
  17.     {% if not editmode %}
  18.         <img class="js-lazy-img experience-slider-area__claim" aria-hidden="true" alt data-src="/static/img/claims/{{ getSVGPathForExperienceTeaserBackgroundText(pimcore_select("background_text").empty ? 'experience' : pimcore_select("background_text").data, app.request.locale) }}">
  19.     {% endif %}
  20.     <div class="container container-md ">
  21.         {% if editmode %}
  23.             {% embed 'Includes/editmode-settings.html.twig' %}
  24.                 {% block additionalInfo %}
  25.                     <div>
  26.                         <label>
  27.                             Background Image
  28.                         </label>
  29.                         {{ pimcore_relation('backgroundImage', {'reload': true}) }}
  30.                     </div>
  31.                     <div class="mt-2">
  32.                         <label>
  33.                             Mobile Background Image (optional)
  34.                         </label>
  35.                         {{ pimcore_relation('backgroundImageMobile') }}
  36.                     </div>
  37.                     <div>
  38.                         <label>
  39.                             Teaser (max 11 Teaser others will be ignored)
  40.                             <small>Supported: DemiInfrastructure, DemiAdditionalService, BlogArticle, Community, Experience Teaser Snippet, Young Styria Accommodation</small>
  41.                         </label>
  42.                         {{ pimcore_relations('teaser', {
  43.                             'types': ['document', 'object'],
  44.                             'subtypes': ['snippet', 'object'],
  45.                             'classes': ['demiAdditionalService', 'demiInfrastructure', 'BlogArticle', 'Community', 'YoungStyriaAccommodation']
  46.                         }) }}
  47.                     </div>
  49.                     <div>
  50.                         <label>Background Text <small>(Language will be selected from the document language)</small>:</label>
  51.                         {{ pimcore_select("background_text", {
  52.                             "store": [
  53.                                 ["discover", "Discover"],
  54.                                 ["enjoy", "Enjoy"],
  55.                                 ["experience", "Experience"],
  56.                                 ["visit", "Visit"],
  57.                             ],
  58.                             "defaultValue" : "experience"
  59.                         }) }}
  60.                     </div>
  61.                 {% endblock %}
  62.             {% endembed %}
  63.         {% endif %}
  64.         <div class="experience-slider-area__content">
  65.             {{ include('Includes/title-block-editable.html.twig', {'isCentered': true}) }}
  67.             <div class="js-render-template" style="min-height: 1px;">
  68.                 <template class="js-render-template__template">
  69.                     <div class="{{ styleModifier | default(null) }}">
  70.                         <div class="js-experience-slider experience-slider">
  71.                             {% do jsConfig().add('experienceSlider', true) %}
  73.                             <div class="swiper-container js-experience-slider__slider experience-slider__container">
  74.                                 <div class="swiper-wrapper experience-slider__wrapper">
  75.                                     {% set elements = removeUnpublishedElements(pimcore_relations('teaser').elements) %}
  76.                                     {% for key,item in elements | filter ((item,key) => key < 11 ) %}
  77.                                         {% if item.published %}
  78.                                             <div class="swiper-slide experience-slider__swiper-slide">
  79.                                                 {% if item is instanceof('\\Pimcore\\Model\\Document\\Snippet') %}
  80.                                                     {{ pimcore_inc(item, {
  81.                                                         counter: loop.index < 10 ? "0" ~ loop.index : loop.index
  82.                                                     }) }}
  83.                                                 {% elseif item is instanceof('\\Pimcore\\Model\\DataObject\\BlogArticle') %}
  84.                                                     {% if item.articleDate.isPast() %}
  85.                                                         {{ include('areas/teaser-experience-slider/experienceTeaser.html.twig', {
  86.                                                             'index': loop.index < 10 ? "0" ~ loop.index : loop.index,
  87.                                                             'image': item.getTeaserImage(),
  88.                                                             'link': linkGenerator().generate(item, {relative: getUseRelativeLink()}),
  89.                                                             'title': item.title
  90.                                                         }) }}
  91.                                                     {% endif %}
  92.                                                 {% elseif item is instanceof('\\Pimcore\\Model\\DataObject\\Community') %}
  93.                                                     {{ include('areas/teaser-experience-slider/experienceTeaser.html.twig', {
  94.                                                         'index': loop.index < 10 ? "0" ~ loop.index : loop.index,
  95.                                                         'image': item.getTeaserimage(),
  96.                                                         'link': linkGenerator().generate(item, {relative: getUseRelativeLink()}),
  97.                                                         'title': item.name
  98.                                                     }) }}
  99.                                                 {% elseif item is instanceof('\\Pimcore\\Model\\DataObject\\DemiAdditionalService') or item is instanceof('\\Pimcore\\Model\\DataObject\\DemiInfrastructure') %}
  100.                                                     {{ include('areas/teaser-experience-slider/experienceTeaser.html.twig', {
  101.                                                         'index': loop.index < 10 ? "0" ~ loop.index : loop.index,
  102.                                                         'image': item.getFirstImage(),
  103.                                                         'link': item.class.linkgenerator.generate(item, {relative: getUseRelativeLink(), language: app.request.locale}),
  104.                                                         'title': item.name
  105.                                                     }) }}
  106.                                                 {% elseif item is instanceof('\\Pimcore\\Model\\DataObject\\YoungStyriaAccommodation') %}
  107.                                                     {{ include('areas/teaser-experience-slider/experienceTeaser.html.twig', {
  108.                                                         'index': loop.index < 10 ? "0" ~ loop.index : loop.index,
  109.                                                         'image': item.teaserImage,
  110.                                                         'link': item.class.linkgenerator.generate(item, {relative: getUseRelativeLink(), language: app.request.locale}),
  111.                                                         'title': item.name,
  112.                                                         isYoungStyria: true,
  113.                                                     }) }}
  114.                                                 {% endif %}
  115.                                             </div>
  116.                                         {% endif %}
  117.                                     {% endfor %}
  119.                                 </div>
  121.                                 <div class="swiper-scrollbar__wrapper experience-slider__swiper-scrollbar__wrapper">
  122.                                     <div class="swiper-scrollbar js-experience-slider__scrollbar"></div>
  123.                                 </div>
  124.                             </div>
  126.                             <div class="swiper-navigation">
  127.                                 <button class="swiper-button swiper-button--prev experience-slider__btn js-experience-slider__prev"><span class="icon icon-arrow-right" aria-label="Previous"></span></button>
  128.                                 <button class="swiper-button swiper-button--next experience-slider__btn js-experience-slider__next"><span class="icon icon-arrow-right" aria-label="Next"></span></button>
  129.                             </div>
  130.                         </div>
  131.                     </div>
  132.                 </template>
  133.             </div>
  134.         </div>
  135.     </div>
  136. </section>