templates/module/Expertenslider/__experten-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', 3: 'Background Image'} %}
  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.                     {% for i in pimcore_block('sliderblock').iterator %}
  51.                         <p class="hl">Bild: (Breite 1400 x Höhe 1400 Pixel)</p>
  52.                          <div class="dragdrop"><span class="parentbox">
  53.                             {{ pimcore_image("sliderBild",  
  54.                                     {"thumbnail": "img-default-edm", 
  55.                                     "title": "Bild hier hereinziehen", 
  56.                                     "width":150, "height":150, 
  57.                                     "hidetext": true
  58.                                     }) 
  59.                             }}</span>
  60.                         </div>
  61.                         <br/><br/>
  63.                         <p class="hl">Experten Name:</p>
  64.                         <div class="schreiben">
  65.                             <span class="parentbox" style="background-color:#fff">
  66.                                 {{ pimcore_input("expertenName",{
  67.                                     "width": 520
  68.                                 }) }}
  69.                             </span>
  70.                         </div>
  72.                         <p class="hl">Kurzbeschreibungt:</p>
  73.                         <div class="schreiben">
  74.                             <span class="parentbox" style="background-color:#fff">
  75.                                 {{ pimcore_textarea("sliderText",{
  76.                                     "nl2br": true,
  77.                                     "width": 520
  78.                                 }) }}
  79.                             </span>
  80.                         </div>
  81.                         <p class="hl">Telefon Nummer:</p>
  82.                         <div class="schreiben">
  83.                             <span class="parentbox" style="background-color:#fff">
  84.                                 {{ pimcore_input("telefon",{
  85.                                     "width": 520
  86.                                 }) }}
  87.                             </span>
  88.                         </div>
  90.                         <br /><br /><br /><hr /><hr /><br />
  91.                     {% endfor %}      
  92.                 </section>
  93.             {% endif %}
  95.              {% if tabContentArray is defined and 3 in tabContentArray|keys %}
  96.                 {{ admin_tabs(3, tabContentArray) | raw }}
  98.                 <section class="tabContent">
  99.                      <p class="hl">Hintergrundbild: (Breite 2400 x Höhe 480 Pixel)</p>
  100.                         {{ pimcore_image("bg", {
  101.                             "title" : "Bild hier hereinziehen",
  102.                             "width": 600,
  103.                             "height": 90,
  104.                             "hidetext": true,
  105.                             "thumbnail": "background-image-page-edm"
  106.                         }) }}
  107.                 </section>
  108.             {% endif %}
  109.     </div>
  110.     {{ include('includes/backend-fuss.html.twig') }}
  112. {% else %} 
  113.     {% set abstand_top_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-top') == true)? ' abstand-top' : '' %}
  114.     {% set abstand_bottom_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-bottom') == true)? ' abstand-bottom' : '' %}
  115.     {% set abstandClasses = abstand_top_class ~ abstand_bottom_class %}
  116.     {% set sliderId = document.getId() %}
  117.     {% set numberOfItems = 0 %}
  118.     {% set image_path = pimcore_image("bg").getSrc() %}
  120.     <div class="{{ abstandClasses }}">
  121.         {% set areaBlock = pimcore_areablock("AreablockTop") %}
  122.             {% if areaBlock.isEmpty() == false %}
  123.                 <div class="constrainer-maxsize edgepadding">
  124.                     {{ areaBlock | raw }}
  125.                 </div> 
  126.             {% endif %}
  127.         {% set lang = app.request.getLocale() %}    
  128.         {% if image_path is not empty %}
  129.                 {{ imageResponsive({"src": image_path,
  130.                    "ausgabeformat": "div",
  131.                    "endtag": false,
  132.                    "class": "experten-bg",
  133.                    "language": lang }) | raw }}
  134.         {% else %}
  135.             <div class="testesete">
  136.         {% endif %}
  137.         
  139.         <div class="constrainer-maxsize edgepadding">
  140.                 <div class="owl-carousel owl-theme no-underline no-itempadding" data-slider="{{ sliderId }}">
  141.                     {% for i in pimcore_block('sliderblock').iterator %}
  143.                         {% if pimcore_image("sliderBild").isEmpty() == false %}
  144.                             
  145.                             {% set asset_alt = pimcore_image("sliderBild").getAlt() %}
  146.                             {% set asset_src_normal = pimcore_image("sliderBild").getThumbnail("serviceslider-quadrat-normal") %}
  147.                             {% set asset_src_retina = pimcore_image("sliderBild").getThumbnail("serviceslider-quadrat-retina") %}
  148.                             {% set asset_src_default = pimcore_image("sliderBild").getThumbnail("serviceslider-quadrat-default") %}
  150.                             {% set text = pimcore_textarea("sliderText",{"nl2br": true}) %}
  151.                             {% set link = pimcore_link('serviclink').getHref()  %}
  152.                             {% set target = pimcore_link('serviclink').getTarget()  %}
  154.                              {% set telefon_nummer = pimcore_input('telefon') %}
  155.                             {% set numberOfItems = numberOfItems + 1  %}
  157.                                 {% if pimcore_link('serviclink').isEmpty() == false %}
  158.                                     <a href="{{ link }}" target="{{ target }}" class="layout-columns">
  159.                                 {% endif %}
  161.                                 <figure class="porthole">
  162.                                     <div class="porthole-image">
  164.                                         <img src="{{ asset_src_default }}" data-srcset="{{ asset_src_normal }}, {{ asset_src_retina }} 2x,"
  165.                                             alt="{{ asset_alt }}" class="lazyload"/>
  167.                                     </div>
  168.    
  169.                                     <figcaption class="font-size-normal font-light text-center font-color-white">
  170.                                         <strong class="uppercase">{{ pimcore_input("expertenName") }}</strong><br />
  171.                                                  {{ text | raw }}<br />
  172.                                         <strong><a href="tel:{{ telefon_nummer }}">{{ telefon_nummer }}</a></strong>
  173.                                     </figcaption>
  175.                                 </figure>
  177.                                 {% if pimcore_link('serviclink').isEmpty() == false %}
  178.                                     </a>
  179.                                 {% endif %}
  181.                         {% endif %} {# End Slider If Condition #}
  182.                     {% endfor %}  
  183.                 </div>
  184.             </div>
  185.          </div>
  186.     </div>
  189.     <script type="text/javascript">
  191.         (function () {
  193.             var moduleName = 'teaser_slider_{{ sliderId }}_module'; // naming convention XXX_module
  195.             if (typeof selt === 'undefined') {
  196.                 selt = {
  197.                     modules: {}
  198.                 };
  199.             } else if (!selt.modules) {
  200.                 selt.modules = {};
  201.             }
  203.             selt.modules[moduleName] = {
  205.                 name: moduleName,
  207.                 init: function () {
  208.                     init();
  209.                 }
  211.             };
  213.             function init() {
  215.                 galleryEl = $('[data-slider="{{ sliderId }}"]');
  218.                 galleryEl.owlCarousel({
  219.                     center: false,
  220.                     loop: false,
  221.                     items: 1,
  222.                     margin: 0,
  223.                     nav: true,
  224.                     navText: [
  225.                         '<svg class="no-theme" viewBox="0 0 27.2 105.2" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><polygon points="25.4,105.2 0,52 25.4,0 27.2,0.9 2.2,52 27.2,104.3"/></svg>',
  226.                         '<svg class="no-theme" viewBox="0 0 27.2 105.2" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><polygon points="25.4,105.2 0,52 25.4,0 27.2,0.9 2.2,52 27.2,104.3"/></svg>'
  227.                     ],
  228.                     responsive: {
  229.                         1180: {
  230.                             items: {{ numberOfItems < 4 ? numberOfItems : 4 }}
  231.                         },
  232.                         750: {
  233.                             items: 2
  234.                         }
  236.                     }
  237.                 });
  239.                 galleryEl.find('.owl-item .copy').matchHeight({
  240.                     byRow: false
  241.                 });
  244.             }
  245.         }());//EOS
  247.     </script>
  249. {% endif %}