Symfony Profiler

{% sw_extends '@Storefront/storefront/base.html.twig' %}
{#{% block base_main %}#}
{% block base_main_inner %}
{# Copied template from hero banner slider plugin #}
{% block neno_hero_slider %}
{% if page.extensions.hero_slider_slides %}
{% set slides = page.extensions.hero_slider_slides.elements %}
{% if slides|length > 0 %}
{% set config = config('NenoHeroSlider.config') %}
{% 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 %}"
id="hero-slider"
data-hero-slider
data-hero-slider-options='{{ heroSliderUserConfig|json_encode }}'>
<noscript>
<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>
</noscript>
<div class="hero-slider-slide-container">
{% apply spaceless %}
{% for slide in slides %}
{% if slide.mediaLandscape %}
{% set alt_title_landscape = slide.translated.imageAltTitle ?: slide.mediaLandscape.alt %}
{% set landscape_thumbnails = slide.mediaLandscape.thumbnails|sort|reverse|json_encode %}
{% endif %}
{% if slide.mediaPortrait %}
{% set alt_title_portrait = slide.translated.imageAltTitle ?: slide.mediaLandscape.alt %}
{% set portrait_thumbnails = slide.mediaPortrait.thumbnails|sort|reverse|json_encode %}
{% endif %}
<div class="hero-slider-slide{% if slide.cssClass %} {{ slide.cssClass|sw_sanitize }}{% endif %}"
data-animation-duration="60"
data-animation-preset-landscape="{{ slide.imageMovementPresetLandscape ?: 'NONE' }}"
data-animation-preset-portrait="{{ slide.imageMovementPresetPortrait ?: 'NONE' }}"
style="background-color: {{ slide.backgroundColor ?: 'transparent' }}">
{# Changed slide structure and layout, added block 'cms_block_hero_banner' #}
{% block cms_block_hero_banner %}
<div class="cms-block pos-0 cms-block-hero-banner">
<div class="cms-block-container">
<div class="cms-block-container-row row cms-row ">
<div class="col-12">
<div class="cms-block bg-image hero-banner-large pos-0 cms-block-text-on-image">
{% block cms_block_hero_banner_image %}
{% if slide.mediaLandscape or slide.mediaPortrait %}
<img class="hero-slider-image cms-block-background media-mode--cover"
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|reverse %}
{# 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|reverse %}
{# 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 cms_element_hero_banner %}
<div class="cms-element-hero-banner">
{% if slide.translated.textContentBeforeHeadline
or slide.translated.headline
or slide.translated.textContentAfterHeadline
or slide.translated.buttonLink %}
{% block cms_element_hero_banner_1 %}
<div class="cms-block-container-row row cms-row hero-banner-info-1">
<div class="col-12">
{% block cms_element_hero_banner_1_text %}
<div class="cms-element-text">
{% set headline_tag_name = (loop.first ? (config.headlineTagNameFirstSlide ?: 'h2') : ((config.headlineTagNameFollowingSlides ?: 'h2'))) %}
<{{ headline_tag_name }}>{{ ((slide.translated.headline|raw) ?: '')|sw_sanitize }}</{{ headline_tag_name }}>
<p>{{ ((slide.translated.textContentAfterHeadline|raw) ?: '')|sw_sanitize }}</p>
{% if slide.translated.buttonLink %}
<a class="btn btn-{{ config.ctaButtonType ?: 'primary' }}"
title="{{ slide.translated.buttonLinkText }}"
tabindex="-1"
href="{{ slide.translated.buttonLink }}"{% if slide.translated.buttonLinkNewTab %} target="_blank" rel="noopener"{% endif %}>
{{ slide.translated.buttonLinkText }}
</a>
{% endif %}
</div>
{% endblock %}
</div>
</div>
{% endblock %}
{% block cms_element_hero_banner_2 %}
<div class="cms-block-container-row row cms-row hero-banner-info-2">
<div class="col-12">
{% block cms_element_hero_banner_2_text %}
{% if slide.translated.textContentBeforeHeadline is not empty %}
<div class="cms-element-text">
<div class="cms-element-text-inner">
{{ ((slide.translated.textContentBeforeHeadline|raw) ?: '')|sw_sanitize }}
<div class="container section-trustpilot" style="max-width: 300px; margin-left: 0!important; margin-right: 0!important; margin-top: 20px"> <div class="trustpilot-widget" data-locale="en-GB" data-template-id="5419b6a8b0d04a076446a9ad" data-businessunit-id="5dd3965425e0ee000163c333" data-style-height="24px" data-style-width="100%" data-theme="dark"> <a href="https://uk.trustpilot.com/review/chespackhygiene.com" rel="noopener">Trustpilot</a> </div> </div>
</div>
</div>
{% endif %}
{% endblock %}
</div>
</div>
{% endblock %}
{% endif %}
</div>
{% endblock %}
{% block cms_element_hero_banner_link %}
{% if slide.translated.slideLink is not empty %}
<a href="{{ slide.translated.slideLink }}" class="cms-image-link-overlay"></a>
{% endif %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
</div>
{% 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 %}
</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 %}
{% endblock %}
{{ parent() }}
{% endblock %}
{% block base_header %}
<header id="myHeader" class="header-main header-defualt" data-flyout-menu="true">
{% block base_header_inner %}
<div class="container">
{% sw_include '@Storefront/storefront/layout/header/header.html.twig' %}
</div>
{% endblock %}
{% sw_include '@Storefront/storefront/layout/navigation/navigation-flyout.html.twig' %}
</header>
<div style="display:flex; align-items:center; color:white; justify-content:center;height:60px; background-color:#396db4;"><strong>Customer Notice:</strong>On Tuesday 14th the website will be undergoing improvements and be unavailable for up to 24 hours</div>
{% endblock %}
{# Removed main navigation #}
{% block base_navigation %}{% endblock %}

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