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

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-image-slider.html.twig' %}
  2. {% block element_image_slider %}
  3. {% set sliderConfig = element.fieldConfig.elements %}
  5. <div class="cms-element-{{ element.type }}{% if sliderConfig.displayMode.value == " standard" and
  6.     sliderConfig.verticalAlign.value %} has-vertical-alignment{% endif %}">
  7.     {% set baseSliderOptions = {
  8.     slider: {
  9.     navPosition: 'bottom',
  10.     speed: 500,
  11.     nav: sliderConfig.navigationDots.value ? true : false,
  12.     controls: sliderConfig.navigationArrows.value ? true : false,
  13.     autoHeight: (sliderConfig.displayMode.value == "standard") ? true : false
  14.     }
  15.     } %}
  17.     {% set customField = false %}
  18.     {% for image in element.data.sliderItems %}
  19.     {% if image.media.customFields %}
  20.     {% set customField = true %}
  21.     {% endif %}
  22.     {% endfor %}
  23.     {% block element_image_slider_alignment %}
  24.     {% if config.verticalAlign.value %}
  25.     <div class="cms-element-alignment{% if sliderConfig.verticalAlign.value == " center" %} align-self-center{% elseif
  26.         sliderConfig.verticalAlign.value=="flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  27.         {% endif %}
  28.         <div class="base-slider image-slider{% if sliderConfig.navigationArrows.value == " outside" %} has-nav-outside{%
  29.             endif %}{% if sliderConfig.navigationDots.value=="outside" %} has-dots-outside{% endif %}"
  30.             data-base-slider="true" data-base-slider-options='{{ baseSliderOptions|json_encode }}'>
  32.             {% block element_image_slider_inner %}
  33.             <div class="image-slider-container" data-base-slider-container="true">
  35.                 {% for image in element.data.sliderItems %}
  37.                 {% set imageElement %}
  38.                 {% if customField == true %}
  39.                 <div class="order-2 col-md-6 order-md-1 ">
  40.                     <div class="image-slider-item-col-content">
  41.                         <div class="h1">
  42.                             {{image.media.customFields.custom_tile_extension_headline | raw}}
  43.                         </div>
  44.                         <p>{{image.media.customFields.custom_tile_extension_text | raw }}</p>
  45.                     </div>
  46.                 </div>
  47.                 {% endif %}
  48.                 <div class="{% if customField == true %} order-1 col-md-6 order-md-2 {% else %}image-slider-item{% endif %}{% if loop.first != true %} is-not-first{% endif %} is-{{ sliderConfig.displayMode.value }}"
  49.                     {% if sliderConfig.minHeight.value and sliderConfig.displayMode.value=="cover" %}
  50.                     style="min-height: {{ sliderConfig.minHeight.value }}" {% endif %}>
  51.                     {% set attributes = {
  52.                     'class': 'img-fluid image-slider-image',
  53.                     'alt': (image.media.translated.alt ?: ''),
  54.                     'title': (image.media.translated.title ?: '')
  55.                     } %}
  57.                     {% if element.config.displayMode.value == 'cover' or element.config.displayMode.value == 'contain'
  58.                     %}
  59.                     {% set attributes = attributes|merge({ 'data-object-fit': element.config.displayMode.value }) %}
  60.                     {% endif %}
  62.                     {% sw_thumbnails 'cms-image-slider-thumbnails' with {
  63.                     media: image.media
  64.                     } %}
  65.                 </div>
  67.                 {% endset %}
  69.                 {% block element_image_slider_inner_item %}
  70.                 <div class="image-slider-item-container">
  71.                     {% if image.url %}
  72.                     <a href="{{ image.url }}" class="image-slider-link" {% if image.newTab %}target="_blank"
  73.                         rel="noopener" {% endif %}>
  74.                         {{ imageElement }}
  75.                     </a>
  76.                     {% else %}
  77.                     <div class="row image-slider-item-container-row">
  78.                         {{ imageElement }}
  79.                     </div>
  80.                     {% endif %}
  81.                 </div>
  82.                 {% endblock %}
  84.                 {% endfor %}
  85.             </div>
  87.             {% block element_image_slider_controls %}
  88.             {% if sliderConfig.navigationArrows.value %}
  89.             <div class="image-slider-controls-container">
  90.                 <div class="base-slider-controls" data-base-slider-controls="true">
  91.                     {% block element_image_slider_controls_items %}
  92.                     {% block element_image_slider_controls_items_arrows %}
  93.                     <button
  94.                         class="base-slider-controls-prev image-slider-controls-prev{% if sliderConfig.navigationArrows.value == "
  95.                         outside" %} is-nav-prev-outside{% elseif sliderConfig.navigationArrows.value=="inside" %}
  96.                         is-nav-prev-inside{% endif %}">
  97.                         {% block element_image_slider_controls_items_prev_icon %}
  98.                         {% sw_icon 'arrow-head-left' %}
  99.                         {% endblock %}
  100.                     </button>
  101.                     <button
  102.                         class="base-slider-controls-next image-slider-controls-next{% if sliderConfig.navigationArrows.value == "
  103.                         outside" %} is-nav-next-outside{% elseif sliderConfig.navigationArrows.value=="inside" %}
  104.                         is-nav-next-inside{% endif %}">
  105.                         {% block element_image_slider_controls_items_next_icon %}
  106.                         {% sw_icon 'arrow-head-right' %}
  107.                         {% endblock %}
  108.                     </button>
  109.                     {% endblock %}
  110.                     {% endblock %}
  111.                 </div>
  112.             </div>
  113.             {% endif %}
  114.             {% endblock %}
  115.             {% endblock %}
  116.         </div>
  117.         {% if config.verticalAlign.value %}
  118.     </div>
  119.     {% endif %}
  120.     {% endblock %}
  121. </div>
  122. {% endblock %}