templates/module/Teaser/__teaser-quer.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  3.     {{ include('includes/backend-kopf.html.twig') }}
  5.     {% set tabContentArray = {1: 'Optional', 2: 'Content'} %}
  6.     {% set tab = 1 %}
  8.     <div id="content">        
  9.             {% if tabContentArray is defined and tab in tabContentArray|keys %}
  10.                 {{ admin_tabs(tab, tabContentArray) | raw }}
  11.             {% endif %} 
  12.             <section class="tabContent">
  14.                 <p class="hl">Optionale Einstellung:</p>
  15.                 {% set element = 'artikel' %}
  16.                 <div id="{{ element }} ">
  17.                     {{ pimcore_multiselect(element, {
  18.                             'width': 200,
  19.                             'height': 100,
  20.                             'store': [
  21.                                 ['abstand-top', 'Abstand nach oben'],
  22.                                 ['abstand-bottom', 'Abstand nach unten']
  23.                             ]
  24.                         }) }}
  25.                 </div>
  27.             </section>
  29.             {% if tabContentArray is defined and 2 in tabContentArray|keys %}
  30.                 {{ admin_tabs(2, tabContentArray) | raw }}
  32.                 <section class="tabContent">
  33.                      <p class="hl">Optional Headline (H2):</p>
  34.                         {{ pimcore_areablock("AreablockTop", {
  35.                                 "allowed": ["H2"],
  36.                                 "toolbar": false,
  37.                                 "areablock_toolbar": {
  38.                                     "title": "Content Konfiguration",
  39.                                     "width": 274,
  40.                                     "x": 570,
  41.                                     "y": 41,
  42.                                     "xAlign": "left",
  43.                                     "buttonWidth": 270,
  44.                                     "buttonMaxCharacters": 35
  45.                                 }
  46.                             })
  47.                         }}                        
  48.                     <br /><br /><hr /><br /><br />
  50.                     <p class="hl">Bitte Objekt-Ordner Teaser Quer (aus jeweiligen Theme) zuweisen:</p>
  51.                     <div class="dragdrop"><span class="parentbox">
  52.                         {{ pimcore_relation('teaserfolder', {
  53.                                 "width": 550,
  54.                                 "reload": true,
  55.                                 "types": ["object"],
  56.                                 "subtypes": {
  57.                                     "document": ["folder"],
  58.                                     "classes": ["teaserhochformat"]
  59.                                 },                                
  60.                                 }) 
  61.                         }}
  62.                     </span></div>
  65.                     <br /><br /><br /><br />
  66.                     
  67.                     <p class="hl">Bitte ordnen Sie Objekte aus dem Ordner Teaser Quer zu (falls Sie mit der Reihenfolge manipulieren möchten)::</p>
  68.                     <div class="dragdrop pimcore-relations-custom"><span class="parentbox">
  69.                         {{ pimcore_relations("teaserobjects", {
  70.                             "width": 550,
  71.                             "types": ["object"],
  72.                             "subtypes": {
  73.                                 "object": ["object"]
  74.                             },
  75.                         }) }}
  76.                     </span></div>
  77.                 </section>
  78.             {% endif %}
  79.     </div>
  80.     {{ include('includes/backend-fuss.html.twig') }}
  82. {% else %}
  84.     {% set abstand_top_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-top') == true)? ' abstand-top' : '' %}
  85.     {% set abstand_bottom_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-bottom') == true)? ' abstand-bottom' : '' %}
  87.     {% set abstandClasses = abstand_top_class ~ abstand_bottom_class %}
  89.     <div class="{{ abstandClasses }}">
  90.         {% set areaBlock = pimcore_areablock("AreablockTop") %}
  91.         {% if areaBlock.isEmpty() == false %}
  92.             <div class="constrainer-maxsize edgepadding">
  93.                  {{ areaBlock | raw }}
  94.             </div>
  95.         {% endif %}
  97.         <div class="teaser-horizontal-bg">
  98.             <div class="constrainer-maxsize edgepadding">
  99.                 <div class="layout-columns-2-multiple">
  100.                     {% for key,element in teaser %}
  101.                         {% if element.show_button_and_ancor is not empty %}
  102.                             <a href="{{ element.href_teaser_link }}" target="{{ element.href_teaser_target }}" class="no-underline">
  103.                         {% else %}
  104.                             <div>
  105.                         {% endif %}
  107.                         <div class="layout-float teaser-horizontal hover">
  108.                             <div class="image">
  109.                                            <picture>
  110.                                     <source
  111.                                         data-srcset="{{ element.teaser_bild_normalQadrat }} 200w, {{ element.teaser_bild_retinaQuadrat }} 400w"
  112.                                         media="(max-width: 600px)"
  113.                                         />
  115.                                             <source
  116.                                                     data-srcset="{{ element.teaser_bild_normal }} 415w, {{ element.teaser_bild_normal }} 830w"
  117.                                                     media="(min-width: 601px) and (max-width: 1023px)"
  118.                                                     />
  120.                                             <source
  121.                                                     data-srcset="{{ element.teaser_bild_normalQadrat }} 200w, {{ element.teaser_bild_normalQadrat }} 400w"
  122.                                                     media="(min-width: 1024px) and (max-width: 1399px)"
  123.                                             />
  125.                                             <source
  126.                                                     data-srcset="{{ element.teaser_bild_normal }} 415w, {{ element.teaser_bild_normal }} 830w"
  127.                                                     media="(min-width: 1400px)"
  128.                                             />
  130.                                             <img
  131.                                                     src=""
  132.                                                     data-src="{{ element.teaser_bild_default }}"
  133.                                                     class="lazyload"
  134.                                                     alt="{{ element.teaser_bild__alttag }}"/>
  136.                                         </picture>
  137.                                     </div>
  139.                                     <div class="centered-flex">
  141.                                         <div>
  142.                                             {% if element.teaser_headline is not empty %}
  143.                                                 <h3 class="copy font-bold">{{ element.teaser_headline | raw }} </h3>
  144.                                             {% endif %}
  145.                                             {% if element.teaser_headline_small is defined and element.teaser_headline_small is not empty %}
  146.                                                 <h5 style="margin-top: 8px;" class="copy">{{ element.teaser_headline_small | raw }}</h5>
  147.                                             {% endif %}
  148.                                             {% if element.show_button_and_ancor is not empty %}
  149.                                                 {% if element.teaser_button_text is not empty %}
  150.                                                     <div class="btn-wrp"><button class="btn-small font-light"><span style="transform: translateY(2px); display: block;">{{ element.teaser_button_text | raw }}</span></button></div>
  151.                                                 {% else %}
  152.                                                     <div class="btn-wrp arrow-button"><button></button></div>
  153.                                                 {% endif %}
  154.                                             {% endif %}                                        
  155.                                         </div>
  157.                                     </div>
  160.                                 </div>
  161.                             {% if element.show_button_and_ancor is not empty %}
  162.                                 </a>
  163.                             {% else %}
  164.                                 </div> 
  165.                             {% endif %}
  166.                     {% endfor %}
  167.                 </div>
  168.             </div>
  169.         </div>    
  170.     </div>
  171.     {{ pimcore_areablock("AreablockBottom") }}
  172. {% endif %}