src/Develey/BbqueBundle/Resources/views/Areas/MainStageCarousel/view.html.twig line 1

Open in your IDE?
  1. {% set brickAnchorId = '' %}
  2. {% if pimcore_input("brickAnchorIdInput") is not empty %}
  3.     {% set brickAnchorId = pimcore_input("brickAnchorIdInput")|lowercase %}
  4. {% endif %}
  6. {% set carouselElements = pimcore_block('carouselSlides') %}
  7. {% set variant = pimcore_checkbox("variant").isChecked() %}
  9. {% if editmode %}
  10.     <div class="flex-col offset-bottom-single">
  11.         <div class="col xs-12 m-6 l-4">
  12.             <span class="hint">{{ 'ID für Anchorlinks vergeben' |trans }}</span>
  13.             {{ pimcore_input("brickAnchorIdInput") }}
  14.         </div>
  15.         <div class="col xs-12 m-6 l-4">
  16.             <span class="hint">Layout Variante</span>
  17.             {{ pimcore_checkbox("variant", {"reload": true}) }}Bilder <strong>nicht</strong> beschneiden?
  18.         </div>
  19.         <div class="col xs-12 m-6 l-2">
  20.             <span class="hint">Autoplay</span>
  21.             {{ pimcore_checkbox("autoplay") }}Autoplay aktivieren?
  22.             <div><small>(Slide wechselt dann automatisch)</small></div>
  23.         </div>
  24.         <div class="col xs-12 m-6 l-2">
  25.             <span class="hint">Autoplay Zeit (1000 = 1 Sekunde)</span>
  26.             {{ pimcore_input("autoplayTime", {"placeholder": "4000"}) }}
  27.         </div>
  28.     </div>
  30.     <div class="offset-bottom-single">
  31.         <strong>Carousel</strong>
  32.         {% for i in pimcore_iterate_block(pimcore_block('carouselSlides')) %}
  33.             {% set imageVideoSelectorResult = pimcore_select("imageVideoSelector").getData() %}
  35.             <div>
  36.                 <span><strong>{{ loop.index }}. Slide</strong></span>
  38.                 <div class="flex-col offset-bottom-single">
  39.                     <div class="col xs-12 m-4 l-4">
  40.                         {% if pimcore_select("imageVideoSelector").isEmpty() %}
  41.                             {% do pimcore_select("imageVideoSelector").setDataFromResource("image") %}
  42.                         {% endif %}
  43.                         <span class="hint">{{ 'Möchten Sie ein Bild oder Video integrieren?' |trans }}</span>
  44.                         <div class="select-items">
  45.                             {% if variant == '1' %}
  46.                                 In der Layout Variante ohne Beschnitt sind nur Bilder möglich.<br/>&nbsp;
  47.                             {% else %}
  48.                                 {{ pimcore_select("imageVideoSelector", {
  49.                                     "store": [
  50.                                         ["image", "Bild"],
  51.                                         ["video", "Video"]
  52.                                     ],
  53.                                     "width": 300,
  54.                                     "reload": true
  55.                                 }) }}
  56.                             {% endif %}
  57.                         </div>
  59.                         <div>
  60.                             &nbsp;<br/>
  61.                             <div class="flex-col">
  62.                                 <div class="xs-4 m-4 l-4">
  63.                                     <div class="hint">Link:</div>
  64.                                 </div>
  65.                                 <div class="xs-8 m-8 l-8">
  66.                                     {{ pimcore_link('productLink') }}
  67.                                 </div>
  68.                             </div>
  69.                             <div class="flex-col">
  70.                                 <div class="xs-4 m-4 l-4"></div>
  71.                                 <div class="xs-8 m-8 l-8">
  72.                                     {{ pimcore_checkbox('slideAsLink') }}Ganzer Slide ist Link (ohne Button)
  73.                                 </div>
  74.                             </div>
  75.                         </div>
  76.                     </div>
  77.                     <div class="col xs-12 m-4 l-4">
  78.                         {% if imageVideoSelectorResult == 'video' and (variant != '1') %}
  79.                             <span class="hint">{{ 'Youtube ID eingeben' |trans }}</span>
  80.                             {{ pimcore_input("youtubeID", {
  81.                                 "width": 320,
  82.                                 "reload": true
  83.                             }
  84.                             ) }}
  85.                         {% else %}
  86.                             <span class="hint">{{ 'Hintergrundbild festlegen' |trans }}</span>
  87.                             {{ pimcore_image("mainStage", {
  88.                                 "title": "Drag your image here",
  89.                                 "width": 320,
  90.                                 "reload": true
  91.                             }) }}
  92.                         {% endif %}
  93.                     </div>
  94.                     <div class="col xs-12 m-4 l-4">
  95.                         <div class="hint">Sublines:</div>
  96.                         <div class="text-center">
  97.                             {{ pimcore_input("mainStageHeadlineTwo", {
  98.                                 "placeholder": '1. Subline / Part 2'
  99.                             })|trademark }}
  100.                         </div>
  101.                         <div class="text-center" style="margin-top:5px">
  102.                             {{ pimcore_input("mainStageHeadlineThree", {
  103.                                 "placeholder": '2. Subline / Part 3'
  104.                             })|trademark }}
  105.                         </div>
  106.                         <div class="hint" style="margin-top:8px">Headline (H1 oder H2):</div>
  107.                         <div style="padding-bottom:7px">{{ pimcore_checkbox("setH1") }}als H1 setzten</div>
  108.                         <div class="text-center">
  109.                             {{ pimcore_input("mainStageHeadlineOne", {
  110.                                 "placeholder": 'Headline / Part 1'
  111.                             })|trademark }}
  112.                         </div>
  113.                     </div>
  114.                 </div>
  115.             </div>
  116.         {% endfor %}
  117.     </div>
  118.     <hr/>
  120. {% else %}
  121.     {% if pimcore_checkbox("variant").isChecked() %}
  122.         {% set variant = '1' %}
  123.     {% endif %}
  125.     {% set thumbnailName = "mainStageBackground" ~ bundleName %}
  126.     {% if variant == '1' or pimcore_checkbox("variant").value == true %}
  127.         {% set thumbnailName = "mainStageCarouselNoCover" %}
  128.     {% endif %}
  129.     {% set thumbnailName = "mainStageCarouselNoCover" %}
  131.     {% if carouselElements is defined %}
  132.         {% set slideCount = carouselElements.getCount() %}
  133.         {% if slideCount > 0 %}
  135.             <div id="{{ brickAnchorId }}" class="{% if variant == '1' %}main-stage-carousel_noCover{% endif %}{% if slideCount == 1 %} main-stage-carousel_single-item{% endif %}">
  136.                 {% if slideCount > 1 %}
  137.                     {% set autoplayTime = pimcore_input("autoplayTime") %}
  138.                     {% if autoplayTime is empty %}
  139.                         {% set autoplayTime = '4000' %}
  140.                     {% endif %}
  142.                 <div
  143.                     class="main-stage-carousel main-stage_loading {% if pimcore_checkbox('autoplay').isChecked() %} main-stage-carousel_autoplay{% else %} main-stage-carousel_single{% endif %}"
  144.                     data-slick='{"autoplaySpeed": {{ autoplayTime }}}'
  145.                 >
  146.                     {% endif %}
  148.                     {% for i in pimcore_iterate_block(pimcore_block('carouselSlides')) %}
  149.                         {% set imageVideoSelectorResult = pimcore_select("imageVideoSelector").getData() %}
  150.                         {% set hTag = 'h2' %}
  151.                         {% if pimcore_checkbox("setH1").isChecked()  %}
  152.                             {% set hTag = 'h1' %}
  153.                         {% endif %}
  154.                         {% set productLink = pimcore_link('productLink', {'class': "button btn-default w-auto"}) %}
  155.                         {% set productLinkHref = productLink.getHref() %}
  156.                         {% set slideAsLink = pimcore_checkbox("slideAsLink").isChecked() %}
  158.                         <div class="main-stage-slide stage stage-carousel">
  159.                             <div class="stage-image main {% if imageVideoSelectorResult == 'video' %}video-header {% endif %}stage-with-anchor">
  160.                                 {% if imageVideoSelectorResult == 'video' and (variant != '1') %}
  161.                                     {# Slide content is video #}
  162.                                     {% set videoIDResult = pimcore_input("youtubeID") %}
  163.                                     {% set videoID = 'uid' ~ uniqid()  |raw %}
  164.                                     <div class="video-wrapper">
  165.                                         <div class="iframe-container">
  166.                                             <div id="{{ videoID }}" class="mute-yt-player-stage" data-video-id-result="{{ videoIDResult }}"></div>
  167.                                         </div>
  168.                                     </div>
  169.                                     <script>
  170.                                         window.onload = function () {
  171.                                             // video stage with image on mobile
  172.                                             if (($(window).width()) < 768) {
  173.                                                 var ytImageDefault = 'https://img.youtube.com/vi/' + $('.mute-yt-player-stage').data("videoIdResult") + '/maxresdefault.jpg';
  174.                                                 $('.mute-yt-player-stage').css('background-image', 'url(' + ytImageDefault + ')');
  175.                                             } else {
  176.                                                 $('#{{ videoID }}').each(function () {
  177.                                                     initYoutubeVideoPLayerContainerStage($(this).attr('id'), $(this).data("videoIdResult"));
  178.                                                 });
  179.                                             }
  180.                                         }
  181.                                     </script>
  182.                                 {% else %}
  183.                                     {# Slide content is image #}
  184.                                     <div class="image-wrapper">
  185.                                         {% if pimcore_image("mainStage").getThumbnail(thumbnailName) is not empty %}
  186.                                             {{ pimcore_image("mainStage").getThumbnail(thumbnailName).getHTML() |raw }}
  187.                                         {% endif %}
  188.                                     </div>
  189.                                 {% endif %}
  190.                                 {# Slide Headlines #}
  191.                                 <div class="text-container">
  192.                                     <div class="main-content">
  193.                                         <div class="text">
  194.                                             <div class="special-headline">
  195.                                                 <div class="main-stage-carousel_first">
  196.                                                     {{ pimcore_input("mainStageHeadlineTwo")|trademark }}
  197.                                                 </div>
  198.                                                 <div class="main-stage-carousel_second">
  199.                                                     {{ pimcore_input("mainStageHeadlineThree")|trademark }}
  200.                                                 </div>
  201.                                                 {{ ('<' ~ hTag ~ ' class="main-stage-carousel_third">') | raw }}
  202.                                                 {{ pimcore_input("mainStageHeadlineOne")|trademark }}
  203.                                                 {{ ('</' ~ hTag ~ '>') | raw }}
  204.                                             </div>
  205.                                             {% if slideAsLink != '1' %}
  206.                                                 {% if imageVideoSelectorResult == 'image' %}
  207.                                                     <div class="cta-row">
  208.                                                         {% endif %}
  209.                                                         <div class="text-center" style="margin-top:4px">{{ productLink | raw }}</div>
  210.                                                         {% if imageVideoSelectorResult == 'image' %}
  211.                                                     </div>
  212.                                                 {% endif %}
  213.                                             {% endif %}
  214.                                         </div>
  215.                                     </div>
  216.                                     <div class="with-anchor">
  217.                                         <a href="#content-section" class="content-anchor offset-top"></a>
  218.                                     </div>
  219.                                 </div>
  220.                                 {% if slideAsLink == '1' and (not productLink.getHref() is empty) %}
  221.                                     <a class="main-stage-carousel_slide-link" href="{{ productLink.getHref() }}"></a>
  222.                                 {% endif %}
  223.                                 {# Slide end #}
  224.                             </div>
  225.                         </div>
  226.                     {% endfor %}
  228.                     {% if slideCount > 1 %}
  229.                 </div>
  230.                 {% endif %}
  231.             </div>
  233.         {% endif %}
  234.     {% endif %}
  235. {% endif %}