src/Develey/MautnerSpezialitaetenBundle/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">
  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.                     }) }}
  39.                     {% do pimcore_select("imageVideoSelector").setDataFromResource("image") %}
  41.                 </div>
  42.             </div>
  43.             <div class="col xs-12 m-6">
  44.                 {% if imageVideoSelectorResult == 'image' or pimcore_select("imageVideoSelector").isEmpty() %}
  45.                     <span class="hint">{{ 'Hintergrundbild festlegen' |trans }}</span>
  46.                     {{ pimcore_image("mainStage", {
  47.                         "title": "Drag your image here",
  48.                         "thumbnail": "mainStageBackground",
  49.                         "width": 300,
  50.                         "height": 150,
  51.                         "reload": true
  52.                     }) }}
  53.                 {% endif %}
  54.                 {% if imageVideoSelectorResult == 'video' %}
  55.                     <span class="hint">{{ 'Youtube ID eingeben' |trans }}</span>
  56.                     {{ pimcore_input("youtubeID", {
  57.                         "width": 300,
  58.                         "reload": true
  59.                     }
  60.                     ) }}
  61.                 {% endif %}
  62.             </div>
  63.         </div>
  64.     {% endif %}
  66. <div id="{{ brickAnchorId }}" class="stage">
  67.     <div class="stage-image main {% if imageVideoSelectorResult == 'video' %}video-header {% endif %}stage-with-anchor">
  68.         {% if imageVideoSelectorResult == 'image' %}
  69.             <div class="image-wrapper">
  70.                 {% if pimcore_image("mainStage").getThumbnail("mainStageBackground" ~ bundleName) is not empty %}
  71.                     {{ pimcore_image("mainStage").getThumbnail("mainStageBackground" ~ bundleName).getHTML() |raw }}
  72.                 {% endif %}
  73.             </div>
  75.             {#IE Fix for thumbnails rendering start#}
  76.             <script type='text/javascript'>
  77.                 var waitForJQuery = setInterval(function () {
  78.                     if (typeof $ != 'undefined') {
  79.                         $(function() {
  80.                             if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){
  82.                                 $(".stage.main .image-wrapper").css({
  83.                                     position: "absolute",
  84.                                     width: "100%",
  85.                                     height: "100%",
  86.                                     background: "url( {{ pimcore_image("mainStage").getSrc() }} ) center right 100%/cover no-repeat"
  87.                                 });
  88.                                 $(".stage.main .image-wrapper img").hide();
  89.                             }
  90.                         });
  91.                         clearInterval(waitForJQuery);
  92.                     }
  93.                 }, 50);
  94.             </script>
  95.             {#IE Fix for thumbnails rendering end#}
  97.         {% endif %}
  98.         {% if imageVideoSelectorResult == 'video' %}
  99.             {% set videoIDResult = pimcore_input("youtubeID") %}
  100.             {% set videoID = 'uid' ~ UID |raw %}
  101.             <div class="video-wrapper">
  102.                 <div class="iframe-container">
  103.                     <div id="{{ videoID }}" class="mute-yt-player-stage" data-video-id-result="{{ videoIDResult }}"></div>
  104.                 </div>
  105.             </div>
  106.         {% if not editmode %}
  107.             <script>
  108.                 window.onload = function () {
  109.                     // video stage with image on mobile
  110.                     if (($(window).width()) < 768) {
  111.                         var ytImageDefault = 'https://img.youtube.com/vi/' + $('.mute-yt-player-stage').data("videoIdResult") + '/maxresdefault.jpg';
  112.                         $('.mute-yt-player-stage').css('background-image', 'url(' + ytImageDefault + ')');
  113.                     }
  114.                     else {
  115.                         $('#{{ videoID }}').each(function () {
  116.                             initYoutubeVideoPLayerContainerStage($(this).attr('id'), $(this).data("videoIdResult"));
  117.                         });
  118.                     }
  119.                 }
  120.             </script>
  121.         {% endif %}
  122.         {% endif %}
  123.         <div class="text-container">
  124.             <div class="main-content">
  125.                 <div class="text">
  126.                     <div class="uppercase special-headline">
  127.                         <h1>
  128.                                 <span>{{ pimcore_input("mainStageHeadlineOne", {
  129.                                         "placeholder": 'Headline Part 1'
  130.                                     })|trademark }}</span>
  131.                             {{ pimcore_input("mainStageHeadlineTwo", {
  132.                                 "placeholder": 'Headline Part 2'
  133.                             })|trademark }}
  134.                             <strong>{{ pimcore_input("mainStageHeadlineThree", {
  135.                                     "placeholder": 'Headline Part 3'
  136.                                 })|trademark }}</strong>
  137.                         </h1>
  138.                     </div>
  139.                     {% if imageVideoSelectorResult == 'video' %}
  140.                         {{ pimcore_link('productLink', {'class': "button btn-outline"}) }}
  141.                     {% else %}
  142.                         <div class="cta-row">
  143.                             {{ pimcore_link('productLink', {'class': "button btn-default"}) }}
  144.                             {{ pimcore_link('productLinkSecondary', {'class': "button btn-default"}) }}
  145.                         </div>
  146.                     {% endif %}
  147.                 </div>
  148.             </div>
  149.         </div>
  150.     </div>
  151. </div>