{% 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 %}
{% set productLink = pimcore_href("selectProduct").getElement() %}
{% set UID = uniqid() %}
{% 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-2">
<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-4 l-3">
<span class="hint">{{ 'Verlinkung zu bestehendem Produkt?'|trans }}</span>
{{ pimcore_href("selectProduct", {
"types": ["object"],
"subtypes": {
"types": ["object"],
},
"width": 300,
"classes": ["ProductFood", "ProductClothing", "Product"],
"reload": true
}) }}
</div>
<div class="col xs-12 m-4 l-3">
{% if pimcore_select("headlineType").isEmpty() %}
{% do pimcore_select("headlineType").setDataFromResource("h2") %}
{% endif %}
<span class="hint">{{ 'Headline Typ wählen' |trans }}</span>
{{ pimcore_select("headlineType", {
"store": [
["h2", "Überschrift h2"],
["h3", "Überschrift h3"],
["h4", "Überschrift h4"]
],
"width": 300,
"reload": true
}) }}
</div>
<div class="col xs-12 m-4 l-3">
<span class="hint">{{ 'Hintergrundbild festlegen' |trans }}</span>
{{ pimcore_image("teaserTextBackground", {
"title": "Drag your image here",
"width": 300,
"height": 150,
"thumbnail": "textBackgroundImage" ~ bundleName,
"reload": true
}) }}
</div>
</div>
{% endif %}
{% set imageAttributes = {
"attributes" : {
"data-speed": "-1"
}
} %}
{% if productLink == true %}
{% set detailViewUri = pimcore_url(
{
"name": productLink.getName()|sanitized_url,
"articlenumber": productLink.getArticleNumber()
},
"shopHandlerProductDetail"
) %}
{% endif %}
{% if pimcore_image("teaserTextBackground") is not empty %}
<div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
<div id="{{ 'uid' ~ UID |raw }}" class="text-background has-background-image js">
<div class="background-image">
<div class="image">
{% if pimcore_image("teaserTextBackground").getThumbnail("textBackgroundImage" ~ bundleName) is not empty %}
{{ pimcore_image("teaserTextBackground").getThumbnail("textBackgroundImage" ~ bundleName).getHTML(imageAttributes) |raw }}
{#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) ){
$(".text-background.has-background-image").css({
position: "absolute",
width: "100%",
height: "100%",
background: "url( {{ pimcore_image("teaserTextBackground").getSrc() }} ) center right 100%/cover no-repeat"
});
$(".text-background.has-background-image img").hide();
}
});
clearInterval(waitForJQuery);
}
}, 50);
</script>
{#IE Fix for thumbnails rendering end#}
{% endif %}
</div>
</div>
<div class="content-container">
<div class="main-content flex-col">
<div class="col xs-12">
<div class="text-only">
<div class="headline">
<{{ pimcore_select("headlineType").getData() }}
>{{ pimcore_input("teaserTextBackgroundHeadline", {
"placeholder": 'Headline'
}) }}</{{ pimcore_select("headlineType").getData() }}>
<div class="text">
{{ pimcore_wysiwyg("TeaserImageWYSIWYG", {
"placeholder": 'Text',
"customConfig": 'bundles/core/js/ckeditor_config.js'
}) }}
{% if pimcore_href("selectProduct").isEmpty() != true %}
<a class="button btn-default" href="{{ detailViewUri }}">{{ 'Zum Produkt' |trans }}</a>
{% else %}
{{ pimcore_link('productLink', {'class': "button btn-default"}) }}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{% else %}
<div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
<div class="text-background has-background">
<div class="main-content flex-col">
<div class="col xs-12">
<div class="text-only">
<div class="headline">
<{{ pimcore_select("headlineType") }}
>{{ pimcore_input("teaserTextBackgroundHeadline")|trademark }}</{{ pimcore_select("headlineType") }}>
</div>
<div class="text">
{{ pimcore_wysiwyg("TeaserImageWYSIWYG", {
"customConfig": '/bundles/core/js/ckeditor_config.js'
})|trademark }}
{% if pimcore_href("selectProduct").isEmpty() != true %}
<a class="button btn-default" href="{{ detailViewUri }}">{{ 'Zum Produkt' |trans }}</a>
{% else %}
{{ pimcore_link('productLink', {'class': "button btn-default"}) }}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if pimcore_image("teaserTextBackground") is not empty %}
</div>
</div>
{% endif %}