custom/plugins/SolidAdvancedSliderElements/src/Resources/views/storefront/element/cms-element-solid-ase-content-slider.html.twig line 1

Open in your IDE?
  1. {% block element_solid_ase_content_slider %}
  2.   {% set config = element.fieldConfig.elements %}
  4.   <div class="cms-element-solid-ase-content-slider
  5.     solid-ase-content-slider-{{ element.id }}
  6.     solid-ase-content-slider-{{ config.sliderSettings.value.animation }}
  7.     solid-ase-content-slider-{{ config.settings.value.sizingMode }}
  8.     {{ config.sliderSettings.value.center and
  9.       config.settings.value.inactiveLowerOpacity ?
  10.       'solid-ase-content-slider-inactive-lower-opacity' }}
  11.     solid-ase-content-slider-{{ config.settings.value.layoutVariant }}
  12.     {{ config.settings.value.contentAnimation != 'none' ?
  13.       ('solid-ase-content-slider-content-' ~
  14.       config.settings.value.contentAnimation) | raw }}
  15.     {{ config.sliderSettings.value.controls ?
  16.       'solid-ase-content-slider-controls' }}
  17.     {{ config.sliderSettings.value.controls ?
  18.       ('solid-ase-content-slider-controls-' ~
  19.       config.settings.value.controlsVariant) | raw }}
  20.     {{ config.sliderSettings.value.controls ?
  21.       ('solid-ase-content-slider-controls-' ~
  22.         config.settings.value.controlsPosition) | raw }}
  23.     {{ config.sliderSettings.value.nav ? 'solid-ase-content-slider-nav' }}
  24.     {{ config.sliderSettings.value.nav ? ('solid-ase-content-slider-nav-' ~
  25.       config.settings.value.navVariant) | raw }}
  26.     {{ config.sliderSettings.value.nav ? ('solid-ase-content-slider-nav-' ~
  27.       config.settings.value.navSize) | raw }}
  28.     {{ config.sliderSettings.value.nav ? ('solid-ase-content-slider-nav-' ~
  29.       config.settings.value.navPosition) | raw }}">
  30.     {% set dataAttributes = '' %}
  32.     {# data attributes #}
  33.     {% for key, value in config.sliderSettings.value %}
  34.       {% if not value == false %}
  35.         {% if loop.index0 > 0 %}
  36.           {% set dataAttributes = dataAttributes ~ ' ' %}
  37.         {% endif %}
  39.         {% set dataAttributes = dataAttributes ~ 'data-' ~
  40.           key | camelCaseToKebabCase ~ '="' ~ value ~ '"' %}
  41.       {% endif %}
  42.     {% endfor %}
  44.     {% if config.slides.value %}
  45.       {% set slides = config.slides.value | filter(slide => slide.active) %}
  47.       {# slide clones #}
  48.       {% set maxItems = config.sliderSettings.value.items %}
  50.       {% if config.sliderSettings.value.itemsMode == 'responsive-custom' %}
  51.         {% set maxItems = max(config.sliderSettings.value.itemsMobile,
  52.           config.sliderSettings.value.itemsTablet,
  53.           config.sliderSettings.value.itemsDesktop) %}
  54.       {% endif %}
  56.       {% if config.sliderSettings.value.loop %}
  57.         {% if 'gallery' in config.sliderSettings.value.animation %}
  58.           {% if slides | length == 1 %}
  59.             {% set cloneCount = maxItems * 2 - 1 %}
  60.           {% elseif slides | length == maxItems %}
  61.             {% set cloneCount = slides | length %}
  62.           {% else %}
  63.             {% if slides | length % maxItems != 0 %}
  64.               {% set cloneCount = slides | length *
  65.                 (maxItems - 1) %}
  66.             {% endif %}
  67.           {% endif %}
  68.         {% elseif slides | length <= maxItems %}
  69.           {% set minCloneCount =  maxItems - slides |
  70.             length + 1 %}
  71.           {% set cloneTimes = (minCloneCount / slides | length) |
  72.             round(0, 'ceil') %}
  73.           {% set cloneCount = slides | length * cloneTimes %}
  74.         {% endif %}
  75.       {% endif %}
  77.       {% if cloneCount %}
  78.         {% for i in 0..cloneCount - 1 %}
  79.           {% set slides = slides |
  80.             merge({ (i + slides | length): slides[i] }) %}
  81.         {% endfor %}
  82.       {% endif %}
  84.       {% block element_solid_ase_content_slider_slides %}
  85.         {# slides #}
  86.         <ul class="solid-ase-content-slider is-loading"
  87.           data-element-id="{{ element.id }}"
  88.           {{ dataAttributes | raw }}>
  89.           {% for slide in slides %}
  90.             {% block element_solid_ase_content_slider_slide %}
  91.               <li class="slide solid-ase-content-slider-slide-{{ slide.id }}">
  93.                 <div class="slide-container"
  94.                   {{ slide.backgroundColor ? ('style="background-color: ' ~
  95.                     slide.backgroundColor ~ ';"') | raw }}>
  97.                   {% block element_solid_ase_content_slider_slide_background_media %}
  98.                     {# background-media #}
  99.                     {% if slide.backgroundMedia %}
  100.                       {% set mediaCollection =
  101.                         searchMedia([slide.backgroundMedia], context.context) %}
  102.                       {% set backgroundMedia =
  103.                         mediaCollection.get(slide.backgroundMedia) %}
  105.                       <div class="background-media-container">
  106.                         {% if 'video' in backgroundMedia.mimeType %}
  107.                           <video autoplay muted playsinline loop>
  108.                             <source
  109.                             src="{{ backgroundMedia.url }}"
  110.                             type="{{ backgroundMedia.mimeType }}">
  111.                           </video>
  112.                         {% else %}
  113.                           {% sw_thumbnails 'solid-ase-content-slider-slides' with {
  114.                             media: backgroundMedia,
  115.                             columns: 1,
  116.                             sizes: {},
  117.                             attributes: {
  118.                               'class': slide.backgroundSizingMode ~ ' ' ~
  119.                                 (slide.backgroundSizingMode == 'cover' ? slide.backgroundAnimation) ~ ' ' ~
  120.                                 (slide.backgroundSizingMode == 'contain' ? slide.backgroundPosition),
  121.                               'alt': (backgroundMedia.translated.alt ?: ''),
  122.                               'title': (backgroundMedia.translated.title ?: '')
  123.                             }
  124.                           } %}
  125.                         {% endif %}
  126.                       </div>
  127.                     {% endif %}
  128.                   {% endblock %}
  130.                   {% block element_solid_ase_content_slider_slide_content_container %}
  131.                     {# content-container #}
  132.                     <div class="content-container">
  133.                       {% if config.sliderSettings.value.items == 1 %}
  134.                         {% set class = 'col-sm-9 col-md-8 col-lg-6 col-xl-5' %}
  135.                       {% elseif config.sliderSettings.value.items == 2 %}
  136.                         {% set class = 'col-sm-9 col-lg-10' %}
  137.                       {% elseif config.sliderSettings.value.items >= 3 %}
  138.                         {% set class = 'col-sm-9 col-lg-10 col-xl-12' %}
  139.                       {% endif %}
  141.                       <div class="{{ class }} content">
  142.                         {% if slide.contentType == 'default' %}
  143.                           {% if slide.smallHeadline %}
  144.                             <p class="small-headline">
  145.                               {{ slide.smallHeadline }}
  146.                             </p>
  147.                           {% endif %}
  149.                           {% if slide.headline %}
  150.                             <p class="h1 headline">
  151.                               {{ slide.headline }}
  152.                             </p>
  153.                           {% endif %}
  155.                           {% if slide.text %}
  156.                             <p class="text">
  157.                               {{ slide.text }}
  158.                             </p>
  159.                           {% endif %}
  161.                           {% if slide.buttonLabel and slide.buttonLink %}
  162.                             <a class="btn
  163.                               btn-{{ config.settings.value.buttonVariant }}"
  164.                               {{ slide.buttonLink ? ('href="' ~ slide.buttonLink ~ '"') | raw }}
  165.                               {{ slide.buttonTargetBlank ? 'target="_blank" rel="noopener"' }}
  166.                               {{ slide.buttonTitle ? ('title="' ~ slide.buttonTitle  ~ '"') | raw }}>
  167.                               {{ slide.buttonLabel }}
  168.                             </a>
  169.                           {% endif %}
  170.                         {% elseif slide.contentType == 'custom' %}
  171.                           {{ slide.customContent | raw }}
  172.                         {% endif %}
  173.                       </div>
  174.                     </div>
  175.                   {% endblock %}
  177.                   {% block element_solid_ase_content_slider_slide_link %}
  178.                     {% if slide.link %}
  179.                       {% if slide.contentType == 'default' and slide.headline %}
  180.                         {% set label = slide.headline %}
  181.                       {% elseif slide.name %}
  182.                         {% set label = slide.name %}
  183.                       {% endif %}
  185.                       <a class="stretched-link" aria-label="{{ label }}"
  186.                         href="{{ slide.link }}"
  187.                         {{ slide.linkTargetBlank ? 'target="_blank" rel="noopener"' }}
  188.                         {{ slide.linkTitle ? ('title="' ~ slide.linkTitle ~ '"') | raw }}>
  189.                       </a>
  190.                     {% endif %}
  191.                   {% endblock %}
  192.                 </div>
  193.               </li>
  194.             {% endblock %}
  195.           {% endfor %}
  196.         </ul>
  197.       {% endblock %}
  199.       {% block element_solid_ase_content_slider_controls %}
  200.         {# controls #}
  201.         {% if config.sliderSettings.value.controls %}
  202.           <div class="solid-ase-content-slider-controls-container">
  203.             {% block element_solid_ase_content_slider_control_prev %}
  204.               <button class="btn btn-primary solid-ase-content-slider-control
  205.                 solid-ase-content-slider-control-prev">
  206.                 <span class="icon">
  207.                   {% if config.settings.value.controlsIconVariant == 'caret' %}
  208.                     {{ source('@Storefront/assets/icon/default/arrow-head-left.svg',
  209.                       ignore_missing = true) }}
  210.                   {% elseif config.settings.value.controlsIconVariant == 'caret-circle' %}
  211.                     {{ source('@Storefront/assets/icon/default/arrow-circle-left.svg',
  212.                       ignore_missing = true) }}
  213.                   {% elseif config.settings.value.controlsIconVariant == 'arrow' %}
  214.                     {{ source('@Storefront/assets/icon/default/arrow-left.svg',
  215.                       ignore_missing = true) }}
  216.                   {% endif %}
  217.                 </span>
  218.               </button>
  219.             {% endblock %}
  221.             {% block element_solid_ase_content_slider_control_next %}
  222.               <button class="btn btn-primary solid-ase-content-slider-control
  223.                 solid-ase-content-slider-control-next">
  224.                 <span class="icon">
  225.                   {% if config.settings.value.controlsIconVariant == 'caret' %}
  226.                     {{ source('@Storefront/assets/icon/default/arrow-head-right.svg',
  227.                       ignore_missing = true) }}
  228.                   {% elseif config.settings.value.controlsIconVariant == 'caret-circle' %}
  229.                     {{ source('@Storefront/assets/icon/default/arrow-circle-right.svg',
  230.                       ignore_missing = true) }}
  231.                   {% elseif config.settings.value.controlsIconVariant == 'arrow' %}
  232.                     {{ source('@Storefront/assets/icon/default/arrow-right.svg',
  233.                       ignore_missing = true) }}
  234.                   {% endif %}
  235.                 </span>
  236.               </button>
  237.             {% endblock %}
  238.           </div>
  239.         {% endif %}
  240.       {% endblock %}
  241.     {% endif %}
  242.   </div>
  243. {% endblock %}