{% if editmode %} {{ include('includes/backend-kopf.html.twig') }} {% set tabContentArray = {1: 'Optional', 2: 'Content'} %} {% set tab = 1 %} <div id="content"> {% if tabContentArray is defined and tab in tabContentArray|keys %} {{ admin_tabs(tab, tabContentArray) | raw }} {% endif %} <section class="tabContent"> <p class="hl">Optionale Einstellung:</p> {% set element = 'artikel' %} <div id="{{ element }} "> {{ pimcore_multiselect(element, { 'width': 200, 'height': 100, 'store': [ ['abstand-top', 'Abstand nach oben'], ['abstand-bottom', 'Abstand nach unten'] ] }) }} </div> </section> {% if tabContentArray is defined and 2 in tabContentArray|keys %} {{ admin_tabs(2, tabContentArray) | raw }} <section class="tabContent"> <p class="hl">Optional Headline (H2):</p> {{ pimcore_areablock("AreablockTop", { "allowed": ["H2"], "toolbar": false, "areablock_toolbar": { "title": "Content Konfiguration", "width": 274, "x": 570, "y": 41, "xAlign": "left", "buttonWidth": 270, "buttonMaxCharacters": 35 } }) }} <br /><br /><hr /><br /><br /> <p class="hl">Bitte Objekt-Ordner Teaser Quer (aus jeweiligen Theme) zuweisen:</p> <div class="dragdrop"><span class="parentbox"> {{ pimcore_renderlet('teaserfolder', { "controller" : "App\\Controller\\Module\\TeaserController::teaserAction", "height" : 400, "width": 300 }) }} </span></div> <br /><br /><br /><br /> <p class="hl">Optional Button:</p> {{ pimcore_areablock("AreablockBottom", { "allowed": ["ContentButton"], "toolbar": false, "areablock_toolbar": { "title": "Content Konfiguration", "width": 274, "x": 570, "y": 41, "xAlign": "left", "buttonWidth": 270, "buttonMaxCharacters": 35 } }) }} <br /><br /><br /><br /> <p class="hl">Bitte ordnen Sie Objekte aus dem Ordner Teaser Hoch zu (falls Sie mit der Reihenfolge manipulieren möchten)::</p> <div class="dragdrop pimcore-relations-custom"><span class="parentbox"> {{ pimcore_relations("teaserobjects", { "width": 550, "types": ["object"], "subtypes": { "object": ["object"] }, }) }} </span></div> </section> {% endif %} </div> {{ include('includes/backend-fuss.html.twig') }}{% else %} {% set abstand_top_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-top') == true)? ' abstand-top' : '' %} {% set abstand_bottom_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-bottom') == true)? ' abstand-bottom' : '' %} {% set abstandClasses = abstand_top_class ~ abstand_bottom_class %} {% set sliderId = document.getId() %} {% set numberOfItems = 0 %} <div class="{{ abstandClasses }}"> {% set areaBlock = pimcore_areablock("AreablockTop") %} {% if areaBlock.isEmpty() == false %} <div class="constrainer-maxsize edgepadding"> {{ areaBlock | raw }} </div> {% endif %} <div class="constrainer-maxsize constrainer-maxsize--slider"> <div class="owl-carousel owl-theme no-underline" data-slider="{{ sliderId }}"> {% for key,element in teaser %} <div class="teaser-vertical--col-4"> {% if element.href_teaser_link is not empty %} <a href="{{ element.href_teaser_link }}" target="{{ element.href_teaser_target }}" class="no-underline"> {% endif %} {% if element.teaser_bild_default is not empty %} <img src="{{ element.teaser_bild_default }}" data-srcset="{{ element.teaser_bild_normal }}, {{ element.teaser_bild_retina }} 2x," alt="{{ element.teaser_bild__alttag }}" class="lazyload"/> {% endif %} <div class="copy"> {% if element.teaser_headline is not empty %} <h3 class="theme-color font-bold">{{ element.teaser_headline |raw }} </h3> {% endif %} {% if element.teaser_text is not empty %} <div class="font-size-normal font-light">{{ element.teaser_text |raw }}</div> {% endif %} </div> {% if element.show_button_and_ancor is not empty %} {% if element.teaser_button_text is not empty %} <div class="btn-wrp"><button aria-label="{{ 'More' }}" class="btn-small font-light"><span style="transform: translateY(2px); display: block;">{{ element.teaser_button_text | raw }}</span></button></div> {% else %} <div class="btn-wrp arrow-button"><button aria-label="{{ 'More' }}"></button></div> {% endif %} {% endif %} {% if element.href_teaser_link is not empty %} </a> {% endif %} </div> {% endfor %} </div> </div> </div> <script type="text/javascript"> (function () { var moduleName = 'teaser_slider_{{ sliderId }}_module'; // naming convention XXX_module if (typeof selt === 'undefined') { selt = { modules: {} }; } else if (!selt.modules) { selt.modules = {}; } selt.modules[moduleName] = { name: moduleName, init: function () { init(); } }; function init() { galleryEl = $('[data-slider="{{ sliderId }}"]'); galleryEl.owlCarousel({ center: false, loop: false, items: 1, margin: 0, nav: true, navText: [ '<svg viewBox="0 0 27.2 105.2" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><polygon class="st0" points="25.4,105.2 0,52 25.4,0 27.2,0.9 2.2,52 27.2,104.3"/></svg>', '<svg viewBox="0 0 27.2 105.2" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><polygon class="st0" points="25.4,105.2 0,52 25.4,0 27.2,0.9 2.2,52 27.2,104.3"/></svg>' ], responsive: { 1280: { items: 4 }, 950: { items: 3 }, 700: { items: 2 } } }).on('resized.owl.carousel', function (event) { galleryEl.trigger('to.owl.carousel', [1, 1000]); }); galleryEl.find('.owl-item .copy').matchHeight({ byRow: false }); } }());//EOS </script>{% endif %}