{% set spacingSelect %}
{{ pimcore_checkbox("checkSpacing", {
"reload": true
}) }}
{% endset %}
{% 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 hasSliderSelect %}
{{ pimcore_select("hasSlider", {
"store": [
["has-slider", "Slider"],
["no-slider", "Listenansicht"]
], reload: true
}) }}
{% endset %}
{% set colSelect %}
{{ pimcore_select("cols", {
"store": [
["xs-12 full", "1"],
["xs-12 m-6 half", "2"],
["xs-12 m-6 l-4 one-third", "3"]
], reload: true
}) }}
{% endset %}
{% set colsSelectResult = pimcore_select("cols").getData() %}
{% 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">{{ 'Teaser Content Breite:' |trans }}</span>
{{ colSelect }}
</div>
<div class="col xs-12 m-6 l-3">
<span class="hint">{{ ' Darstellungsart:' |trans }}</span>
{{ hasSliderSelect }}
</div>
</div>
{% endif %}
{% if editmode %}
<div class="admin teaser-panel-row">
{% endif %}
<div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
<div class=" panel {% if editmode %} {% else %}{{ pimcore_select("hasSlider").getData() }} {% endif %}{% if colsSelectResult == 'xs-12 m-6 half' %}half{% elseif colsSelectResult == 'xs-12 full' %}full{% else %}one-third{% endif %} magazine">
<div class="main-content">
<div class="panel-container">
<div class="panel-content">
<div class="flex-col panel-slider panel-slider_slider-content">
{% for i in pimcore_iterate_block(pimcore_block('contentblock')) %}
<div class="col {{ colsSelectResult }}">
{% if editmode %}
<span class="hint">
{{ 'Bitte wählen Sie ein Magazin oder Rezept'|trans }}</span>
{{ pimcore_href("selectDoc", {
"types": ["object"],
"reload": true
}) }}
{% endif %}
{% set articleObject = null %}
{% if pimcore_href("selectDoc").isEmpty() != true %}
{% set articleObject = pimcore_href("selectDoc").getElement() %}
{% set articleImage = articleObject.headerImage() %}
{% set articleCategory = articleObject.classname %}
{% endif %}
{% if articleObject is defined and articleObject is not null %}
{% if articleObject.classname == "Recipe" %}
{% set detailViewUri = pimcore_url(
{
"name": articleObject.getUrlTitle()|sanitized_url,
"rezeptid": articleObject.getId()
},
"recipeDetail"
) %}
{% else %}
{% set detailViewUri = pimcore_url(
{
"language": document.getProperty("language"),
"name": articleObject.key|sanitized_url,
"magazineid": articleObject.getId()
},
"magazineDetailMautner"
) %}
{% endif %}
<div class="teaser magazine">
<div class="teaser-content-container">
<div class="teaser-image-box">
<a href="{{ detailViewUri }}">
<div class="teaser-image">
{% if colsSelectResult == 'xs-12 full' %}
<div data-image='{{ articleImage.getThumbnail("teaserMagazineImageFull" ~ bundleName).getPath() }}' class="one">
{{ articleImage.getThumbnail("teaserMagazineImageFull" ~ bundleName).getHtml() |raw }}
</div>
{% elseif colsSelectResult == 'xs-12 m-6 half' %}
<div data-image='{{ articleImage.getThumbnail("teaserMagazineImageHalf" ~ bundleName).getPath() }}' class="two">
{{ articleImage.getThumbnail("teaserMagazineImageHalf" ~ bundleName).getHtml() |raw }}
</div>
{% elseif colsSelectResult == 'xs-12 m-6 l-4 one-third' %}
<div data-image='{{ articleImage.getThumbnail("teaserMagazineImage" ~ bundleName).getPath() }}' class="three">
{{ articleImage.getThumbnail("teaserMagazineImage" ~ bundleName).getHtml() |raw }}
</div>
{% endif %}
{% if articleObject.className == "Magazine" %}
<div class="teaser-date">
<span> {{ articleObject.getDate().format('d.m.Y') }}</span>
</div>
{% endif %}
</div>
</a>
</div>
<div class="teaser-content-box">
<a href="{{ detailViewUri }}">
<div class="teaser-content">
<div class="teaser-title">
<span class="teaser-subline">{{ articleCategory |trans }}</span>
<h4>
{{ articleObject.getTitle()|trademark }}
</h4>
</div>
<div class="teaser-text">
<p>
{{ articleObject.getTeaserText()|trademark }}
</p>
</div>
<div class="teaser-link">
<span class="link">{{ 'Mehr lesen' |trans }}</span>
</div>
{% if articleObject.className == 'Recipe' %}
<div class="teaser-icons">
<div class="items">
<span class="icon time"></span>
<span class="uppercase">{{ articleObject.getDuration() |trans }}</span>
</div>
<div class="items">
<span class="icon toque"></span>
<span class="uppercase">{{ articleObject.getLevel() |trans }}</span>
</div>
<div class="items">
<span class="icon cutlery"></span>
<span class="uppercase">{{ 'Serves' |trans }} {{ articleObject.getServes() |trans }}</span>
</div>
</div>
{% endif %}
</div>
</a>
</div>
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
{#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) ) {
$(".magazine .teaser-image-box .teaser-image .one").each(function(){
var image1 = $(this).attr('data-image');
$(this).parent().css({
height: "100%",
background: "url(" + image1 + ") center right 100%/cover no-repeat"
});
});
$(".magazine .teaser-image-box .teaser-image .two").each(function(){
var image2 = $(this).attr('data-image');
$(this).parent().css({
height: "100%",
background: "url(" + image2 + ") center right 100%/cover no-repeat"
});
});
$(".magazine .teaser-image-box .teaser-image .three").each(function(){
var image3 = $(this).attr('data-image');
$(this).parent().css({
height: "100%",
background: "url(" + image3 + ") center right 100%/cover no-repeat"
});
});
$(".magazine .teaser-image-box .teaser-image img").css({
opacity: "0"
});
}
});
clearInterval(waitForJQuery);
}
}, 50);
</script>
{#IE Fix for thumbnails rendering end#}
{% if editmode %}
</div>
{% endif %}