templates/areas/AddInstagram/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  3.        <style>
  4.         .accordion {
  5.             margin: 37px;
  6.         }
  7.         .accordion dt {
  8.             padding: 10px;
  9.             font-size: 14px;
  10.             color: #a963e7;
  11.         }
  13.         .accordion dd {
  14.             padding: 10px;
  15.             background-color: #569dd5;
  16.             color: #ffffff;
  17.         }
  19.         .accordion dt a {
  20.             display: block;
  21.             color: #38659e;
  22.             font-weight: bold;
  23.             text-transform: uppercase;
  24.         }
  26.         dd {
  27.             font-size: 14px;
  28.             color: #000000;
  29.         }
  30.     </style>
  32.     <div class="areablock-main">
  34.         <div class="areablock-title area-box-padding">
  35.             Instagram Beiträge Einbinden
  36.         </div>
  39.         <div class="areablock-body area-box-padding">
  41.             <dl class="accordion">
  42.                 <dt><a href="">Hilfe zu Instagram Beitrag Einbinden</a></dt>
  43.                 <dd>
  44.                       <span>
  45.                           Um den HTML-Code einzubetten, müssen Sie den Post für den Artikel in Iherem  Account öffnen.<br/><br/>Klicken Sie auf die Schaltfläche mit den drei Punkten, die sich neben jedem Foto / Video befindet, und wählen Sie dann "Einbetten" => Code kopieren. Sehen Sie sich einfach den folgenden Screenshot an, wenn Sie Schwierigkeiten haben, diesen Knopf zu finden.<br/><br/><b>Fügen Sie nun den Code im CMS in das nachfolgende Textfeld!</b>
  46.                       </span>
  47.                     <br/>
  48.                     <img src="/bundles/app/static/backend/image/edm-style/instagram-hilfe-screen.png" height="250" style="margin-top: 30px;"/>
  49.                 </dd>
  50.             </dl>
  52.             {% for i in pimcore_block('instagramblock').iterator %}
  53.                 <div class="schreiben">
  54.                   <span class="parentbox">
  55.                       {{ pimcore_textarea("instagramCode",{
  56.                             "nl2br": true,
  57.                             "height": 100,
  58.                             "width": 735
  59.                         }) }}
  60.                   </span>
  61.                 </div>
  63.                 <div style="width:100%;height:1px;border-bottom: 1px solid #474747; margin-bottom: 30px;margin-top: 30px;"></div>
  64.               {% endfor %}
  65.             <br /><br /><br />
  66.           </div>
  67.       </div>
  70.     <script>
  71.         (function($) {
  72.             var allPanels = $('.accordion > dd');
  73.             $('.accordion > dd').hide();
  74.             $('.accordion > dt > a').click(function() {
  75.                 if($(this).parent().next().is(":visible")){
  76.                     allPanels.slideUp();
  77.                     return false;
  78.                 } else {
  79.                     $(this).parent().next().slideDown();
  80.                     return false;
  81.                 }
  83.             });
  85.         })(jQuery);
  86.     </script>
  89. {% else %}
  92.     {% set contInstagramblock = pimcore_block('instagramblock').getCount() %}
  93.     {% set counter = 1 %}
  94.     {% set randomID = random() %}
  95.     {% set direktausgabe = "" %}
  97.     {% set posts = "posts"~randomID %}
  98.    {% set posts = [] %}
  99.     {% for i in pimcore_block('instagramblock').iterator %}
  100.         {% set codepush = pimcore_textarea("instagramCode",{"htmlspecialchars": false}) %}
  101.         {% set direktausgabe = direktausgabe~'<div class="centered-flex">' ~ codepush ~ '</div>' %}
  102.         {% set posts = posts|merge([codepush]) %}
  103.         {% set counter = counter + 1 %}
  104.     {% endfor %}
  107.     {% set randomID = random() %}
  108.     {% set trackingObj = pimcore_website_config('konfiguration_tracking') %}
  109.     {% set buttontext = app_value(trackingObj, 'getButtontext') %}
  110.     {% set instagraminfotext = app_value(trackingObj, 'getInstagraminfotext') %}
  111.     {% set allowsocialmedia = allow_tracking() %}
  112.    
  114.     {% if allowsocialmedia is empty %}
  115.     <div class="text-center" data-social-feed="btn_{{ randomID }}">
  116.         <div>{{ instagraminfotext |raw }}</div>
  117.         <div class="btn-wrp">
  118.             <button data-showposts>{{ buttontext |raw}}</button>
  119.         </div>
  120.     </div>
  121.      {% endif %}
  123.         <div class="owl-carousel owl-theme" data-social-feed="content_{{ randomID }}" data-slider="{{ randomID }}"
  124.             {{ (allowsocialmedia is not empty) ? ' style="display:block;"' : '' }}>
  126.             {% if allowsocialmedia is not empty %} {{ direktausgabe |raw }} {% endif %}
  127.         </div>
  130.     <script type="text/javascript">
  131.         (function () {
  132.             var moduleName  = 'teaser_slider_{{ randomID }}_module', // naming convention XXX_module
  133.                 showFeedBtn = document.querySelector('[data-social-feed="btn_{{ randomID }}"]'),
  134.                 feedContainer = document.querySelector('[data-social-feed="content_{{ randomID }}"]');
  136.             if (typeof selt === 'undefined') {
  137.                 selt = {
  138.                     modules: {}
  139.                 };
  140.             } else if (!selt.modules) {
  141.                 selt.modules = {};
  142.             }
  144.             selt.modules[moduleName] = {
  145.                 name: moduleName,
  146.                 spritelist: 'instagram',
  147.                 scriptSrc: null,
  148.                 init: function () {
  149.                     selt.modules.addSprite(this);
  150.                     // only add feeds with user consent
  151.                     if (showFeedBtn) {
  152.                         showFeedBtn.addEventListener('click', callAllSprites, false)
  153.                     }
  156.                     {% if allowsocialmedia is not empty %}
  157.                     var itemCount = {{ contInstagramblock }},
  158.                         itemCountArray;
  159.                     switch (true) {
  161.                         case (itemCount > 2):
  162.                             itemCountArray = [3, 2];
  163.                             break;
  165.                         case (itemCount == 2):
  166.                             itemCountArray = [2, 2];
  167.                             break;
  169.                         default:
  170.                             itemCountArray = [1, 1];
  172.                     }
  174.                    initSlider(itemCountArray);
  176.                    {% endif %}
  180.                 },
  182.                 showFeed: function () {
  184.                     // post is an array of code snippets copied from instagram
  186.                     var posts     = {{ posts|json_encode() }},
  187.                         itemCount = posts.length,
  188.                         itemCountArray;
  190.                     showFeedBtn.parentNode.removeChild(showFeedBtn);
  192.                     posts.forEach(function (el) {
  194.                         // create a post from the code snippet copied from
  195.                         // instagram post
  196.                         var post = document.createElement("div");
  197.                         post.classList.add('centered-flex');
  198.                         post.innerHTML = el;
  200.                         // remove the script tag but capture the source
  201.                         var scripts = post.getElementsByTagName('script'),
  202.                             i       = scripts.length;
  203.                         while (i--) {
  204.                             this.scriptSrc = scripts[i].getAttribute('src');
  205.                             scripts[i].parentNode.removeChild(scripts[i]);
  206.                         }
  208.                         feedContainer.appendChild(post);
  210.                     });
  213.                     // used to tell the slider how many posts to show
  214.                     // based on the number of items
  215.                     switch (true) {
  217.                         case (itemCount > 2):
  218.                             itemCountArray = [3, 2];
  219.                             break;
  221.                         case (itemCount == 2):
  222.                             itemCountArray = [2, 2];
  223.                             break;
  225.                         default:
  226.                             itemCountArray = [1, 1];
  228.                     }
  229.                     // html is injected. Now init the slider
  230.                     initSlider(itemCountArray);
  231.                 }
  232.             };
  234.             function callAllSprites() {
  235.                // $.cookie("allowsocialmedia", 'allow');
  236.                 selt.modules.callSpriteListMethod('instagram', 'showFeed', function () {
  237.                     selt.loadExternalJavascript(scriptSrc);
  238.                 })
  239.             };
  241.             function initSlider(itemCountArray) {
  242.                 galleryEl = $('[data-slider="{{ randomID }}"]');
  243.                 galleryEl.owlCarousel({
  244.                     center: false,
  245.                     loop: false,
  246.                     items: 1,
  247.                     margin: 20,
  248.                     nav: true,
  249.                     navText: [
  250.                         '<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>',
  251.                         '<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>'
  252.                     ],
  253.                     responsive: {
  254.                         1280: {
  255.                             items: itemCountArray[0]
  256.                         },
  257.                         880: {
  258.                             items: itemCountArray[1]
  259.                         }
  260.                     }
  261.                 });
  262.             }
  263.         }());//EOS
  265.     </script>
  267. {% endif %}