Symfony Profiler

{% block neno_hero_slider %}
{% set config = config('NenoHeroSlider.config') %}
{% if config.isSliderActive %}
{% if page.extensions.hero_slider_slides %}
{% set slides = page.extensions.hero_slider_slides.elements %}
{% if slides|length > 0 %}
{% set validMediaIds = [
config.leftArrowIconGraphic,
config.rightArrowIconGraphic,
config.scrollIndicatorIconGraphic,
]|filter(id => id is not null) %}
{% set customMediaCollection = searchMedia(validMediaIds, context.context) %}
{% set customLeftArrowGraphic = customMediaCollection.get(config.leftArrowIconGraphic) %}
{% set customRightArrowGraphic = customMediaCollection.get(config.rightArrowIconGraphic) %}
{% set customScrollIndicatorGraphic = customMediaCollection.get(config.scrollIndicatorIconGraphic) %}
{% set controlsDisabled = config.oneSlideControlsDisabled ? (slides|length < 2) : false %}
{% set aspectRatioLandscape = (
config.aspectRatioWidth and config.aspectRatioHeight and config.aspectRatioHeight is not same as(0)
? (config.aspectRatioWidth / config.aspectRatioHeight)
: 2
) %}
{% set aspectRatioPortrait = (
config.inheritAspectRatioForPortrait
? aspectRatioLandscape
: (
config.aspectRatioWidthPortrait and config.aspectRatioHeightPortrait and config.aspectRatioHeightPortrait is not same as(0)
? (config.aspectRatioWidthPortrait / config.aspectRatioHeightPortrait)
: 0.6
)
) %}
{% set heroSliderUserConfig = {
heightScaleMode: config.heightScaleMode,
heightScaleModePortrait: config.heightScaleModePortrait is same as('inherit') ? config.heightScaleMode : config.heightScaleModePortrait,
forceLoadPortraitWhenDeviceIsPortrait: config.forceLoadPortraitImagesOnPortraitDevices ? true : false,
forceLoadLandscapeWhenDeviceIsLandscape: config.forceLoadLandscapeImagesOnLandscapeDevices ? true : false,
transitionMode: config.transitionMode ?: 'slide',
aspectRatio: aspectRatioLandscape,
aspectRatioPortrait: aspectRatioPortrait,
useInterval: config.useInterval and not controlsDisabled ? true : false,
boundaryMode: config.boundaryMode ?: 'infinite',
infiniteWrapMode: config.infiniteWrapMode ?: 'loop',
transitionDuration: config.transitionDuration ?: 1,
transitionEasingCurve: config.easingCurve ?: 'EASE',
interval: config.intervalDuration ? (config.intervalDuration * 1000) : 12000,
fadeScrollIndicatorOnScroll: config.animateScrollIndicator ? true : false,
scrollOnScrollIndicatorClick: config.scrollOnScrollIndicatorClick ? true : false,
enableArrowKeyControl: config.enableArrowKeyControl and not controlsDisabled ? true : false,
touchDragEnabled: config.enableTouchSwiping ? true : false,
mouseDragEnabled: config.enableMouseSwiping ? true : false,
} %}
<div
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 %}"
id="hero-slider"
data-hero-slider
data-hero-slider-options='{% block neno_hero_slider_json_config %}{{ heroSliderUserConfig|json_encode }}{% endblock %}'
>
{% block neno_hero_slider_inner %}
<noscript>
{% block neno_hero_slider_noscript_styles %}
<style>
.hero-slider {
overflow: auto !important;
}
.hero-slider,
.hero-slider-slide-container {
height: 60vh !important;
}
.hero-slider-image {
width: 100% !important;
height: auto !important;
}
.hero-slider {
position: relative !important;
}
.hero-slider-image {
position: static !important;
}
.hero-slider-scroll-overlay,
.hero-slider-navigation-btn,
.hero-slider-menu {
display: none;
}
</style>
{% endblock %}
</noscript>
<div class="hero-slider-slide-container">
{% apply spaceless %}
{% for slide in slides %}
{% block neno_hero_slider_slide %}
{% if slide.mediaLandscape %}
{% set alt_title_landscape = slide.translated.imageAltTitle ?: slide.mediaLandscape.alt %}
{% endif %}
{% if slide.mediaPortrait %}
{% set alt_title_portrait = slide.translated.imageAltTitle ?: slide.mediaLandscape.alt %}
{% endif %}
<div
class="hero-slider-slide{% if slide.cssClass %} {{ slide.cssClass|sw_sanitize }}{% endif %}"
data-animation-duration="{% block neno_hero_slider_image_anim_duration %}60{% endblock %}"
data-animation-preset-landscape="{{ slide.imageMovementPresetLandscape ?: 'NONE' }}"
data-animation-preset-portrait="{{ slide.imageMovementPresetPortrait ?: 'NONE' }}"
style="background-color: {{ slide.backgroundColor ?: 'transparent' }}"
>
{% block neno_hero_slider_slide_inner %}
{% block neno_hero_slider_slide_image %}
{% if slide.mediaLandscape or slide.mediaPortrait %}
<img
class="hero-slider-image"
alt="{{ slide.translated.imageAltTitle ?: (slide.mediaLandscape.alt ?: slide.mediaPortrait.alt) }}"
{% apply spaceless %}
{% if slide.mediaPortrait %}
{% block neno_hero_slider_slide_portrait_srcset %}
{% if slide.mediaPortrait.thumbnails|length > 0 %}
{% set thumbnails = slide.mediaPortrait.thumbnails|sort((a, b) => b.width <=> a.width) %}
{# generate srcset with all available thumbnails #}
{% set srcsetValue %}{% apply spaceless %}
{{ 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 %}
{% endapply %}{% endset %}
data-srcset-portrait="{{ srcsetValue }}"
{% endif %}
data-src-portrait="{{ slide.mediaPortrait|sw_encode_media_url }}"
{% endblock %}
{% endif %}
{% if slide.mediaLandscape %}
{% block neno_hero_slider_slide_landscape_srcset %}
{% if slide.mediaLandscape.thumbnails|length > 0 %}
{% set thumbnails = slide.mediaLandscape.thumbnails|sort((a, b) => b.width <=> a.width) %}
{# generate srcset with all available thumbnails #}
{% set srcsetValue %}{% apply spaceless %}
{{ 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 %}
{% endapply %}{% endset %}
data-srcset-landscape="{{ srcsetValue }}"
{% endif %}
data-src-landscape="{{ slide.mediaLandscape|sw_encode_media_url }}"
{% endblock %}
{% endif %}
{% endapply %}
sizes="100vw"
>
<noscript>
{% if slide.mediaLandscape %}
{% sw_thumbnails 'hero-slider-thumbnails-landscape' with {
media: slide.mediaLandscape,
attributes: {
alt: alt_title_landscape,
class: 'hero-slider-thumbnails hero-slider-thumbnails-landscape'
}
} %}
{% endif %}
{% if slide.mediaPortrait %}
{% sw_thumbnails 'hero-slider-thumbnails-portrait' with {
media: slide.mediaPortrait,
attributes: {
alt: alt_title_portrait,
class: 'hero-slider-thumbnails hero-slider-thumbnails-portrait'
}
} %}
{% endif %}
</noscript>
</img>
{% endif %}
{% endblock %}
{% block neno_hero_slider_slide_overlay %}
<div class="hero-slider-overlay" role="presentation"
style="background-color: {{ slide.overlayColor ?: (config.defaultOverlayColor ?: 'transparent') }}"></div>
{% endblock %}
{% block neno_hero_slider_slide_link %}
{% if slide.translated.slideLink %}
<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>
{% endif %}
{% endblock %}
{% block neno_hero_slider_slide_content %}
<div
class="hero-slider-content-container hs-vertical-align-{{ config.verticalTextBlockAlignment ?: 'center' }} hs-horizontal-align-{{ config.horizontalTextBlockAlignment ?: 'left' }}">
{% block neno_hero_slider_slide_content_inner %}
{% if slide.translated.textContentBeforeHeadline or slide.translated.headline or slide.translated.textContentAfterHeadline or slide.translated.buttonLink %}
<div
class="hero-slider-description hs-t-align-{{ config.defaultTextAlignment ?: 'left' }}"
style="background-color: {{ config.textBlockBackgroundColor ?: 'transparent' }}; color: {{ config.defaultTextBlockColor ?: 'white' }}">
{% block neno_hero_slider_slide_description_inner %}
{% block neno_hero_slider_slide_content_before %}
<div class="hero-slider-content-before">
{% block neno_hero_slider_slide_content_before_inner %}
{{ ((slide.translated.textContentBeforeHeadline|raw) ?: '')|sw_sanitize }}
{% endblock %}
</div>
{% endblock %}
{% set headline_tag_name = (loop.first ? (config.headlineTagNameFirstSlide ?: 'h2') : ((config.headlineTagNameFollowingSlides ?: 'h2'))) %}
{% block neno_hero_slider_slide_headline %}
{% if slide.translated.headlineNl2Br %}
{% set headline_content %}{{ ((slide.translated.headline|raw) ?: '')|nl2br|sw_sanitize }}{% endset %}
{% else %}
{% set headline_content %}{{ ((slide.translated.headline|raw) ?: '')|sw_sanitize }}{% endset %}
{% endif %}
{% set headline_html %}<{{ headline_tag_name }} class="hero-slider-headline">{{ headline_content }}{{ '</'|raw }}{{ headline_tag_name }}>{% endset %}
{{ headline_html }}
{% endblock %}
{% block neno_hero_slider_slide_content_after %}
<div class="hero-slider-content-after">
{% block neno_hero_slider_slide_content_after_inner %}
{{ ((slide.translated.textContentAfterHeadline|raw) ?: '')|sw_sanitize }}
{% endblock %}
</div>
{% endblock %}
{% block neno_hero_slider_slide_cta_container %}
<div
class="hero-slider-cta-container hs-t-align-{{ config.ctaButtonAlignment ?: 'left' }}">
{% block neno_hero_slider_slide_cta_container_inner %}
{% if slide.translated.buttonLink %}
<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 %}>
{{ slide.translated.buttonLinkText }}
</a>
{% endif %}
{% endblock %}
</div>
{% endblock %}
{% endblock %}
</div>
{% endif %}
{% endblock %}
</div>
{% endblock %}
{% endblock %}
</div>
{% endblock %}
{% endfor %}
{% endapply %}
</div>
{% if config.showNavigationControls and not controlsDisabled %}
<button
type="button"
class="hero-slider-btn hero-slider-navigation-btn hero-slider-navigation-btn-left"
aria-controls="hero-slider"
aria-label="{{ 'neno-hero-slider.controls.prevTitle' | trans }}"
title="{{ 'neno-hero-slider.controls.prevTitle' | trans }}"
>
{% block neno_hero_slider_prev_icon %}
{% if customLeftArrowGraphic %}
<span
class="icon hs-custom-icon"
style="background-image: url('{{ customLeftArrowGraphic.url }}');"
role="presentation"
></span>
{% else %}
{% sw_icon 'arrow-head-left' %}
{% endif %}
{% endblock %}
</button>
<button
type="button"
class="hero-slider-btn hero-slider-navigation-btn hero-slider-navigation-btn-right"
aria-controls="hero-slider"
aria-label="{{ 'neno-hero-slider.controls.nextTitle' | trans }}"
title="{{ 'neno-hero-slider.controls.nextTitle' | trans }}"
>
{% block neno_hero_slider_next_icon %}
{% if customRightArrowGraphic %}
<span
class="icon hs-custom-icon"
style="background-image: url('{{ customRightArrowGraphic.url }}');"
role="presentation"
></span>
{% else %}
{% sw_icon 'arrow-head-right' %}
{% endif %}
{% endblock %}
</button>
{% endif %}
{% if config.showJumpNavigation and not controlsDisabled %}
<div class="hero-slider-menu hs-{{ config.bulletDirection ?: 'vertical' }}" role="menu">
{% for slide in slides %}
<button type="button" class="hero-slider-btn hero-slider-menu-item"
role="menuitemradio"></button>
{% endfor %}
</div>
{% endif %}
{% if config.showScrollIndicator %}
<div
class="hero-slider-scroll-overlay hs-horizontal-align-{{ config.scrollIndicatorAlignment ?: 'center' }}"
role="presentation">
<button type="button" title="{{ 'neno-hero-slider.scrollDown'|trans }}"
class="hero-slider-btn hero-slider-scroll-icon hs-interactive">
{% if customScrollIndicatorGraphic %}
<span
class="icon hs-custom-icon"
style="background-image: url('{{ customScrollIndicatorGraphic.url }}');"
role="presentation"
></span>
{% else %}
{% sw_icon 'arrow-head-down' %}
{% endif %}
</button>
</div>
{% endif %}
{% endblock %}
</div>
{% block neno_hero_slider_user_style %}
<style>
.hero-slider .hero-slider-navigation-btn {
{% if config.navigationControlBackgroundColor %} background-color: {{ config.navigationControlBackgroundColor }};
{% endif %}{% if config.navigationControlIconColor %} color: {{ config.navigationControlIconColor }};
{% endif %}
}
.hero-slider .hero-slider-scroll-icon {
{% if config.navigationControlBackgroundColor %} background-color: {{ config.scrollIndicatorBackgroundColor }};
{% endif %}{% if config.navigationControlIconColor %} color: {{ config.scrollIndicatorIconColor }};
{% endif %}
}
.hero-slider .hero-slider-menu-item {
{% if config.jumpNavigationItemBackgroundColor %} background-color: {{ config.jumpNavigationItemBackgroundColor }};
{% endif %}{% if config.jumpNavigationItemBorderColor %} border-color: {{ config.jumpNavigationItemBorderColor }};
{% endif %}
}
.hero-slider .hero-slider-menu-item:after,
.hero-slider .hero-slider-menu-item::after {
{% if config.jumpNavigationItemFillColor %} background-color: {{ config.jumpNavigationItemFillColor }};
{% endif %}
}
.hero-slider .btn.hero-slider-cta-btn {
{% if config.ctaButtonType is same as('primary') %}{% if config.ctaButtonBackgroundColor %} background-color: {{ config.ctaButtonBackgroundColor }};
{% endif %}{% if config.ctaButtonBackgroundColor %} border-color: {{ config.ctaButtonBackgroundColor }};
{% endif %}{% if config.ctaButtonBackgroundColor %} color: {{ config.ctaButtonTextColor }};
{% endif %}{% else %}{% if config.ctaButtonBackgroundColor %} border-color: {{ config.ctaButtonBackgroundColor }};
{% endif %}{% if config.ctaButtonBackgroundColor %} color: {{ config.ctaButtonBackgroundColor }};
{% endif %}{% endif %} font-family: {{ config.buttonFontFamily ? ('"' ~ config.buttonFontFamily ~ '"')|raw|sw_sanitize : 'inherit' }};
font-size: {{ config.buttonFontSize ? (config.buttonFontSize ~ 'rem') : '.875rem' }};
margin-bottom: {{ config.belowButtonGap ? (config.belowButtonGap ~ 'em') : '0' }};
}
.hero-slider .btn.hero-slider-cta-btn:hover {
{% if config.ctaButtonType is same as('primary') %}{% if config.ctaButtonBackgroundColor %} background-color: {{ config.ctaButtonHoverBackgroundColor ?: config.ctaButtonBackgroundColor }};
{% endif %}{% if config.ctaButtonBackgroundColor %} border-color: {{ config.ctaButtonBackgroundColor }};
{% endif %}{% if config.ctaButtonTextColor %} color: {{ config.ctaButtonTextColor }};
{% endif %}{% else %}{% if config.ctaButtonBackgroundColor %} border-color: {{ config.ctaButtonBackgroundColor }};
{% endif %}{% if config.ctaButtonBackgroundColor %} background-color: {{ config.ctaButtonBackgroundColor }};
{% endif %}{% if config.ctaButtonBackgroundColor %} color: {{ config.ctaButtonTextColor }};
{% endif %}{% endif %}
}
.hero-slider .hero-slider-headline {
color: {{ config.headlineColor ?: (config.defaultTextBlockColor ?: 'inherit') }};
font-family: {{ config.headlineFontFamily ? ('"' ~ config.headlineFontFamily ~ '"')|raw|sw_sanitize : 'inherit' }};
font-weight: {{ config.headlineFontWeight ?: 'bold' }};
font-size: {{ config.headlineFontSizeXs ? (config.headlineFontSizeXs ~ 'rem') : 'initial' }};
line-height: {{ config.headlineLineHeight ?: 'inherit' }};
margin-bottom: {{ config.afterHeadlineGap ? (config.afterHeadlineGap ~ 'em') : '0' }};
}
.hero-slider .hero-slider-content-before {
font-family: {{ config.textAboveHeadlineFontFamily ? ('"' ~ config.textAboveHeadlineFontFamily ~ '"')|raw|sw_sanitize : 'inherit' }};
font-size: {{ config.fontSizeAboveHeadlineXs ? (config.fontSizeAboveHeadlineXs ~ 'rem') : 'initial' }};
line-height: {{ config.textAboveHeadlineLineHeight ?: 'inherit' }};
margin-bottom: {{ config.beforeHeadlineGap ? (config.beforeHeadlineGap ~ 'em') : '0' }};
}
.hero-slider .hero-slider-content-after {
font-family: {{ config.textBelowHeadlineFontFamily ? ('"' ~ config.textBelowHeadlineFontFamily ~ '"')|raw|sw_sanitize : 'inherit' }};
font-size: {{ config.fontSizeBelowHeadlineXs ? (config.fontSizeBelowHeadlineXs ~ 'rem') : 'initial' }};
line-height: {{ config.textBelowHeadlineLineHeight ?: 'inherit' }};
margin-bottom: {{ config.afterTextBelowHeadlineGap ? (config.afterTextBelowHeadlineGap ~ 'em') : '0' }};
}
{% if config.textTransitionMode is same as('fadein') %}
.hero-slider .hero-slider-slide .hero-slider-description {
opacity: 0;
transition: opacity .7s ease, transform .5s ease;
transition-delay: {{ config.transitionDuration ?: 0 }}s;
transform: translateY(10%);
}
.hero-slider .hero-slider-slide.active .hero-slider-description {
opacity: 1;
transform: translateY(0);
}
{% endif %}
@media all and (min-width: {{ (theme_config('breakpoint.md') - 1) ~ 'px' }}) {
.hero-slider .hero-slider-headline {
font-size: {{ config.headlineFontSizeMd ? (config.headlineFontSizeMd ~ 'rem') : 'initial' }};
}
.hero-slider .hero-slider-content-before {
font-size: {{ config.fontSizeAboveHeadlineMd ? (config.fontSizeAboveHeadlineMd ~ 'rem') : 'initial' }};
}
.hero-slider .hero-slider-content-after {
font-size: {{ config.fontSizeBelowHeadlineMd ? (config.fontSizeBelowHeadlineMd ~ 'rem') : 'initial' }};
}
}
@media all and (min-width: {{ (theme_config('breakpoint.lg') - 1) ~ 'px' }}) {
.hero-slider .hero-slider-headline {
font-size: {{ config.headlineFontSizeLg ? (config.headlineFontSizeLg ~ 'rem') : 'initial' }};
}
.hero-slider .hero-slider-content-before {
font-size: {{ config.fontSizeAboveHeadlineLg ? (config.fontSizeAboveHeadlineLg ~ 'rem') : 'initial' }};
}
.hero-slider .hero-slider-content-after {
font-size: {{ config.fontSizeBelowHeadlineLg ? (config.fontSizeBelowHeadlineLg ~ 'rem') : 'initial' }};
}
}
{{ config.userInjectedCSS ? (config.userInjectedCSS|raw|sw_sanitize) : '' }}
</style>
{% endblock %}
{% block neno_hero_slider_init_script %}
<script type="text/javascript">
(function () {
var forcePOnP = '{{ config.forceLoadPortraitImagesOnPortraitDevices }}' === '1';
var forceLOnL = '{{ config.forceLoadPortraitImagesOnPortraitDevices }}' === '1';
/* load first image without waiting for main script execution */
var firstSlideImage = document.querySelector('img.hero-slider-image');
function loadLandscapeImage() {
var lsSrcSet = firstSlideImage.getAttribute('data-srcset-landscape');
var lsSrc = firstSlideImage.getAttribute('data-src-landscape');
if (lsSrcSet) {
firstSlideImage.srcSet = lsSrcSet;
} else if (lsSrc) {
firstSlideImage.src = lsSrc;
}
}
function loadPortraitImage() {
var poSrcSet = firstSlideImage.getAttribute('data-srcset-portrait');
var poSrc = firstSlideImage.getAttribute('data-src-portrait');
if (poSrcSet) {
firstSlideImage.srcSet = poSrcSet;
} else if (poSrc) {
firstSlideImage.src = poSrc;
}
}
function fillHeight(el) {
var vRect = el.getBoundingClientRect();
el.style.height = (window.innerHeight - vRect.top) + 'px';
}
var el = document.querySelector('.hero-slider');
var hsmLandscape = '{{ config.heightScaleMode }}';
var hsmPortrait = '{{ config.heightScaleModePortrait }}';
var hasFixedAspectL = hsmLandscape === 'fixed_aspect';
var hasFixedAspectP = hsmPortrait === 'inherit' ? hasFixedAspectL : (hsmPortrait === 'fixed_aspect');
var windowAspect = window.innerWidth / window.innerHeight;
var isViewportP = (windowAspect < 1);
var initWidth = el.getBoundingClientRect().width;
/* prime slider height */
if (isViewportP) {
if (hasFixedAspectP) {
el.style.height = (1 / {{ aspectRatioPortrait }} * (initWidth || window.innerWidth)) + 'px';
} else {
fillHeight(el);
}
} else {
if (hasFixedAspectL) {
el.style.height = (1 / {{ aspectRatioLandscape }} * (initWidth || window.innerWidth)) + 'px';
} else {
fillHeight(el);
}
}
if (firstSlideImage) {
if ('objectFit' in firstSlideImage.style) {
firstSlideImage.style.objectFit = 'cover';
firstSlideImage.style.objectPosition = 'center center';
}
if (isViewportP && forcePOnP) {
loadPortraitImage();
} else if (!isViewportP && forceLOnL) {
loadLandscapeImage();
} else {
var bRect = el.getBoundingClientRect();
var boxAspectRatio = (bRect.width / bRect.height);
if (boxAspectRatio < 1) {
loadPortraitImage();
} else {
loadLandscapeImage();
}
}
firstSlideImage.classList.add('hs-image-loaded');
}
})();
</script>
{% endblock %}
{% endif %}
{% endif %}
{% endif %}
{% endblock %}

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