templates/module/Jobs/__jobs-teaser-slider.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.             
  12.                 <section class="tabContent">
  13.                     <p class="hl">Optionale Einstellung:</p>
  14.                     {% set element = 'artikel' %}
  15.                     <div id="{{ element }} ">
  16.                         {{ pimcore_multiselect(element, {
  17.                                 'width': 200,
  18.                                 'height': 100,
  19.                                 'store': [
  20.                                     ['abstand-top', 'Abstand nach oben'],
  21.                                     ['abstand-bottom', 'Abstand nach unten']
  22.                                 ]
  23.                             }) }}
  24.                     </div>
  26.                 </section>
  27.             {% endif %} 
  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 />
  49.                     
  50.                     <p class="hl">Bitte Job-Objekt-Ordner zuweisen:</p>
  51.                     <div class="dragdrop"><span class="parentbox">
  52.                             {{ pimcore_relation("jobsfolder",{
  53.                                 "types": ["object"],
  54.                                 "width":550,
  55.                                 "reload": true,
  56.                                 "subtypes": {
  57.                                     "document": ["folder"],
  58.                                     "classes": ["jobs"]
  59.                                 }                                
  60.                             }) }}
  61.                     </span></div>
  64.                     <br /><br /><br /><br />
  65.                          
  66.                 </section>
  67.             {% endif %}
  70.     </div>
  71.     {{ include('includes/backend-fuss.html.twig') }}
  73. {% else %}
  75.     {% set abstand_top_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-top') == true)? ' abstand-top' : '' %}
  76.     {% set abstand_bottom_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-bottom') == true)? ' abstand-bottom' : '' %}
  77.     {% set abstandClasses = abstand_top_class ~ abstand_bottom_class %}
  78.     {% set teaserID = document.getId() %}
  80.     <div class="{{ abstandClasses }}">
  81.         {% set areaBlock = pimcore_areablock("AreablockTop") %}
  82.             {% if areaBlock.isEmpty() == false %}
  83.                 <div class="constrainer-maxsize edgepadding">
  84.                     {{ areaBlock | raw }}
  85.                 </div> 
  86.             {% endif %}     
  88.             <div class="constrainer-maxsize constrainer-maxsize--slider">
  89.                 <div class="owl-carousel owl-theme no-underline" data-slider="{{ teaserID }}">
  90.                     {% for key, element in jobTeaserSliderArray %}
  91.                         {% if element.show is not empty %}
  92.                             <section class="teaser-vertical--col-3 hover">
  93.                                 <a href="{{ element.teaser_link }}">
  94.                                     <header class="offer-header">
  95.                                         <h6 class="font-bold">{{ element.gueltigkeitszeitraum }}</h6>
  96.                                         <h3 class="theme-color font-bold">{{ element.teaser_title }}</h3>
  97.                                     </header>
  99.                                     <img
  100.                                          data-srcset="{{ element.teaser_bild_normal }}, {{ element.teaser_bild_retina }} 2x,"
  101.                                          alt="{{ element.teaser_bild__alttag }}" class="lazyload"/>
  103.                                     <div class="copy font-size-normal font-light">
  104.                                         {{ element.teaser_text | raw }}
  105.                                     </div>
  107.                                     <footer class="offer-footer">
  108.                                         <div class="btn-wrp arrow-button">
  109.                                             <button></button>
  110.                                         </div>
  111.                                     </footer>
  112.                                 </a>
  113.                             </section>
  114.                         {% endif %}
  115.                     {% endfor %}
  116.                 </div>
  117.             </div>
  118.         
  120.             <script type="text/javascript">
  121.                 (function () {
  122.                     var moduleName = 'teaser_slider_{{ teaserID }}_module';
  123.                     if (typeof selt === 'undefined') {
  124.                         selt = {
  125.                             modules: {}
  126.                         };
  127.                     } else if (!selt.modules) {
  128.                         selt.modules = {};
  129.                     }
  131.                     selt.modules[moduleName] = {
  132.                         name: moduleName,
  133.                         init: function () {
  134.                             init();
  135.                         }
  136.                     };
  138.                     function init() {
  139.                         galleryEl = $('[data-slider="{{ teaserID }}"]');
  140.                         galleryEl.owlCarousel({
  141.                             center: false,
  142.                             loop: false,
  143.                             items: 1,
  144.                             margin: 0,
  145.                             nav: true,
  146.                             navText: [
  147.                                 '<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>',
  148.                                 '<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>'
  149.                             ],
  150.                             responsive: {
  151.                                 1280: {
  152.                                     items: 3
  153.                                 },
  154.                                 950: {
  155.                                     items: 2
  156.                                 },
  157.                                 750: {
  158.                                     items: 2
  159.                                 }
  160.                             }
  161.                         }).on('resized.owl.carousel', function (event) {
  162.                             galleryEl.trigger('refresh.owl.carousel');
  163.                         });
  164.                         galleryEl.find('.owl-item .copy').matchHeight({
  165.                             byRow: false
  166.                         });
  167.                     }
  168.                 }());
  169.             </script>
  170.     </div>
  171. {% endif %}