templates/module/Gallary/__gallery.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  3.     {{ include('includes/backend-kopf.html.twig') }}
  5.     {% set tabContentArray = {1: 'Optional', 2: 'Bildauswahl'} %}
  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.                     <div style="margin-bottom:4px;margin-top:8px;">Bitte wählen Sie:</div>
  51.                     <br />
  52.                     <div style="margin-bottom:10px;">
  54.                         {% if pimcore_select('gallerySelect').isEmpty() %}
  55.                            {% do pimcore_select('gallerySelect').setDataFromResource('snippet') %}
  56.                         {% endif %}
  57.                             {{ pimcore_select("gallerySelect", {
  58.                                 "store": [
  59.                                     ["snippet", "Zuweisung in der eigene Datei"],
  60.                                     ["object", "Zuweisung per Objekte"]
  61.                                 ],
  62.                                 "width": 300,
  63.                                 "reload": true
  64.                             }) }}
  65.                     </div>
  66.                     {% set showContainerSnippet = "" %} 
  67.                     {% set showContainerObject = "" %}
  69.                     {% if pimcore_select("gallerySelect").getData() == 'object' %}
  70.                        {% set showContainerSnippet =  ' style="position:absolute;left:-9999em"' %}
  71.                     {% elseif pimcore_select("gallerySelect").getData() == 'snippet'%}
  72.                         {% set showContainerObject =  ' style="position:absolute;left:-9999em"' %}
  73.                     {% else %}
  74.                         {% set showContainerObject =  ' style="position:absolute;left:-9999em"' %}
  75.                     {% endif %}
  77.                     <div {{ showContainerSnippet }}>
  78.                          <br /><br /><hr /><br /><br />
  79.                          {% for i in pimcore_block('sliderblock').iterator %}
  80.                                  <p class="hl">Bild: (Breite 1400 x Höhe 1400 Pixel)</p>
  81.                                 <div class="dragdrop"><span class="parentbox">
  82.                                     {{ pimcore_image("sliderBild",  
  83.                                             {"thumbnail": "img-default-edm", 
  84.                                             "title": "Bild hier hereinziehen", 
  85.                                             "width":150, "height":150, 
  86.                                             "hidetext": true
  87.                                             }) 
  88.                                     }}</span>
  89.                                 </div>
  90.                                 <br /><br /><br /><hr /><hr /><br />
  91.                         {% endfor %}
  92.                     </div>
  95.                     <div{{ showContainerObject }}>
  96.                          <div style="width: 100%;padding-left:37px;margin-top:30px;">
  97.                             <p class="hl">Bitte Gallery-Objekt zuweisen:</p>
  98.                         </div>
  99.                         <div class="dragdrop">
  100.                             <span class="parentbox">
  101.                                 {{ pimcore_relation("objectGallery",  
  102.                                     {"types": ["object"],
  103.                                     "subtypes": {
  104.                                         "object": ["object"]
  105.                                     },
  106.                                     "classes": ["gallery"],
  107.                                     "width": "750px"
  108.                                     })
  109.                                 }}
  110.                             </span>
  111.                         </div>
  112.                         <br /><br /><br /><br />
  113.                         
  114.                     </div>
  116.                 </section>
  117.             {% endif %}
  118.     </div>
  119.     {{ include('includes/backend-fuss.html.twig') }}
  121. {% else %}
  123.     {% set abstand_top_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-top') == true)? ' abstand-top' : '' %}
  124.     {% set abstand_bottom_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-bottom') == true)? ' abstand-bottom' : '' %}
  125.     {% set abstandClasses = abstand_top_class ~ abstand_bottom_class %}
  126.     {% set sliderId = document.getId() %}
  127.     {% set showSnippetArray = [] %}
  130.    {% for i in pimcore_block('sliderblock').iterator %}
  131.         {% set imageId = pimcore_image("sliderBild").getId() %}
  132.         {% set asset = pimcore_asset(imageId) %}
  133.         {% if asset is not empty %}
  134.             {% set image_path = pimcore_image("sliderBild").getSrc() %}
  135.             {% set title = asset.getMetadata("title") %}
  136.                 {% set showSnippetArray = showSnippetArray|merge({ (loop.index0) :{"path": image_path,"title": title} }) %}
  137.         {% endif %}
  138.    {% endfor %}
  140.     {% if pimcore_select("gallerySelect").getData() == 'object' %}
  141.                        {% set showGallaryArray =  galleryArray %}
  142.                     {% elseif pimcore_select("gallerySelect").getData() == 'snippet'%}
  143.                         {% set showGallaryArray =  showSnippetArray %}
  144.                     {% else %}
  145.                         {% set showGallaryArray =  showSnippetArray %}
  146.                     {% endif %}
  147.     <div class="{{ abstandClasses }}">
  149.         {% set areaBlock = pimcore_areablock("AreablockTop") %}
  150.             {% if areaBlock.isEmpty() == false %}
  151.                 <div class="constrainer-maxsize edgepadding">
  152.                     {{ areaBlock | raw }}
  153.                 </div> 
  154.             {% endif %}
  155.         {% set lang = app.request.getLocale() %}  
  156.         <div class="constrainer-maxsize">
  157.             <div class="owl-carousel owl-theme owl-nav-spacer" data-slider="{{ sliderId }}">
  158.                 {% for item in showGallaryArray %}
  159.                      <a class="chocolat-image" href="{{ item.path }}" title="{{ item.title }}" style="display:block;">
  160.                             {{ imageResponsive({"src": item.path,
  161.                                 "ausgabeformat": "img",
  162.                                 "endtag": true,
  163.                                 "language": lang }) | raw }}
  164.                      </a>
  165.                 {% endfor %}
  166.             </div>
  167.         </div>
  168.     </div>      
  171. <script type="text/javascript">
  172.     (function () {
  173.         var moduleName = 'gallery_slider_{{ sliderId }}_module'; // naming convention XXX_module
  174.         if (typeof selt === 'undefined') {
  175.             selt = {
  176.                 modules: {}
  177.             };
  178.         } else if (!selt.modules) {
  179.             selt.modules = {};
  180.         }
  182.         selt.modules[moduleName] = {
  183.             name: moduleName,
  184.             init: function () {
  185.                 init();
  186.             }
  187.         };
  189.         function init() {
  190.             galleryEl = $('[data-slider="{{ sliderId }}"]');
  191.             galleryEl.owlCarousel({
  192.                 loop: false,
  193.                 items: 1,
  194.                 margin: 0,
  195.                 nav: true,
  196.                 navText: [
  197.                     '<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>',
  198.                     '<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>'
  199.                 ],
  200.                 responsive: {
  202.                     800: {
  203.                         items: 3,
  204.                     },
  205.                     700: {
  206.                         items: 2,
  207.                     }
  209.                 }
  210.             });
  212.             galleryEl.Chocolat({
  213.                 loop: true
  214.             });
  216.             galleryEl.find('.responsiveImg').pictofit('resize');
  218.             galleryEl.find('.owl-item > *').matchHeight({
  219.                 byRow: false
  220.             });
  221.         }
  222.     }());//EOS
  223. </script>
  225. {% endif %}