bootstrap_package/Resources/Private/Partials/ContentElements/Carousel/General/BackgroundImage.html at 49a89f7f1e43c00142436570ab532efe2dafec87 · Jaykju/bootstrap_package · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{item.backgroundImage.0}">
    <f:variable name="backgroundImageObject" value="{item.backgroundImage.0}"/>
    <f:variable name="backgroundImageIdentifier" value="carousel-backgroundimage-{data.uid}-{item.data.uid}"/>
    <f:variable name="backgroundImageClasses">carousel-backgroundimage</f:variable>
    <f:if condition="{item.data.background_image_options.parallax}"><f:variable name="backgroundImageClasses">{backgroundImageClasses} carousel-backgroundimage-parallax</f:variable></f:if>
    <f:if condition="{item.data.background_image_options.fade}"><f:variable name="backgroundImageClasses">{backgroundImageClasses} carousel-backgroundimage-fade</f:variable></f:if>
    <f:if condition="{item.data.background_image_options.filter}"><f:variable name="backgroundImageClasses">{backgroundImageClasses} carousel-backgroundimage-{item.data.background_image_options.filter}</f:variable></f:if>
    <div class="carousel-backgroundimage-container">
        <div id="{backgroundImageIdentifier}" class="{backgroundImageClasses}">
            <f:variable name="styles" value=""/>
            <f:variable name="imageConfig">{settings.responsiveimages.contentelements.{data.CType}.background_image}</f:variable>
            <bk2k:data.imageVariants as="variants" variants="{variants}" multiplier="{imageConfig.multiplier}" gutters="{imageConfig.gutters}" corrections="{imageConfig.corrections}" />
            <f:for each="{variants}" key="name" as="variant">
                <f:variable name="breakpoint">{variant.breakpoint as integer}</f:variable>
                <f:variable name="width">{variant.width as integer}</f:variable>
                <f:if condition="{width} && {variant.sizes}">
                    <f:variable name="variantStyle" value=""/>
                    <f:for each="{variant.sizes}" key="sizeKey" as="sizeConfig" iteration="iteration">
                        <f:variable name="sizeWidth">{sizeConfig.multiplier as float}</f:variable>
                        <f:variable name="sizeWidth">{sizeWidth * width}</f:variable>
                        <f:variable name="sizeDppx">{sizeKey as float}</f:variable>
                        <f:variable name="mediaBreakpoint"><f:if condition="{breakpoint}">(min-width: {breakpoint}px)</f:if></f:variable>
                        <f:variable name="mediaQuery" value=""/>
                        <f:if condition="{mediaBreakpoint}">
                            <f:variable name="mediaQuery">{mediaBreakpoint}</f:variable>
                        </f:if>
                        <f:if condition="{sizeDppx} > 1">
                            <f:variable name="mediaQuery">(-webkit-min-device-pixel-ratio: {sizeDppx})<f:if condition="{mediaBreakpoint}"> and {mediaBreakpoint}</f:if></f:variable>
                            <f:variable name="mediaQuery">{mediaQuery}, (min-resolution: {sizeDppx}dppx)<f:if condition="{mediaBreakpoint}"> and {mediaBreakpoint}</f:if></f:variable>
                        </f:if>
                        <f:variable name="variantStyle">{variantStyle} <f:if condition="{mediaQuery}">@media {mediaQuery} { </f:if>#{backgroundImageIdentifier} { background-image: url('{f:uri.image(image: backgroundImageObject, cropVariant: name, maxWidth: sizeWidth)}'); }<f:if condition="{mediaQuery}"> }</f:if></f:variable>
                    </f:for>
                    <f:variable name="styles" value="{variantStyle -> f:format.trim()} {styles}"/>
                </f:if>
            </f:for>
            <bk2k:condition.classExists class="TYPO3\CMS\Fluid\ViewHelpers\Security\NonceViewHelper">
                <f:then>
                    <f:render partial="Carousel/General/BackgroundImageStyleNonce" arguments="{_all}" />
                </f:then>
                <f:else>
                    <f:render partial="Carousel/General/BackgroundImageStyle" arguments="{_all}" />
                </f:else>
            </bk2k:condition.classExists>
        </div>
    </div>
</f:if>
</html>