src/Develey/AikoBundle/Resources/views/Areas/TextImage/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 editmode %}
  13.     <div class="flex-col">
  14.         <div class="xs-12 flex-col">
  15.             <div class="col xs-12 m-6 xl-3">
  16.                 {% if pimcore_select("imageVideoSelector").isEmpty() and editmode %}
  17.                     {% do pimcore_select("imageVideoSelector").setDataFromResource("image") %}
  18.                 {% endif %}
  19.                 <span class="hint">{{ 'Möchten Sie ein Bild oder Video integrieren?' |trans }}</span>
  20.                 <div class="select-items">
  21.                     {{ pimcore_select("imageVideoSelector", {
  22.                         "store": [
  23.                         ["image", "Bild"],
  24.                         ["video", "Video"]
  25.                         ],
  26.                         "width": 300,
  27.                         "reload": true
  28.                     }) }}
  29.                 </div>
  30.             </div>
  31.             <div class="col xs-12 m-6 xl-3">
  32.                 {% if pimcore_select("imagePosition").isEmpty() and editmode %}
  33.                     {% do pimcore_select("imagePosition").setDataFromResource("align-right") %}
  34.                 {% endif %}
  35.                 <span class="hint">{{ 'Bitte wählen Sie die Position des Bildes / Videos aus' |trans }}</span>
  36.                 <div class="select-items">
  37.                     {{ pimcore_select("imagePosition", {
  38.                         "store": [
  39.                         ["align-right", "Rechts"],
  40.                         ["align-left", "Links"]
  41.                         ],
  42.                         "width": 300,
  43.                         "reload": true
  44.                     }) }}
  45.                 </div>
  46.             </div>
  47.             <div class="col xs-12 m-6 xl-3">
  48.                 <span class="hint">{{ 'Zusätzliches Logo vor dem Text?' |trans }}</span>
  49.                 {{ pimcore_checkbox('additionalImageCheck', {
  50.                     "reload": true
  51.                 }) }}
  52.             </div>
  53.             <div class="col xs-12 m-6 l-3">
  54.                 <span class="hint">{{ 'Modulname definieren' |trans }}</span>
  55.                 {{ pimcore_input("modulname") }}
  56.             </div>
  57.         </div>
  58.     </div>
  59. {% endif %}
  60. {% set imageVideoSelectorResult = pimcore_select("imageVideoSelector").getData() %}
  61. <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
  62.     <div class="main-content flex-col">
  63.         <div class="text-image textpic-intext nowrap flex-col {{ pimcore_select("imagePosition").getData() }}">
  64.             {% if imageVideoSelectorResult == 'image' %}
  65.                 <div class="col xs-12 m-6 image">
  66.                     {% if pimcore_image("teaserImageHalf").isEmpty() and editmode %}
  67.                         <span class="hint">{{ 'Bild festlegen' |trans }}</span>
  68.                     {% endif %}
  69.                     {{ pimcore_image("teaserImageHalf", {
  70.                         "title": "Drag your image here",
  71.                         "thumbnail": "textImage" ~ bundleName
  72.                     }) }}
  73.                 </div>
  74.             {% endif %}
  75.             {% if imageVideoSelectorResult == 'video' %}
  76.                 {% set videoID = 'uid' ~ UID |raw %}
  77.                 {% set videoIDResult = pimcore_video('video').id %}
  78.                 <div class="col xs-12 m-6 video">
  79.                     {% if editmode %}
  80.                         {{ pimcore_video('video', {
  81.                             "height": 360,
  82.                             youtube: {
  83.                                 autoplay: '0',
  84.                                 modestbranding: '1',
  85.                                 showinfo: '0',
  86.                                 controls: '0',
  87.                                 rel: '0',
  88.                                 enablejsapi: '1'
  89.                             }
  90.                         }) }}
  91.                     {% else %}
  92.                         <div class="iframe-container">
  93.                             <div id="{{ videoID }}" class="mute-yt-player-stage" data-video-id-result="{{ videoIDResult }}"></div>
  94.                         </div>
  95.                     {% endif %}
  96.                 </div>
  97.             {% endif %}
  98.             <div class="col xs-12 m-6 text flex-column box-center ">
  99.                 {% if pimcore_wysiwyg("TeaserImageWYSIWYG").isEmpty() and editmode %}
  100.                     <span class="hint">{{ 'Text festlegen' |trans }}</span>
  101.                 {% endif %}
  102.                 {% if pimcore_checkbox('additionalImageCheck').isChecked() %}
  103.                 <div class="has-additional-image">
  104.                     {% endif %}
  105.                     <div class="additional-image">
  106.                         {% if pimcore_image("additionalImage").isEmpty() and editmode %}
  107.                             <div class="hint">{{ 'Logo vor dem Text' |trans }}</div>
  108.                         {% endif %}
  109.                         {{ pimcore_image("additionalImage", {
  110.                             "title": "Drag your image here",
  111.                             "thumbnail": "additionalImage",
  112.                             "reload": true
  113.                         }) }}
  114.                     </div>
  115.                     <div class="text-content">
  116.                         {{ pimcore_wysiwyg("TeaserImageWYSIWYG", {
  117.                             "placeholder": 'Text'
  118.                         }) |trademark }}
  119.                     </div>
  120.                     {% if pimcore_checkbox('additionalImageCheck').isChecked() %}
  121.                 </div>
  122.                 {% endif %}
  123.             </div>
  124.         </div>
  125.     </div>
  126. </div>
  127. {% if not editmode %}
  128.     {% if imageVideoSelectorResult == 'video' %}
  129.         <script>
  130.             var videoIDr = {{ videoID }};
  132.             window.onload = function () {
  133.                 // video stage with image on mobile
  134.                 $(videoIDr).each(function () {
  135.                     initYoutubeVideoPLayerTextImage($(this).attr('id'), $(this).data("videoIdResult"));
  136.                 });
  137.             }
  138.         </script>
  139.     {% endif %}
  140. {% endif %}