{% set spacingSelect %} {{ pimcore_checkbox("checkSpacing", { "reload": true }) }}{% endset %}{% set noSpacingTop = '' %}{% set brickAnchorId = '' %}{% if pimcore_checkbox('checkSpacing').isChecked() %} {% set noSpacingTop = 'no-offset-top' %}{% endif %}{% set UID = uniqid() %}{% if pimcore_input("brickAnchorIdInput") is not empty %} {% set brickAnchorId = pimcore_input("brickAnchorIdInput")|lowercase %}{% endif %}{% if editmode %} <div class="flex-col offset-bottom-single"> <div class="col xs-12 m-6 l-3"> <span class="hint">{{ 'ID für Anchorlinks vergeben' |trans }}</span> {{ pimcore_input("brickAnchorIdInput") }} </div> <div class="col xs-12 m-6 l-3"> <div class="select-items"> <div class="hint"> {{ 'Kein Abstand nach oben?' |trans }} </div> {{ spacingSelect }} </div> </div> </div> <div class="flex-col offset-bottom-single"> <div class="col xs-12 m-6 l-3"> <span class="hint">{{ 'Hintergrundbild' }}</span> {{ pimcore_image("teaserSpecificBackground", { "title": "Drag your image here", "width": 300, "height": 150, "thumbnail": "teaserSpecificBackground" ~ bundleName, "reload": true }) }} </div> </div><div class="admin teaser teaser-specific"> {% endif %} <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}"> <div id="{{ 'uid' ~ UID |raw }}" class="teaser teaser-specific"> <div class="teaser-specific-container offset main-content"> <div class="text-center content-container teaser-specific-container-inner"> <div class="headline-container"> <div class="teaser-image-front-wrapper"> <div class="teaser-image-front"> {{ pimcore_image("teaserSpecificBottle", { "title": "Drag your image here", "thumbnail": "teaserSpecificBottle" ~ bundleName, }) }} </div> </div> <div class="teaser-content-right-inner"> <div class="teaser-headline text-only"> <div class="special-headline"> <h1> {% if not editmode and pimcore_input("mainStageHeadlineOne") is not empty %} <div class="special-headline-first"> <div class="highlight-background"> <span> {% endif %} {{ pimcore_input("mainStageHeadlineOne", { "placeholder": 'Headline Part 1' })|trademark }} {% if not editmode and pimcore_input("mainStageHeadlineOne") is not empty %} </span> </div> </div> {% endif %} {% if not editmode and pimcore_input("mainStageHeadlineTwo") is not empty %} <div class="special-headline-second"> <div class="highlight-background"> <span> {% endif %} {{ pimcore_input("mainStageHeadlineTwo", { "placeholder": 'Headline Part 2' })|trademark }} {% if not editmode and pimcore_input("mainStageHeadlineTwo") is not empty %} </span> </div> </div> {% endif %} {% if not editmode and pimcore_input("mainStageHeadlineThree") is not empty %} <div class="special-headline-third"> <div class="highlight-background"> <span class="highlight-text"> {% endif %} {{ pimcore_input("mainStageHeadlineThree", { "placeholder": 'Headline Part 3' })|trademark }} {% if not editmode and pimcore_input("mainStageHeadlineThree") is not empty %} </span> </div> </div> {% endif %} </h1> </div> <div class="teaser-cta"> {{ pimcore_link('teaserSpecificLink2', {'class': "button btn-default"}) }} </div> </div> </div> </div> <div class="image-content"> <div class="teaser-content-right"> <div class="teaser-content-right-inner"> <div class="image"> {{ pimcore_image("teaserSpecificIcon1", { "title": "Drag your image here", "thumbnail": "teaserSpecificIcon1" ~ bundleName, "reload": true }) }} </div> <div class="xs-8 m-6 text-only"> <h4>{{ pimcore_input("teaserSpecificHeadlinePart1", { "placeholder": 'Headline for first Icon' }) }}</h4> <p>{{ pimcore_input("teaserSpecificContentPart1", { "placeholder": 'Content for first Icon' }) }}</p> </div> </div> </div> <div class="teaser-content-right"> <div class="teaser-content-right-inner"> <div class="image"> {{ pimcore_image("teaserSpecificIcon2", { "title": "Drag your image here", "thumbnail": "teaserSpecificIcon2" ~ bundleName, "reload": true }) }} </div> <div class="xs-8 m-6 text-only"> <h4>{{ pimcore_input("teaserSpecificHeadlinePart2", { "placeholder": 'Headline for second Icon' }) }}</h4> <p>{{ pimcore_input("teaserSpecificContentPart2",{ "placeholder": 'Content for second Icon' }) }}</p> </div> </div> </div> <div class="teaser-content-right"> <div class="teaser-content-right-inner"> <div class="image"> {{ pimcore_image("teaserSpecificIcon3", { "title": "Drag your image here", "thumbnail": "teaserSpecificIcon3" ~ bundleName, "reload": true }) }} </div> <div class="xs-8 m-6 text-only"> <h4>{{ pimcore_input("teaserSpecificHeadlinePart3", { "placeholder": 'Headline for third Icon' }) }}</h4> <p>{{ pimcore_input("teaserSpecificContentPart3",{ "placeholder": 'Content for third Icon' }) }}</p> </div> </div> </div> <div class="teaser-content-right"> <div class="teaser-content-right-inner"> <div class="image"> {{ pimcore_image("teaserSpecificIcon4", { "title": "Drag your image here", "thumbnail": "teaserSpecificIcon4" ~ bundleName, "reload": true }) }} </div> <div class="xs-8 m-6 text-only"> <h4>{{ pimcore_input("teaserSpecificHeadlinePart4", { "placeholder": 'Headline for fourth Icon' }) }}</h4> <p>{{ pimcore_input("teaserSpecificContentPart4", { "placeholder": 'Content for fourth Icon' }) }}</p> </div> </div> </div> </div> </div> </div> <div class="background-image"> {% if pimcore_image("teaserSpecificBackground").getThumbnail("teaserSpecificBackground" ~ bundleName) is not empty %} {{ pimcore_image("teaserSpecificBackground").getThumbnail("teaserSpecificBackground" ~ bundleName).getHTML() |raw }} {% endif %} {#IE Fix for thumbnails rendering start#} <script type='text/javascript'> var waitForJQuery = setInterval(function () { if (typeof $ != 'undefined') { $(function() { if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){ $(".teaser.teaser-specific .background-image").css({ position: "absolute", width: "100%", height: "100%", background: "url( {{ pimcore_image("teaserSpecificBackground").getSrc() }} ) center right 100%/cover no-repeat" }); $(".teaser.teaser-specific .background-image img").hide(); } }); clearInterval(waitForJQuery); } }, 50); </script> {#IE Fix for thumbnails rendering end#} </div> </div> </div> {% if editmode %}</div>{% endif %}