custom/plugins/NenoHeroSlider/src/Resources/views/storefront/include/neno-hero-slider.html.twig line 1

Open in your IDE?
  1. {% block neno_hero_slider %}
  2.     {% set config = config('NenoHeroSlider.config') %}
  3.     {% if config.isSliderActive %}
  4.         {% if page.extensions.hero_slider_slides %}
  5.             {% set slides = page.extensions.hero_slider_slides.elements %}
  6.             {% if slides|length > 0 %}
  8.                 {% set validMediaIds = [
  9.                     config.leftArrowIconGraphic,
  10.                     config.rightArrowIconGraphic,
  11.                     config.scrollIndicatorIconGraphic,
  12.                 ]|filter(id => id is not null) %}
  14.                 {% set customMediaCollection = searchMedia(validMediaIds, context.context) %}
  16.                 {% set customLeftArrowGraphic = customMediaCollection.get(config.leftArrowIconGraphic) %}
  17.                 {% set customRightArrowGraphic = customMediaCollection.get(config.rightArrowIconGraphic) %}
  18.                 {% set customScrollIndicatorGraphic = customMediaCollection.get(config.scrollIndicatorIconGraphic) %}
  20.                 {% set controlsDisabled = config.oneSlideControlsDisabled ? (slides|length < 2) : false %}
  22.                 {% set aspectRatioLandscape = (
  23.                     config.aspectRatioWidth and config.aspectRatioHeight and config.aspectRatioHeight is not same as(0)
  24.                     ? (config.aspectRatioWidth / config.aspectRatioHeight)
  25.                     : 2
  26.                     ) %}
  28.                 {% set aspectRatioPortrait = (
  29.                     config.inheritAspectRatioForPortrait
  30.                     ? aspectRatioLandscape
  31.                     : (
  32.                     config.aspectRatioWidthPortrait and config.aspectRatioHeightPortrait and config.aspectRatioHeightPortrait is not same as(0)
  33.                     ? (config.aspectRatioWidthPortrait / config.aspectRatioHeightPortrait)
  34.                     : 0.6
  35.                     )
  36.                     ) %}
  38.                 {% set heroSliderUserConfig = {
  39.                     heightScaleMode: config.heightScaleMode,
  40.                     heightScaleModePortrait: config.heightScaleModePortrait is same as('inherit') ? config.heightScaleMode : config.heightScaleModePortrait,
  41.                     forceLoadPortraitWhenDeviceIsPortrait: config.forceLoadPortraitImagesOnPortraitDevices ? true : false,
  42.                     forceLoadLandscapeWhenDeviceIsLandscape: config.forceLoadLandscapeImagesOnLandscapeDevices ? true : false,
  43.                     transitionMode: config.transitionMode ?: 'slide',
  44.                     aspectRatio: aspectRatioLandscape,
  45.                     aspectRatioPortrait: aspectRatioPortrait,
  46.                     useInterval: config.useInterval and not controlsDisabled ? true : false,
  47.                     boundaryMode: config.boundaryMode ?: 'infinite',
  48.                     infiniteWrapMode: config.infiniteWrapMode ?: 'loop',
  49.                     transitionDuration: config.transitionDuration ?: 1,
  50.                     transitionEasingCurve: config.easingCurve ?: 'EASE',
  51.                     interval: config.intervalDuration ? (config.intervalDuration * 1000) : 12000,
  52.                     fadeScrollIndicatorOnScroll: config.animateScrollIndicator ? true : false,
  53.                     scrollOnScrollIndicatorClick: config.scrollOnScrollIndicatorClick ? true : false,
  54.                     enableArrowKeyControl: config.enableArrowKeyControl and not controlsDisabled ? true : false,
  55.                     touchDragEnabled: config.enableTouchSwiping ? true : false,
  56.                     mouseDragEnabled: config.enableMouseSwiping ? true : false,
  57.                 } %}
  59.                 <div
  60.                     class="hero-slider{% if config.transitionMode is same as('slide') %} hero-slider-mode-slide{% else %} hero-slider-mode-blend{% endif %}{% block neno_hero_slider_class_append %}{% endblock %}"
  61.                     id="hero-slider"
  62.                     data-hero-slider
  63.                     data-hero-slider-options='{% block neno_hero_slider_json_config %}{{ heroSliderUserConfig|json_encode }}{% endblock %}'
  64.                 >
  65.                     {% block neno_hero_slider_inner %}
  66.                     <noscript>
  67.                         {% block neno_hero_slider_noscript_styles %}
  68.                         <style>
  69.                             .hero-slider {
  70.                                 overflow: auto; !important;
  71.                             }
  72.                             .hero-slider,
  73.                             .hero-slider-slide-container {
  74.                                 height: 60vh !important;
  75.                             }
  76.                             .hero-slider-image {
  77.                                 width: 100% !important;
  78.                                 height: auto !important;
  79.                             }
  80.                             .hero-slider {
  81.                                 position: relative !important;
  82.                             }
  83.                             .hero-slider-image {
  84.                                 position: static !important;
  85.                             }
  86.                             .hero-slider-scroll-overlay,
  87.                             .hero-slider-navigation-btn,
  88.                             .hero-slider-menu {
  89.                                 display: none;
  90.                             }
  91.                         </style>
  92.                         {% endblock %}
  93.                     </noscript>
  94.                     <div class="hero-slider-slide-container">
  95.                         {% apply spaceless %}
  96.                         {% for slide in slides %}
  97.                         {% if slide.mediaLandscape %}
  98.                             {% set alt_title_landscape = slide.translated.imageAltTitle ?: slide.mediaLandscape.alt %}
  99.                             {% set landscape_thumbnails = slide.mediaLandscape.thumbnails|sort|reverse|json_encode %}
  100.                         {% endif %}
  101.                         {% if slide.mediaPortrait %}
  102.                             {% set alt_title_portrait = slide.translated.imageAltTitle ?: slide.mediaLandscape.alt %}
  103.                             {% set portrait_thumbnails = slide.mediaPortrait.thumbnails|sort|reverse|json_encode %}
  104.                         {% endif %}
  105.                         <div
  106.                             class="hero-slider-slide{% if slide.cssClass %} {{ slide.cssClass|sw_sanitize }}{% endif %}"
  107.                             data-animation-duration="{% block neno_hero_slider_image_anim_duration %}60{% endblock %}"
  108.                             data-animation-preset-landscape="{{ slide.imageMovementPresetLandscape ?: 'NONE' }}"
  109.                             data-animation-preset-portrait="{{ slide.imageMovementPresetPortrait ?: 'NONE' }}"
  110.                             style="background-color: {{ slide.backgroundColor ?: 'transparent' }}"
  111.                         >
  112.                             {% block neno_hero_slider_slide_inner %}
  113.                             {% block neno_hero_slider_slide_image %}
  114.                             {% if slide.mediaLandscape or slide.mediaPortrait %}
  115.                                 <img
  116.                                     class="hero-slider-image"
  117.                                     alt="{{ slide.translated.imageAltTitle ?: (slide.mediaLandscape.alt ?: slide.mediaPortrait.alt) }}"
  118.                                     {% apply spaceless %}
  119.                                         {% if slide.mediaPortrait %}
  120.                                             {% block neno_hero_slider_slide_portrait_srcset %}
  121.                                                 {% if slide.mediaPortrait.thumbnails|length > 0 %}
  122.                                                     {% set thumbnails = slide.mediaPortrait.thumbnails|sort|reverse %}
  124.                                                     {# generate srcset with all available thumbnails #}
  125.                                                     {% set srcsetValue %}{% apply spaceless %}
  126.                                                         {{ slide.mediaPortrait|sw_encode_media_url }} {{ thumbnails|first.width + 1 }}w, {% for thumbnail in thumbnails %}{{ thumbnail.url | sw_encode_url }} {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}{% endfor %}
  127.                                                     {% endapply %}{% endset %}
  128.                                                     data-srcset-portrait="{{ srcsetValue }}"
  129.                                                 {% endif %}
  130.                                                 data-src-portrait="{{ slide.mediaPortrait|sw_encode_media_url }}"
  131.                                             {% endblock %}
  132.                                         {% endif %}
  133.                                         {% if slide.mediaLandscape %}
  134.                                             {% block neno_hero_slider_slide_landscape_srcset %}
  135.                                                 {% if slide.mediaLandscape.thumbnails|length > 0 %}
  136.                                                     {% set thumbnails = slide.mediaLandscape.thumbnails|sort|reverse %}
  138.                                                     {# generate srcset with all available thumbnails #}
  139.                                                     {% set srcsetValue %}{% apply spaceless %}
  140.                                                         {{ slide.mediaLandscape|sw_encode_media_url }} {{ thumbnails|first.width + 1 }}w, {% for thumbnail in thumbnails %}{{ thumbnail.url | sw_encode_url }} {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}{% endfor %}
  141.                                                     {% endapply %}{% endset %}
  142.                                                     data-srcset-landscape="{{ srcsetValue }}"
  143.                                                 {% endif %}
  144.                                                 data-src-landscape="{{ slide.mediaLandscape|sw_encode_media_url }}"
  145.                                             {% endblock %}
  146.                                         {% endif %}
  147.                                     {% endapply %}
  148.                                     sizes="100vw"
  149.                                 >
  150.                                 <noscript>
  151.                                     {% if slide.mediaLandscape %}
  152.                                         {% sw_thumbnails 'hero-slider-thumbnails-landscape' with {
  153.                                             media: slide.mediaLandscape,
  154.                                             attributes: {
  155.                                                 alt: alt_title_landscape,
  156.                                                 class: 'hero-slider-thumbnails hero-slider-thumbnails-landscape'
  157.                                             }
  158.                                         } %}
  159.                                     {% endif %}
  160.                                     {% if slide.mediaPortrait %}
  161.                                         {% sw_thumbnails 'hero-slider-thumbnails-portrait' with {
  162.                                             media: slide.mediaPortrait,
  163.                                             attributes: {
  164.                                                 alt: alt_title_portrait,
  165.                                                 class: 'hero-slider-thumbnails hero-slider-thumbnails-portrait'
  166.                                             }
  167.                                         } %}
  168.                                     {% endif %}
  169.                                 </noscript>
  170.                                 </img>
  171.                             {% endif %}
  172.                             {% endblock %}
  173.                             {% block neno_hero_slider_slide_overlay %}
  174.                             <div class="hero-slider-overlay" role="presentation" style="background-color: {{ slide.overlayColor ?: (config.defaultOverlayColor ?: 'transparent') }}"></div>
  175.                             {% endblock %}
  176.                             {% block neno_hero_slider_slide_link %}
  177.                             {% if slide.translated.slideLink %}
  178.                             <a class="hero-slider-slide-link" href="{{ slide.translated.slideLink }}" title="{{ slide.translated.buttonLinkText ?: ('neno-hero-slider.openLink'|trans) }}" {% if slide.slideLinkNewTab %} target="_blank" rel="noopener"{% endif %} draggable="false"></a>
  179.                             {% endif %}
  180.                             {% endblock %}
  181.                             {% block neno_hero_slider_slide_content %}
  182.                             <div class="hero-slider-content-container hs-vertical-align-{{ config.verticalTextBlockAlignment ?: 'center' }} hs-horizontal-align-{{ config.horizontalTextBlockAlignment ?: 'left' }}">
  183.                                 {% block neno_hero_slider_slide_content_inner %}
  184.                                 {% if slide.translated.textContentBeforeHeadline or slide.translated.headline or slide.translated.textContentAfterHeadline or slide.translated.buttonLink %}
  185.                                 <div class="hero-slider-description hs-t-align-{{ config.defaultTextAlignment ?: 'left' }}" style="background-color: {{ config.textBlockBackgroundColor ?: 'transparent' }}; color: {{ config.defaultTextBlockColor ?: 'white' }}">
  186.                                     {% block neno_hero_slider_slide_description_inner %}
  187.                                     {% block neno_hero_slider_slide_content_before %}
  188.                                     <div class="hero-slider-content-before">
  189.                                         {% block neno_hero_slider_slide_content_before_inner %}
  190.                                         {{ ((slide.translated.textContentBeforeHeadline|raw) ?: '')|sw_sanitize }}
  191.                                         {% endblock %}
  192.                                     </div>
  193.                                     {% endblock %}
  194.                                     {% set headline_tag_name = (loop.first ? (config.headlineTagNameFirstSlide ?: 'h2') : ((config.headlineTagNameFollowingSlides ?: 'h2'))) %}
  195.                                     {% block neno_hero_slider_slide_headline %}
  196.                                     {% set headline_html %}<{{ headline_tag_name }} class="hero-slider-headline">{{ ((slide.translated.headline|raw) ?: '')|sw_sanitize }}{{ '</'|raw }}{{ headline_tag_name }}>{% endset %}
  197.                                     {{ headline_html }}
  198.                                     {% endblock %}
  199.                                     {% block neno_hero_slider_slide_content_after %}
  200.                                     <div class="hero-slider-content-after">
  201.                                         {% block neno_hero_slider_slide_content_after_inner %}
  202.                                         {{ ((slide.translated.textContentAfterHeadline|raw) ?: '')|sw_sanitize }}
  203.                                         {% endblock %}
  204.                                     </div>
  205.                                     {% endblock %}
  206.                                     {% block neno_hero_slider_slide_cta_container %}
  207.                                     <div class="hero-slider-cta-container hs-t-align-{{ config.ctaButtonAlignment ?: 'left' }}">
  208.                                         {% block neno_hero_slider_slide_cta_container_inner %}
  209.                                         {% if slide.translated.buttonLink %}
  210.                                         <a class="btn btn-{{ config.ctaButtonType ?: 'primary' }} hero-slider-cta-btn" title="{{ slide.translated.buttonLinkText }}" tabindex="-1" href="{{ slide.translated.buttonLink }}"{% if slide.buttonLinkNewTab %} target="_blank" rel="noopener"{% endif %}>
  211.                                             {{ slide.translated.buttonLinkText }}
  212.                                         </a>
  213.                                         {% endif %}
  214.                                         {% endblock %}
  215.                                     </div>
  216.                                     {% endblock %}
  217.                                     {% endblock %}
  218.                                 </div>
  219.                                 {% endif %}
  220.                                 {% endblock %}
  221.                             </div>
  222.                             {% endblock %}
  223.                             {% endblock %}
  224.                         </div>
  225.                         {% endfor %}
  226.                         {% endapply %}
  227.                     </div>
  228.                     {% if config.showNavigationControls and not controlsDisabled %}
  229.                     <button
  230.                         type="button"
  231.                         class="hero-slider-btn hero-slider-navigation-btn hero-slider-navigation-btn-left"
  232.                         aria-controls="hero-slider"
  233.                         aria-label="{{ 'neno-hero-slider.controls.prevTitle' | trans }}"
  234.                         title="{{ 'neno-hero-slider.controls.prevTitle' | trans }}"
  235.                     >
  236.                         {% block neno_hero_slider_prev_icon %}
  237.                             {% if customLeftArrowGraphic %}
  238.                                 <span
  239.                                     class="icon hs-custom-icon"
  240.                                     style="background-image: url('{{ customLeftArrowGraphic.url }}');"
  241.                                     role="presentation"
  242.                                 ></span>
  243.                             {% else %}
  244.                                 {% sw_icon 'arrow-head-left' %}
  245.                             {% endif %}
  246.                         {% endblock %}
  247.                     </button>
  248.                     <button
  249.                         type="button"
  250.                         class="hero-slider-btn hero-slider-navigation-btn hero-slider-navigation-btn-right"
  251.                         aria-controls="hero-slider"
  252.                         aria-label="{{ 'neno-hero-slider.controls.nextTitle' | trans }}"
  253.                         title="{{ 'neno-hero-slider.controls.nextTitle' | trans }}"
  254.                     >
  255.                         {% block neno_hero_slider_next_icon %}
  256.                             {% if customRightArrowGraphic %}
  257.                                 <span
  258.                                     class="icon hs-custom-icon"
  259.                                     style="background-image: url('{{ customRightArrowGraphic.url }}');"
  260.                                     role="presentation"
  261.                                 ></span>
  262.                             {% else %}
  263.                                 {% sw_icon 'arrow-head-right' %}
  264.                             {% endif %}
  265.                         {% endblock %}
  266.                     </button>
  267.                     {% endif %}
  268.                     {% if config.showJumpNavigation and not controlsDisabled %}
  269.                     <div class="hero-slider-menu hs-{{ config.bulletDirection ?: 'vertical' }}" role="menu">
  270.                         {% for slide in slides %}
  271.                             <button type="button" class="hero-slider-btn hero-slider-menu-item" role="menuitemradio"></button>
  272.                         {% endfor %}
  273.                     </div>
  274.                     {% endif %}
  275.                     {% if config.showScrollIndicator %}
  276.                     <div class="hero-slider-scroll-overlay hs-horizontal-align-{{ config.scrollIndicatorAlignment ?: 'center' }}" role="presentation">
  277.                         <button type="button" title="{{ 'neno-hero-slider.scrollDown'|trans }}" class="hero-slider-btn hero-slider-scroll-icon hs-interactive">
  278.                             {% if customScrollIndicatorGraphic %}
  279.                                 <span
  280.                                     class="icon hs-custom-icon"
  281.                                     style="background-image: url('{{ customScrollIndicatorGraphic.url }}');"
  282.                                     role="presentation"
  283.                                 ></span>
  284.                             {% else %}
  285.                                 {% sw_icon 'arrow-head-down' %}
  286.                             {% endif %}
  287.                         </button>
  288.                     </div>
  289.                     {% endif %}
  290.                     {% endblock %}
  291.                 </div>
  292.                 {% block neno_hero_slider_user_style %}
  293.                 <style>
  294.                     .hero-slider .hero-slider-navigation-btn {
  295.                     {% if config.navigationControlBackgroundColor %}
  296.                         background-color: {{ config.navigationControlBackgroundColor }};
  297.                     {% endif %}
  298.                     {% if config.navigationControlIconColor %}
  299.                         color: {{ config.navigationControlIconColor }};
  300.                     {% endif %}
  301.                     }
  303.                     .hero-slider .hero-slider-scroll-icon {
  304.                     {% if config.navigationControlBackgroundColor %}
  305.                         background-color: {{ config.scrollIndicatorBackgroundColor }};
  306.                     {% endif %}
  307.                     {% if config.navigationControlIconColor %}
  308.                         color: {{ config.scrollIndicatorIconColor }};
  309.                     {% endif %}
  310.                     }
  312.                     .hero-slider .hero-slider-menu-item {
  313.                     {% if config.jumpNavigationItemBackgroundColor %}
  314.                         background-color: {{ config.jumpNavigationItemBackgroundColor }};
  315.                     {% endif %}
  316.                     {% if config.jumpNavigationItemBorderColor %}
  317.                         border-color: {{ config.jumpNavigationItemBorderColor }};
  318.                     {% endif %}
  319.                     }
  321.                     .hero-slider .hero-slider-menu-item:after,
  322.                     .hero-slider .hero-slider-menu-item::after {
  323.                     {% if config.jumpNavigationItemFillColor %}
  324.                         background-color: {{ config.jumpNavigationItemFillColor }};
  325.                     {% endif %}
  326.                     }
  328.                     .hero-slider .btn.hero-slider-cta-btn {
  329.                     {% if config.ctaButtonType is same as('primary') %}
  330.                     {% if config.ctaButtonBackgroundColor %}
  331.                         background-color: {{ config.ctaButtonBackgroundColor }};
  332.                     {% endif %}
  333.                     {% if config.ctaButtonBackgroundColor %}
  334.                         border-color: {{ config.ctaButtonBackgroundColor }};
  335.                     {% endif %}
  336.                     {% if config.ctaButtonBackgroundColor %}
  337.                         color: {{ config.ctaButtonTextColor }};
  338.                     {% endif %}
  339.                     {% else %}
  340.                     {% if config.ctaButtonBackgroundColor %}
  341.                         border-color: {{ config.ctaButtonBackgroundColor }};
  342.                     {% endif %}
  343.                     {% if config.ctaButtonBackgroundColor %}
  344.                         color: {{ config.ctaButtonBackgroundColor }};
  345.                     {% endif %}
  346.                     {% endif %}
  348.                         font-family: {{ config.buttonFontFamily ? ('"' ~ config.buttonFontFamily ~ '"')|raw|sw_sanitize : 'inherit' }};
  349.                         font-size: {{ config.buttonFontSize ? (config.buttonFontSize ~ 'rem') : '.875rem' }};
  350.                         margin-bottom: {{ config.belowButtonGap ? (config.belowButtonGap ~ 'em') : '0' }};
  351.                     }
  353.                     .hero-slider .btn.hero-slider-cta-btn:hover {
  354.                     {% if config.ctaButtonType is same as('primary') %}
  355.                     {% if config.ctaButtonBackgroundColor %}
  356.                         background-color: {{ config.ctaButtonHoverBackgroundColor ?: config.ctaButtonBackgroundColor }};
  357.                     {% endif %}
  358.                     {% if config.ctaButtonBackgroundColor %}
  359.                         border-color: {{ config.ctaButtonBackgroundColor }};
  360.                     {% endif %}
  361.                     {% if config.ctaButtonTextColor %}
  362.                         color: {{ config.ctaButtonTextColor }};
  363.                     {% endif %}
  364.                     {% else %}
  365.                     {% if config.ctaButtonBackgroundColor %}
  366.                         border-color: {{ config.ctaButtonBackgroundColor }};
  367.                     {% endif %}
  368.                     {% if config.ctaButtonBackgroundColor %}
  369.                         background-color: {{ config.ctaButtonBackgroundColor }};
  370.                     {% endif %}
  371.                     {% if config.ctaButtonBackgroundColor %}
  372.                         color: {{ config.ctaButtonTextColor }};
  373.                     {% endif %}
  374.                     {% endif %}
  375.                     }
  377.                     .hero-slider .hero-slider-headline {
  378.                         color: {{ config.headlineColor ?: (config.defaultTextBlockColor ?: 'inherit') }};
  379.                         font-family: {{ config.headlineFontFamily ? ('"' ~ config.headlineFontFamily ~ '"')|raw|sw_sanitize : 'inherit' }};
  380.                         font-weight: {{ config.headlineFontWeight ?: 'bold' }};
  381.                         font-size: {{ config.headlineFontSizeXs ? (config.headlineFontSizeXs ~ 'rem') : 'initial' }};
  382.                         line-height: {{ config.headlineLineHeight ?: 'inherit' }};
  383.                         margin-bottom: {{ config.afterHeadlineGap ? (config.afterHeadlineGap ~ 'em') : '0' }};
  384.                     }
  386.                     .hero-slider .hero-slider-content-before {
  387.                         font-family: {{ config.textAboveHeadlineFontFamily ? ('"' ~ config.textAboveHeadlineFontFamily ~ '"')|raw|sw_sanitize : 'inherit' }};
  388.                         font-size: {{ config.fontSizeAboveHeadlineXs ? (config.fontSizeAboveHeadlineXs ~ 'rem') : 'initial' }};
  389.                         line-height: {{ config.textAboveHeadlineLineHeight ?: 'inherit' }};
  390.                         margin-bottom: {{ config.beforeHeadlineGap ? (config.beforeHeadlineGap ~ 'em') : '0' }};
  391.                     }
  393.                     .hero-slider .hero-slider-content-after {
  394.                         font-family: {{ config.textBelowHeadlineFontFamily ? ('"' ~ config.textBelowHeadlineFontFamily ~ '"')|raw|sw_sanitize : 'inherit' }};
  395.                         font-size: {{ config.fontSizeBelowHeadlineXs ? (config.fontSizeBelowHeadlineXs ~ 'rem') : 'initial' }};
  396.                         line-height: {{ config.textBelowHeadlineLineHeight ?: 'inherit' }};
  397.                         margin-bottom: {{ config.afterTextBelowHeadlineGap ? (config.afterTextBelowHeadlineGap ~ 'em') : '0' }};
  398.                     }
  400.                     {% if config.textTransitionMode is same as('fadein') %}
  401.                     .hero-slider .hero-slider-slide .hero-slider-description {
  402.                         opacity: 0;
  403.                         transition: opacity .7s ease, transform .5s ease;
  404.                         transition-delay: {{ config.transitionDuration ?: 0 }}s;
  405.                         transform: translateY(10%);
  406.                     }
  408.                     .hero-slider .hero-slider-slide.active .hero-slider-description {
  409.                         opacity: 1;
  410.                         transform: translateY(0);
  411.                     }
  412.                     {% endif %}
  414.                     @media all and (min-width: {{ (theme_config('breakpoint.md') - 1) ~ 'px' }}) {
  415.                         .hero-slider .hero-slider-headline {
  416.                             font-size: {{ config.headlineFontSizeMd ? (config.headlineFontSizeMd ~ 'rem') : 'initial' }};
  417.                         }
  419.                         .hero-slider .hero-slider-content-before {
  420.                             font-size: {{ config.fontSizeAboveHeadlineMd ? (config.fontSizeAboveHeadlineMd ~ 'rem') : 'initial' }};
  421.                         }
  423.                         .hero-slider .hero-slider-content-after {
  424.                             font-size: {{ config.fontSizeBelowHeadlineMd ? (config.fontSizeBelowHeadlineMd ~ 'rem') : 'initial' }};
  425.                         }
  426.                     }
  428.                     @media all and (min-width: {{ (theme_config('breakpoint.lg') - 1) ~ 'px' }}) {
  429.                         .hero-slider .hero-slider-headline {
  430.                             font-size: {{ config.headlineFontSizeLg ? (config.headlineFontSizeLg ~ 'rem') : 'initial' }};
  431.                         }
  433.                         .hero-slider .hero-slider-content-before {
  434.                             font-size: {{ config.fontSizeAboveHeadlineLg ? (config.fontSizeAboveHeadlineLg ~ 'rem') : 'initial' }};
  435.                         }
  437.                         .hero-slider .hero-slider-content-after {
  438.                             font-size: {{ config.fontSizeBelowHeadlineLg ? (config.fontSizeBelowHeadlineLg ~ 'rem') : 'initial' }};
  439.                         }
  440.                     }
  442.                     {{ config.userInjectedCSS ? (config.userInjectedCSS|raw|sw_sanitize) : '' }}
  443.                 </style>
  444.                 {% endblock %}
  445.                 {% block neno_hero_slider_init_script %}
  446.                 <script type="text/javascript">
  447.                     (function () {
  448.                         var forcePOnP = '{{ config.forceLoadPortraitImagesOnPortraitDevices }}' === '1';
  449.                         var forceLOnL = '{{ config.forceLoadPortraitImagesOnPortraitDevices }}' === '1';
  451.                         /* load first image without waiting for main script execution */
  452.                         var firstSlideImage = document.querySelector('img.hero-slider-image');
  454.                         function loadLandscapeImage() {
  455.                             var lsSrcSet = firstSlideImage.getAttribute('data-srcset-landscape');
  456.                             var lsSrc = firstSlideImage.getAttribute('data-src-landscape');
  458.                             if (lsSrcSet) {
  459.                                 firstSlideImage.srcSet = lsSrcSet;
  460.                             } else if (lsSrc) {
  461.                                 firstSlideImage.src = lsSrc;
  462.                             }
  463.                         }
  465.                         function loadPortraitImage() {
  466.                             var poSrcSet = firstSlideImage.getAttribute('data-srcset-portrait');
  467.                             var poSrc = firstSlideImage.getAttribute('data-src-portrait');
  469.                             if (poSrcSet) {
  470.                                 firstSlideImage.srcSet = poSrcSet;
  471.                             } else if (poSrc) {
  472.                                 firstSlideImage.src = poSrc;
  473.                             }
  474.                         }
  476.                         function fillHeight(el) {
  477.                             var vRect = el.getBoundingClientRect();
  478.                             el.style.height = (window.innerHeight - vRect.top) + 'px';
  479.                         }
  481.                         var el = document.querySelector('.hero-slider');
  483.                         var hsmLandscape = '{{ config.heightScaleMode }}';
  484.                         var hsmPortrait = '{{ config.heightScaleModePortrait }}';
  486.                         var hasFixedAspectL = hsmLandscape === 'fixed_aspect';
  487.                         var hasFixedAspectP = hsmPortrait === 'inherit' ? hasFixedAspectL : (hsmPortrait === 'fixed_aspect');
  489.                         var windowAspect = window.innerWidth / window.innerHeight;
  490.                         var isViewportP = (windowAspect < 1);
  492.                         var initWidth = el.getBoundingClientRect().width;
  494.                         /* prime slider height */
  495.                         if (isViewportP) {
  496.                             if (hasFixedAspectP) {
  497.                                 el.style.height = (1 / {{ aspectRatioPortrait }} * (initWidth || window.innerWidth)) + 'px';
  498.                             } else {
  499.                                 fillHeight(el);
  500.                             }
  501.                         } else {
  502.                             if (hasFixedAspectL) {
  503.                                 el.style.height = (1 / {{ aspectRatioLandscape }} * (initWidth || window.innerWidth)) + 'px';
  504.                             } else {
  505.                                 fillHeight(el);
  506.                             }
  507.                         }
  509.                         if (firstSlideImage) {
  510.                             if ('objectFit' in firstSlideImage.style) {
  511.                                 firstSlideImage.style.objectFit = 'cover';
  512.                                 firstSlideImage.style.objectPosition = 'center center';
  513.                             }
  515.                             if (isViewportP && forcePOnP) {
  516.                                 loadPortraitImage();
  517.                             } else if (!isViewportP && forceLOnL) {
  518.                                 loadLandscapeImage();
  519.                             } else {
  520.                                 var bRect = el.getBoundingClientRect();
  521.                                 var boxAspectRatio = (bRect.width / bRect.height);
  523.                                 if (boxAspectRatio < 1) {
  524.                                     loadPortraitImage();
  525.                                 } else {
  526.                                     loadLandscapeImage();
  527.                                 }
  528.                             }
  530.                             firstSlideImage.classList.add('hs-image-loaded');
  531.                         }
  532.                     })();
  533.                 </script>
  534.                 {% endblock %}
  535.             {% endif %}
  536.         {% endif %}
  537.     {% endif %}
  538. {% endblock %}