custom/plugins/zenitPlatformStratus/src/Resources/views/storefront/element/cms-element-zen-image-slider.html.twig line 1

Open in your IDE?
  1. {% block element_zen_image_slider %}
  2.     {% set sliderConfig = element.fieldConfig.elements %}
  3.     {% set customClasses = sliderConfig.customClasses.value %}
  5.     {% set elemStyles = { } %}
  6.     {% if sliderConfig.elementBorderRadius.value %}
  7.         {% set elemStyles = elemStyles|merge({ 'border-radius': sliderConfig.elementBorderRadiusTopLeft.value ~ ' ' ~ sliderConfig.elementBorderRadiusTopRight.value ~ ' ' ~ sliderConfig.elementBorderRadiusBottomRight.value ~ ' ' ~ sliderConfig.elementBorderRadiusBottomLeft.value }) %}
  8.     {% endif %}
  10.     <style>
  11.         {% if elemStyles %}
  12.         .cms-element-{{ element.type }}-{{ element.id }} .zen-image-slider {
  13.             {% for property, value in elemStyles %}
  14.                 {{ property }}: {{ value }};
  15.             {% endfor %}
  16.         }
  17.         {% endif %}
  18.     </style>
  20.     {% for config in element.data.sliderItems %}
  21.         {% set imageStyles = { } %}
  22.         {% if config.imageBorderRadius %}
  23.             {% set imageStyles = imageStyles|merge({ 'border-radius': config.imageBorderRadiusTopLeft ~ ' ' ~ config.imageBorderRadiusTopRight ~ ' ' ~ config.imageBorderRadiusBottomRight ~ ' ' ~ config.imageBorderRadiusBottomLeft }) %}
  24.         {% endif %}
  26.         {% if config.overlay %}
  27.             {% set overlayStyles = {
  28.                 'background-color': (config.overlayColor ?: 'transparent'),
  29.                 'opacity': (config.overlayOpacity ?: '0%'),
  30.             } %}
  31.             {% if config.imageBorderRadius %}
  32.                 {% set overlayStyles = overlayStyles|merge({ 'border-radius': config.imageBorderRadiusTopLeft ~ ' ' ~ config.imageBorderRadiusTopRight ~ ' ' ~ config.imageBorderRadiusBottomRight ~ ' ' ~ config.imageBorderRadiusBottomLeft }) %}
  33.             {% endif %}
  34.         {% endif %}
  36.         {% set textContainerStyles = {
  37.             'align-items': (config.verticalTextAlign ?: 'flex-start'),
  38.             'justify-content': (config.horizontalTextAlign ?: 'flex-start'),
  39.         } %}
  41.         {% set textStyles = { } %}
  42.         {% if config.textBorderRadius %}
  43.             {% set textStyles = textStyles|merge({ 'border-radius': config.textBorderRadiusTopLeft ~ ' ' ~ config.textBorderRadiusTopRight ~ ' ' ~ config.textBorderRadiusBottomRight ~ ' ' ~ config.textBorderRadiusBottomLeft }) %}
  44.         {% endif %}
  45.         {% if config.textPaddings %}
  46.             {% set textStyles = textStyles|merge({ 'padding': config.textPaddingTop ~ ' ' ~ config.textPaddingRight ~ ' ' ~ config.textPaddingBottom ~ ' ' ~ config.textPaddingLeft }) %}
  47.         {% endif %}
  48.         {% if config.textMargins %}
  49.             {% set textStyles = textStyles|merge({ 'margin': config.textMarginTop ~ ' ' ~ config.textMarginRight ~ ' ' ~ config.textMarginBottom ~ ' ' ~ config.textMarginLeft }) %}
  50.         {% endif %}
  51.         {% if config.color %}
  52.             {% set textStyles = textStyles|merge({ 'color': config.color }) %}
  53.         {% endif %}
  54.         {% if config.backgroundColor %}
  55.             {% set textStyles = textStyles|merge({ 'background-color': config.backgroundColor }) %}
  56.         {% endif %}
  57.         {% if config.textMinWidth %}
  58.             {% set textStyles = textStyles|merge({ 'width': config.textMinWidth }) %}
  59.         {% endif %}
  60.         {% if config.textMaxWidth %}
  61.             {% set textStyles = textStyles|merge({ 'max-width': config.textMaxWidth }) %}
  62.         {% endif %}
  64.         <style>
  65.             {% if overlayStyles %}
  66.             .cms-element-{{ element.type }}-{{ element.id }} .zen-slider-item-{{ loop.index }} .zen-image-slider-item-overlay {
  67.                 {% for property, value in overlayStyles %}
  68.                     {{ property }}: {{ value }};
  69.                 {% endfor %}
  70.             }
  71.             {% endif %}
  73.             {% if textContainerStyles %}
  74.             .cms-element-{{ element.type }}-{{ element.id }} .zen-slider-item-{{ loop.index }} .zen-image-slider-item-text-container {
  75.                 {% for property, value in textContainerStyles %}
  76.                     {{ property }}: {{ value }};
  77.                 {% endfor %}
  78.             }
  79.             {% endif %}
  81.             {% if imageStyles %}
  82.             .cms-element-{{ element.type }}-{{ element.id }} .zen-slider-item-{{ loop.index }} .image-slider-image {
  83.                 {% for property, value in imageStyles %}
  84.                     {{ property }}: {{ value }};
  85.                 {% endfor %}
  86.             }
  87.             {% endif %}
  89.             {% if textStyles %}
  90.             .cms-element-{{ element.type }}-{{ element.id }} .zen-slider-item-{{ loop.index }} .zen-image-slider-item-text {
  91.                 {% for property, value in textStyles %}
  92.                     {{ property }}: {{ value }};
  93.                 {% endfor %}
  94.             }
  95.             {% endif %}
  96.         </style>
  97.     {% endfor %}
  99.     <div class="cms-element-{{ element.type }} cms-element-{{ element.type }}-{{ element.id }}{% if sliderConfig.displayMode.value == "standard" and sliderConfig.verticalAlign.value %} has-vertical-alignment{% endif %} {{ customClasses }}">
  100.         {% set baseSliderOptions = {
  101.             slider: {
  102.                 navPosition: 'bottom',
  103.                 nav: sliderConfig.navigationDots.value ? true : false,
  104.                 controls: sliderConfig.navigationArrows.value ? true : false,
  105.                 autoHeight: (sliderConfig.displayMode.value == "standard") ? true : false,
  106.                 autoplay: sliderConfig.autoplay.value ? true : false,
  107.                 autoplayTimeout: sliderConfig.autoplayTimeout.value ? sliderConfig.autoplayTimeout.value : 5000,
  108.                 autoplayHoverPause: sliderConfig.autoplayHoverPause.value ? true : false,
  109.                 speed: sliderConfig.speed.value ? sliderConfig.speed.value : 500,
  110.                 autoplayButtonOutput: false,
  111.                 mode: sliderConfig.mode.value ? sliderConfig.mode.value : 'carousel',
  112.                 axis: sliderConfig.axis.value ? sliderConfig.axis.value : 'horizontal',
  113.                 animateDelay: 500,
  114.                 gutter: sliderConfig.items.value > 1 ? sliderConfig.gutter.value : 0
  115.             }
  116.         } %}
  118.         {% if sliderConfig.items.value > 1 %}
  119.             {% set baseSliderOptions = baseSliderOptions|replace_recursive({
  120.                 slider: {
  121.                     responsive: {
  122.                         xs: {
  123.                             "items": 1
  124.                         },
  125.                         sm: {
  126.                             "items": 1
  127.                         },
  128.                         md: {
  129.                             "items": sliderConfig.items.value
  130.                         },
  131.                         lg: {
  132.                             "items": sliderConfig.items.value
  133.                         },
  134.                         xl: {
  135.                             "items": sliderConfig.items.value
  136.                         }
  137.                     },
  138.                 }
  139.             }) %}
  140.         {% elseif sliderConfig.items.value > 2 %}
  141.             {% set baseSliderOptions = baseSliderOptions|replace_recursive({
  142.                 slider: {
  143.                     responsive: {
  144.                         xs: {
  145.                             "items": 1
  146.                         },
  147.                         sm: {
  148.                             "items": 1
  149.                         },
  150.                         md: {
  151.                             "items": sliderConfig.items.value - 1
  152.                         },
  153.                         lg: {
  154.                             "items": sliderConfig.items.value
  155.                         },
  156.                         xl: {
  157.                             "items": sliderConfig.items.value
  158.                         }
  159.                     },
  160.                 }
  161.             }) %}
  162.         {% endif %}
  164.         {% block element_zen_image_slider_alignment %}
  165.             {% if sliderConfig.verticalAlign.value %}
  166.                 <div class="cms-element-alignment{% if sliderConfig.verticalAlign.value == "center" %} align-self-center{% elseif sliderConfig.verticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  167.             {%  endif %}
  168.             <div class="base-slider image-slider zen-image-slider{% if sliderConfig.navigationArrows.value == "outside" %} has-nav-outside{% endif %}{% if sliderConfig.navigationDots.value == "outside" %} has-dots-outside{% endif %}"
  169.                  data-base-slider="true"
  170.                  data-base-slider-options='{{ baseSliderOptions|json_encode }}'>
  172.                 {% block element_zen_image_slider_inner %}
  173.                     <div class="image-slider-container"
  174.                          data-base-slider-container="true">
  176.                         {% for image in element.data.sliderItems %}
  177.                             {% set imageElement %}
  179.                                 <div class="image-slider-item{% if loop.first != true %} is-not-first{% endif %} is-{{ sliderConfig.displayMode.value }}"
  180.                                      {% if sliderConfig.minHeight.value and  sliderConfig.displayMode.value == "cover" %}style="min-height: {{ sliderConfig.minHeight.value }}"{% endif %}>
  182.                                     {% set attributes = {
  183.                                         'class': 'img-fluid image-slider-image',
  184.                                         'alt': (image.media.translated.alt ?: ''),
  185.                                         'title': (image.media.translated.title ?: '')
  186.                                     } %}
  188.                                     {# ... enables lazy loading for images,
  189.                                     but only on cover mode, because of JS height calculation #}
  190.                                     {% if element.config.displayMode.value == 'cover' %}
  191.                                         {% if config('zenitPlatformStratus.config.lazyloading') %}
  192.                                             {% set attributes = attributes|merge({ 'loading': 'lazy' }) %}
  193.                                         {% endif %}
  194.                                     {% endif %}
  196.                                     {% if element.config.displayMode.value == 'cover' or element.config.displayMode.value == 'contain' %}
  197.                                         {% set attributes = attributes|merge({ 'data-object-fit': element.config.displayMode.value }) %}
  198.                                     {% endif %}
  200.                                     {% sw_thumbnails 'cms-image-slider-thumbnails' with {
  201.                                         media: image.media
  202.                                     } %}
  203.                                 </div>
  204.                             {% endset %}
  206.                             {% set contentElement %}
  207.                                 {% set animationClasses = [] %}
  208.                                 {% set animationClasses = ['animation-in-' ~ image.animationIn]|merge(animationClasses) %}
  210.                                 {# sticky header js options #}
  211.                                 {% set parallaxMousemoveOptions = {
  212.                                     parallaxTargetSelector: '.zen-image-slider-item-text'
  213.                                 } %}
  215.                                 {% block element_zen_image_slider_inner_content_container %}
  216.                                     <div class="zen-image-slider-item-content-container"
  217.                                          {% if image.animation == "parallax-mousemove" %}data-parallax-mousemove="true" data-zen-parallax-mousemove-options="{{ parallaxMousemoveOptions|json_encode }}"{% endif %}
  218.                                     >
  219.                                         {% if image.overlay %}
  220.                                             <div class="zen-image-slider-item-overlay"></div>
  221.                                         {% endif %}
  223.                                         {% if image.text %}
  224.                                             {% set content = image.text|raw %}
  226.                                             <div class="zen-image-slider-item-text-container {{ animationClasses|sort|join(' ') }}">
  227.                                                 {% if image.url %}
  228.                                                     <a href="{{ image.url }}"
  229.                                                        class="image-slider-link"
  230.                                                        {% if image.newTab %}target="_blank" rel="noopener"{% endif %}>
  231.                                                     </a>
  232.                                                 {% endif %}
  234.                                                 <div class="zen-image-slider-item-text" data-speed="1">
  235.                                                     <div class="zen-image-slider-item-text-value">
  236.                                                         {% if config('zenitPlatformStratus.config.twigStringLoaderExtension') %}
  237.                                                             {% sw_include '@zenitPlatformStratus/storefront/utilities/zen-template-from-string.html.twig' with {
  238.                                                                 content: content
  239.                                                             } only %}
  240.                                                         {% else %}
  241.                                                             {{ content|raw }}
  242.                                                         {% endif %}
  243.                                                     </div>
  244.                                                 </div>
  245.                                             </div>
  246.                                         {% else %}
  247.                                             {% if image.url %}
  248.                                                 <a href="{{ image.url }}"
  249.                                                    class="image-slider-link"
  250.                                                    {% if image.newTab %}target="_blank" rel="noopener"{% endif %}>
  251.                                                 </a>
  252.                                             {% endif %}
  253.                                         {% endif %}
  254.                                     </div>
  255.                                 {% endblock %}
  256.                             {% endset %}
  258.                             {% block element_zen_image_slider_inner_item %}
  259.                                 {% set elemClasses = [] %}
  260.                                 {% set elemClasses = ['animation-' ~ image.animation]|merge(elemClasses) %}
  261.                                 {% set elemClasses = [image.customItemClasses]|merge(elemClasses) %}
  263.                                 <div class="image-slider-item-container zen-slider-item-{{ loop.index }} {{ elemClasses|sort|join(' ') }}">
  264.                                     <div class="image-slider-item-inner">
  265.                                         {{ imageElement }}
  266.                                         {{ contentElement }}
  267.                                     </div>
  268.                                 </div>
  269.                             {% endblock %}
  270.                         {% endfor %}
  271.                     </div>
  273.                     {% block element_zen_image_slider_controls %}
  274.                         {% if sliderConfig.navigationArrows.value %}
  275.                             <div class="image-slider-controls-container">
  276.                                 <div class="base-slider-controls"
  277.                                      data-base-slider-controls="true">
  278.                                     {% block element_zen_image_slider_controls_items %}
  279.                                         {% block element_zen_image_slider_controls_items_arrows %}
  280.                                             <button class="base-slider-controls-prev image-slider-controls-prev{% if sliderConfig.navigationArrows.value == "outside" %} is-nav-prev-outside{% elseif sliderConfig.navigationArrows.value == "inside" %} is-nav-prev-inside{% endif %}">
  281.                                                 {% block element_zen_image_slider_controls_items_prev_icon %}
  282.                                                     {% sw_icon 'arrow-head-left' %}
  283.                                                 {% endblock %}
  284.                                             </button>
  285.                                             <button class="base-slider-controls-next image-slider-controls-next{% if sliderConfig.navigationArrows.value == "outside" %} is-nav-next-outside{% elseif sliderConfig.navigationArrows.value == "inside" %} is-nav-next-inside{% endif %}">
  286.                                                 {% block element_zen_image_slider_controls_items_next_icon %}
  287.                                                     {% sw_icon 'arrow-head-right' %}
  288.                                                 {% endblock %}
  289.                                             </button>
  290.                                         {% endblock %}
  291.                                     {% endblock %}
  292.                                 </div>
  293.                             </div>
  294.                         {% endif %}
  295.                     {% endblock %}
  296.                 {% endblock %}
  297.             </div>
  298.             {% if sliderConfig.verticalAlign.value %}
  299.                 </div>
  300.             {% endif %}
  301.         {% endblock %}
  302.     </div>
  303. {% endblock %}