src/Develey/MautnerBundle/Resources/views/Areas/MainStage/view.html.twig line 1

Open in your IDE?
  1. {% set spacingSelect %}
  2.     {{ pimcore_checkbox("checkSpacing", {
  3.         "reload": true
  4.     }) }}
  5. {% endset %}
  6. {% set noSpacingTop = '' %}
  7. {% set brickAnchorId = '' %}
  8. {% if pimcore_checkbox('checkSpacing').isChecked() %}
  9.     {% set noSpacingTop = 'no-offset-top' %}
  10. {% endif %}
  11. {% set UID = uniqid() %}
  12. {% if pimcore_input("brickAnchorIdInput") is not empty %}
  13.     {% set brickAnchorId = pimcore_input("brickAnchorIdInput")|lowercase %}
  14. {% endif %}
  15. {% set imageVideoSelectorResult = pimcore_select("imageVideoSelector").getData() %}
  16.     {% if editmode %}
  17.         <div class="flex-col offset-bottom-single">
  18.             <div class="col xs-12 m-6 l-3">
  19.                 <span class="hint">{{ 'ID für Anchorlinks vergeben' |trans }}</span>
  20.                 {{ pimcore_input("brickAnchorIdInput") }}
  21.             </div>
  22.         </div>
  23.         <div class="flex-col offset-bottom-single">
  24.             <div class="col xs-12 m-6 l-4">
  25.                 {% if pimcore_select("imageVideoSelector").isEmpty() %}
  26.                     {% do pimcore_select("imageVideoSelector").setDataFromResource("image") %}
  27.                 {% endif %}
  28.                 <span class="hint">{{ 'Möchten Sie ein Bild oder Video integrieren?' |trans }}</span>
  29.                 <div class="select-items">
  30.                     {{ pimcore_select("imageVideoSelector", {
  31.                         "store": [
  32.                         ["image", "Bild"],
  33.                         ["video", "Video"]
  34.                         ],
  35.                         "width": 300,
  36.                         "reload": true
  37.                     }) }}
  38.                 </div>
  39.             </div>
  40.             <div class="col xs-12 m-6 l-4">
  41.                 {% if imageVideoSelectorResult != 'video' %}
  42.                     <span class="hint">{{ 'Hintergrundbild festlegen' |trans }}</span>
  43.                     {{ pimcore_image("mainStage", {
  44.                         "title": "Drag your image here",
  45.                         "thumbnail": "mainStageBackground" ~ bundleName,
  46.                         "width": 300,
  47.                         "reload": true
  48.                     }) }}
  49.                 {% endif %}
  50.                 {% if imageVideoSelectorResult == 'video' %}
  51.                     <span class="hint">{{ 'Youtube ID eingeben' |trans }}</span>
  52.                     {{ pimcore_input("youtubeID", {
  53.                         "width": 300,
  54.                         "reload": true
  55.                     }
  56.                     ) }}
  57.                 {% endif %}
  58.             </div>
  59.             <div class="col xs-12 m-6 l-4">
  60.                 <span class="hint">{{ 'Wählen Sie die Headline Color' |trans }}</span>
  61.                 <div class="select-items">
  62.                     {% if pimcore_select("headlineColorSelect").isEmpty() %}
  63.                         {% do pimcore_select("headlineColorSelect").setDataFromResource("default") %}
  64.                     {% endif %}
  65.                     {{ pimcore_select("headlineColorSelect", {
  66.                         "store": [
  67.                         ["default", "Weiß"],
  68.                         ["highlighted", "Rot"],
  69.                         ["inverted", "Schwarz"]
  70.                         ],
  71.                         "width": 300,
  72.                         "reload": true
  73.                     }) }}
  74.                 </div>
  75.             </div>
  76.         </div>
  77.     {% endif %}
  79. <div id="{{ brickAnchorId }}" class="stage no-offset-top">
  80.     <div class="stage-image main {% if imageVideoSelectorResult == 'video' %}video-header {% endif %}stage-with-anchor">
  81.         {% if imageVideoSelectorResult == 'image' %}
  82.             <div class="image-wrapper">
  83.                 {% if pimcore_image("mainStage").getThumbnail("mainStageBackground" ~ bundleName) is not empty %}
  84.                     {{ pimcore_image("mainStage").getThumbnail("mainStageBackground" ~ bundleName).getHTML() |raw }}
  86.                     {#IE Fix for thumbnails rendering start#}
  87.                     <script type='text/javascript'>
  88.                         var waitForJQuery = setInterval(function () {
  89.                             if (typeof $ != 'undefined') {
  90.                                 $(function() {
  91.                                     if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){
  93.                                         $(".stage-image.main .image-wrapper").css({
  94.                                             position: "absolute",
  95.                                             width: "100%",
  96.                                             height: "100%",
  97.                                             background: "url( {{ pimcore_image("mainStage").getSrc() }} ) center right 100%/cover no-repeat"
  98.                                         });
  99.                                         $(".stage-image.main .image-wrapper img").hide();
  100.                                     }
  101.                                 });
  102.                                 clearInterval(waitForJQuery);
  103.                             }
  104.                         }, 50);
  105.                     </script>
  106.                     {#IE Fix for thumbnails rendering end#}
  108.                 {% endif %}
  109.             </div>
  110.         {% endif %}
  111.         {% if imageVideoSelectorResult == 'video' %}
  112.             {% set videoIDResult = pimcore_input("youtubeID") %}
  113.             {% set videoID = 'uid' ~ UID |raw %}
  114.             <div class="video-wrapper">
  115.                 <div class="iframe-container">
  116.                     <div id="{{ videoID }}" class="mute-yt-player-stage" data-video-id-result="{{ videoIDResult }}"></div>
  117.                 </div>
  118.             </div>
  119.             {% if not editmode %}
  120.                 <script type='text/javascript'>
  121.                   var waitForJQuery = setInterval(function () {
  122.                     if (typeof $ != 'undefined') {
  123.                       $(function() {
  124.                         // video stage with image on mobile
  125.                         if (($(window).width()) < 768) {
  126.                             var ytImageDefault = 'https://img.youtube.com/vi/' + $('.mute-yt-player-stage').data("videoIdResult") + '/maxresdefault.jpg';
  127.                             $('.mute-yt-player-stage').css('background-image', 'url(' + ytImageDefault + ')');
  128.                         }
  129.                         else {
  130.                             $('#{{ videoID }}').each(function () {
  131.                                 initYoutubeVideoPLayerContainerStage($(this).attr('id'), $(this).data("videoIdResult"));
  132.                             });
  133.                         }
  134.                       });
  135.                         clearInterval(waitForJQuery);
  136.                       }
  137.                     }, 50);
  138.                 </script>
  139.             {% endif %}
  140.         {% endif %}
  141.         <div class="text-container">
  142.             <div class="main-content">
  143.                 <div class="text">
  144.                     <div class="special-headline  {{ pimcore_select("headlineColorSelect") }}">
  145.                         <h1>
  146.                             <span class="special-headline-first">
  147.                                 {{ pimcore_input("mainStageHeadlineOne", {
  148.                                     "placeholder": 'Headline Part 1'
  149.                                 })|trademark }}
  150.                             </span>
  151.                             <span class="special-headline-second">
  152.                                 {{ pimcore_input("mainStageHeadlineTwo", {
  153.                                     "placeholder": 'Headline Part 2'
  154.                                 })|trademark }}
  155.                             </span>
  156.                             <span class="special-headline-third">
  157.                                 {{ pimcore_input("mainStageHeadlineThree", {
  158.                                     "placeholder": 'Headline Part 3'
  159.                                 })|trademark }}
  160.                             </span>
  161.                         </h1>
  162.                     </div>
  163.                     {% if imageVideoSelectorResult == 'video' %}
  164.                         {{ pimcore_link('productLink', {'class': "button btn-outline"}) }}
  165.                     {% else %}
  166.                         <div class="cta-row">
  167.                             {{ pimcore_link('productLink', {'class': "button btn-default"}) }}
  168.                         </div>
  169.                     {% endif %}
  170.                 </div>
  171.             </div>
  172.             <div class="with-anchor">
  173.                 <a href="#content-section" class="content-anchor offset-top"></a>
  174.             </div>
  175.         </div>
  176.     </div>
  177. </div>