{% 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 %}