custom/plugins/HyBuys/src/Resources/views/storefront/element/blur-elysium-slide.html.twig line 1

Open in your IDE?
  1. {# {% sw_extends '@BlurElysiumSlider/storefront/element/blur-elysium-slide.html.twig' %} #}
  3. {% block cms_element_blur_elysium_slide_root %}
  5.     {% set contentVerticalAlign = ' content__x-left' %}
  6.     {% if slide.slideSettings.contentVerticalAlign %}
  7.         {% set contentVerticalAlign = ' content__x-' ~ slide.slideSettings.contentVerticalAlign %}
  8.     {% endif %}
  9.     {% if slide.slideSettings.containerVerticalAlign %}
  10.         {% set containerVerticalAlignment = ' content-container__y-' ~ slide.slideSettings.containerVerticalAlign %}
  11.     {% endif %}
  12.     {% if slide.slideSettings.containerHorizontalAlign %}
  13.         {% set containerHorizonalAlignment = ' content-container__x-' ~ slide.slideSettings.containerHorizontalAlign %}
  14.     {% endif %}
  15.     {% if slide.slideSettings.containerBoxMode %}
  16.         {% set containerBoxMode = ' content-container__box-mode' %}
  17.     {% endif %}
  19.     {# @TODO add video support #}
  20.     {% set bgImageExtensionWhitelist = [
  21.         'jpg',
  22.         'jpeg',
  23.         'png',
  24.         'webp',
  25.         'svg'
  26.     ] %}
  28.     {% block cms_element_blur_elysium_slide_css_styles %}
  30.         {% apply spaceless %}
  31.             <style>
  32.                 {% sw_include '@Storefront/storefront/element/blur-elysium-slide-media.html.twig' with {
  33.                     media: slide.media,
  34.                     slideId: slide.id,
  35.                     extenstionWhitelist: bgImageExtensionWhitelist
  36.                 } only %}
  38.                 {# portrait mode background-image #}
  39.                 {% if slide.mediaPortrait.url and ( slide.media.fileExtension in bgImageExtensionWhitelist ) %}
  40.                 @media screen and (orientation: portrait) {
  41.                 {% sw_include '@Storefront/storefront/element/blur-elysium-slide-media.html.twig' with {
  42.                     media: slide.mediaPortrait,
  43.                     slideId: slide.id,
  44.                     extenstionWhitelist: bgImageExtensionWhitelist
  45.                 } only %}
  46.                 }
  48.                 {% endif %}
  50.                 {% if slide.slideSettings.headline.textcolor %}
  51.                 [data-elysium-slide-id="{{ slide.id }}"] .cms-element-elysium-slide__title {
  52.                     color: {{slide.slideSettings.headline.textcolor}};
  53.                 }
  55.                 {% endif %}
  57.                 [data-elysium-slide-id="{{ slide.id }}"] {
  58.                     {% if slide.slideSettings.slideBgColor %} background-color: {{slide.slideSettings.slideBgColor}};
  59.                 {% endif %}
  60.                 }
  62.                 [data-elysium-slide-id="{{ slide.id }}"] .cms-element-elysium-slide__container {
  63.                     {% if slide.slideSettings.containerBgColor %} background-color: {{slide.slideSettings.containerBgColor}};
  64.                 {% endif %} {% if slide.slideSettings.containerPadding %} padding: {{slide.slideSettings.containerPadding}};
  65.                 {% endif %}
  66.                 }
  68.                 {% if slide.slideSettings.containerBoxMode %}
  69.                 {# @TODO make the min-width breakpoint configurable #}
  70.                 @media screen and ( min-width: {{ theme_config('breakpoint.sm') ~ 'px' }} ) {
  71.                     [data-elysium-slide-id="{{ slide.id }}"] .cms-element-elysium-slide__container {
  72.                     {% if slide.slideSettings.containerMaxWidth %} flex-basis: {{ slide.slideSettings.containerMaxWidth }} !important;
  73.                         max-width: {{ slide.slideSettings.containerMaxWidth }} !important;
  74.                     {% else %} flex: 0 1 50%;
  75.                         max-width: 50%;
  76.                     {% endif %}
  77.                     }
  78.                 }
  80.                 {% endif %}
  81.                 {% block cms_element_blur_elysium_slide_css_styles_extend %}{% endblock %}
  82.             </style>
  83.         {% endapply %}
  84.     {% endblock %}
  86.     {% block cms_element_blur_elysium_slide %}
  88.         <div
  89.              class="slide_inner">
  90.             <div class="image_block">
  91. {#                <div class="image_block" data-elysium-slide-id="{{ slide.id }}">#}
  92.                 {% sw_thumbnails 'slick-image' with {
  93.                     media: slide.media
  94.                 } %}
  95. {#                <img src="images/x1/map.png" alt="" title=""#}
  96. {#                     srcset="images/x1/map.png 1x, images/x2/map@2x.png 2x"#}
  97. {#                     width="960" height="580"#}
  98. {#                />#}
  99.             </div>
  101.                 {#            {% if slide.slideSettings.urlOverlay is same as( true ) and slide.translated.url %} #}
  102.                 {#                <a href="{{ slide.translated.url }}" #}
  103.                 {#                    class="cms-element-elysium-slide__url-overlay" #}
  104.                 {#                    title="{{ slide.translated.title }}}" #}
  105.                 {#                    class="btn btn-light cms-element-elysium-slide__cta-button" #}
  106.                 {#                    {% if slide.slideSettings.urlTarget == "external" %} #}
  107.                 {#                        target="_blank" #}
  108.                 {#                        rel="noopener" #}
  109.                 {#                    {% endif %}>{{ slide.translated.title }}</a> #}
  110.                 {#            {% endif %} #}
  112.                 {% block cms_element_blur_elysium_slide_container %}
  113.                     <div class="info_block">
  114.                         {% set headlineElement = 'div' %}
  116.                         {% if slide.slideSettings.headline.element %}
  117.                             {% set headlineElement = slide.slideSettings.headline.element %}
  118.                         {% endif %}
  120.                         {% block cms_element_blur_elysium_slide_title %}
  121.                             {% if slide.translated.title %}
  123.                                 <div class="slide_title">
  124.                                     {{ slide.translated.title }}
  125.                                 </div>
  127.                             {% endif %}
  128.                         {% endblock %}
  130.                         {% block cms_element_blur_elysium_slide_description %}
  131.                                 {% if slide.translated.description %}
  132.                                     <div class="slide_description">
  133.                                         {{ slide.translated.description|raw }}
  134.                                     </div>
  135.                                 {% endif %}
  136.                         {% endblock %}
  138.                         {% block cms_element_blur_elysium_slide_actions %}
  141.                             {% block cms_element_blur_elysium_slide_action_cta_button %}
  142.                                 {# @TODO add button icon? #}
  144.                                 {% if slide.translated.button_label and slide.translated.url %}
  145.                                     <a href="{{ slide.translated.url }}"
  146.                                        title="{{ slide.translated.button_label }}"
  147.                                        class="primary_btn"
  148.                                         {% if slide.slideSettings.urlTarget == "external" %}
  149.                                             target="_blank"
  150.                                             rel="noopener"
  151.                                         {% endif %}
  152.                                     >
  154.                                         {{ slide.translated.button_label }}
  155.                                     </a>
  156.                                 {% endif %}
  157.                             {% endblock %}
  159.                         {% endblock %}
  161.                     </div>
  162.                 {% endblock %}
  164.         </div>
  166.     {% endblock %}
  167. {% endblock %}