custom/plugins/NenoHeroSlider/src/Resources/views/storefront/base.html.twig line 1

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