templates/areas/apk-banner-video/view.html.twig line 1

Open in your IDE?
  4. {% if editmode %}
  6. <div class="uk-container apk-container-1400">
  7.     <div class="uk-alert" uk-alert>
  8.         <h2 class="uk-h2">APK BANNER VIDEO</h2>
  9.     </div>
  10.     <ul class="uk-tab" uk-tab>
  11.         <li><a href="#">Configurations</a></li>
  12.         <li class="uk-active"><a href="#">Content Edit</a></li>
  13.     </ul>
  15.     <ul class="uk-switcher uk-margin">
  16.         <li class="apk-size-20 uk-grid-small uk-grid" uk-grid>
  17.             {# Colonne 1 #}
  18.             <div class="uk-width-1-2@m" uk-margin>
  20.                 <div>Type de heading pour le titre ?</div>
  21.                 {{ pimcore_select("content-heading", {
  22.                     "store" : [
  23.                         ['span', 'span'],
  24.                         ['h2', 'Heading 2'],
  25.                         ['h3', 'Heading 3'],
  26.                         ['h4', 'Heading 4'],
  27.                         ['h5', 'Heading 5'],
  28.                         ['h6', 'Heading 6']
  29.                     ],
  30.                     "defaultValue" : "h2"
  31.                 }) }}
  33.                 <div><strong>Style</strong> du heading pour le titre ?</div>
  34.                 {{ pimcore_select("content-heading-style", {
  35.                     "store" : [
  36.                         ['h2', 'Heading 2'],
  37.                         ['h3', 'Heading 3'],
  38.                         ['h4', 'Heading 4'],
  39.                         ['h5', 'Heading 5'],
  40.                         ['h6', 'Heading 6']
  41.                     ],
  42.                     "defaultValue" : "h2"
  43.                 }) }}
  45.                 <div><strong>Alignement</strong> du texte</div>
  46.                 {{ pimcore_select("text-alignment", {
  47.                     "store" : [
  48.                         ['uk-text-left', 'Gauche'],
  49.                         ['uk-text-right', 'Droite'],
  50.                         ['uk-text-center', 'Centr??'],
  51.                     ],
  52.                     "defaultValue" : "uk-text-center"
  53.                 }) }}
  55.                 <div><strong>Couleur</strong> du bouton</div>
  56.                 {{ pimcore_select("button-color", {
  57.                     "store" : [
  58.                         ['uk-button', 'Bleu'],
  59.                         ['uk-button uk-button-primary', 'Rouge'],
  60.                     ],
  61.                     "defaultValue" : "uk-button"
  62.                 }) }}
  63.             </div>
  65.             {# Colonne 2 #}
  66.             <div class="uk-width-1-2@m" uk-margin>
  68.                 <div>Position de l'image en cover</div>
  69.                 {{ pimcore_select("cover-position", {
  70.                     "store" : [
  71.                         ['apk-cover-top-left', 'Haut gauche'],
  72.                         ['apk-cover-top-center', 'Haut centr??'],
  73.                         ['apk-cover-top-right', 'Haut droite'],
  74.                         ['apk-cover-center-left', 'Centr?? gauche'],
  75.                         ['apk-cover-center', 'Centr?? centr??'],
  76.                         ['apk-cover-center-right', 'Centr?? droit'],
  77.                         ['apk-cover-bottom-left', 'Bas gauche'],
  78.                         ['apk-cover-bottom-center', 'Bas centr??'],
  79.                         ['apk-cover-bottom-right', 'Bas droit'],
  80.                     ],
  81.                     "defaultValue" : "apk-cover-center"
  82.                 }) }}
  83.                 
  84.                 <div>Espacement en haut du block</div>
  85.                 {{ pimcore_select("margin-top", {
  86.                     "store" : [
  87.                         ['uk-padding-remove-top', 'Suppression du padding'],
  88.                         ['', 'Aucun'],
  89.                         ['uk-margin-small-top', 'Petit'],
  90.                         ['uk-margin-medium-top', 'Moyen'],
  91.                         ['uk-margin-large-top', 'Grand'],
  92.                         ['uk-margin-xlarge-top', 'Tr??s grand'],
  93.                     ],
  94.                     "defaultValue" : ""
  95.                 }) }}
  96.     
  97.                 <div>Espacement en bas du block</div>
  98.                 {{ pimcore_select("margin-bottom", {
  99.                     "store" : [
  100.                         ['uk-padding-remove-bottom', 'Suppression du padding'],
  101.                         ['', 'Aucun'],
  102.                         ['uk-margin-small-bottom', 'Petit'],
  103.                         ['uk-margin-medium-bottom', 'Moyen'],
  104.                         ['uk-margin-large-bottom', 'Grand'],
  105.                         ['uk-margin-xlarge-bottom', 'Tr??s grand'],
  106.                     ],
  107.                     "defaultValue" : ""
  108.                 }) }}
  110.                 <div>Hauteur</div>
  111.                 {{ pimcore_checkbox("banner-full-height") }} Full height
  112.                 
  113.             </div>
  115.         </li>
  116.     
  117.         <li class="uk-active">
  118.             <div class="uk-margin-large-bottom">
  120.                 <div class="apk-content">
  122.                     <b>VIDEO</b>
  123.                     {{ pimcore_video("video") }}
  125.                     <b>POSTER</b>
  126.                     {{ pimcore_image("video-poster") }}
  127.                     <br/>
  128.                     <br/>
  130.                     <h2 class="uk-h2">
  131.                         {{ pimcore_textarea("content-title",{
  132.                             "nl2br" : true
  133.                         }) }}
  134.                     </h2>
  135.                     
  136.                     <div>
  137.                         <span>{{ pimcore_input('content') }}</span>
  138.                     </div>
  139.                     
  141.                     <div class="uk-margin-top">
  142.                         {{ pimcore_link("content-btn", {
  143.                             "class" : pimcore_select("button-color").data
  144.                         }) }}
  145.                     </div>
  147.                     <div class="uk-margin-top"><b>References</b></div>
  148.                     <div>
  149.                         {% for i in pimcore_block('referencesBlock').iterator %}
  150.                             {{ pimcore_image('reference', {'width' : 200, 'height' : 200}) }}
  151.                         {% endfor %}
  152.                     </div>
  153.                 </div>
  154.             </div>
  155.         </li>
  156.     </ul>
  157. </div>
  159. {% endif %}
  161. {% if not editmode %}
  163.     <div class="apk-areabrick-container {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}  {% if pimcore_checkbox("banner-full-height").isChecked() %}is-full-height{% endif %}">
  165.         <div class="apk-cover-container uk-height-1-1">
  166.             
  167.             <div class="uk-container apk-container-1400 uk-height-1-1">
  169.                 <div class="apk-container-inner">
  172.                     <div class="uk-grid uk-grid-collapse" uk-grid>
  174.                         <div class="uk-width-1-3@m uk-flex uk-flex-middle">
  176.                             <div class="content {{ pimcore_select("text-alignment") }}">
  177.                                 
  178.                                 {% if not pimcore_textarea("content-title").isEmpty %}
  179.                                     {% if pimcore_select("content-heading").data == "span" %}
  180.                                         <span class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  181.                                             {{ pimcore_textarea("content-title", {
  182.                                             "nl2br" : true})|raw }}
  183.                                         </span>
  184.                                     {% else %}
  185.                                         {% set content_heading = pimcore_select("content-heading").getData() ?: 'h2' %}
  186. {% if content_heading == 'h1' %}
  187.     {% set content_heading = 'h2' %}
  188. {% endif %}
  189.                                         <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  190.                                             {{ pimcore_textarea("content-title", {
  191.                                             "nl2br" : true})|raw }}
  192.                                         </{{ content_heading }}>
  193.                                     {% endif %}
  194.                                 {% endif %}
  195.                         
  196.                                 <div class="subtitle">
  197.                                     {{ pimcore_input("content") }}
  198.                                 </div>
  199.                         
  200.                                 {% if not pimcore_link("content-btn").isEmpty() %}
  201.                                     <div class="actions">
  202.                                         {{ pimcore_link("content-btn", {
  203.                                             "class" : pimcore_select("button-color").data
  204.                                         }) }}
  205.                                     </div>
  206.                                 {% endif %}
  207.                             
  208.                             </div>
  210.                         </div>
  212.                         {#
  213.                         <div class="uk-width-2-3@m">
  214.                             <div class="video-container">
  215.                                 <div class="aspect-ratio">
  216.                                     <iframe src="https://www.youtube-nocookie.com/embed/JGv-GCos-sg" frameborder="0"  width="1920" height="1080" allowfullscreen allow="autoplay;" uk-video="autoplay: inview; automute: true;" uk-cover></iframe>
  217.                                 </div>
  218.                                 <div class="apk-overlay">
  219.                                     <div class="apk-overlay-inner"></div>
  220.                                 </div>
  221.                             </div>
  222.                         </div>
  223.                         #}
  225.                     </div>
  227.                     <div class="apk-video-container">
  228.                         {% if pimcore_video('video').videoType == "asset" %}
  229.                             {{ pimcore_video('video', {
  230.                                 thumbnail: 'full-image',
  231.                                 imagethumbnail: "background-fullpage",
  232.                                 attributes: {
  233.                                     controls: false,
  234.                                     async: true,
  235.                                     autoplay: true,
  236.                                     loop: true,
  237.                                     muted: true,
  238.                                     preload: true,
  239.                                     'uk-video': true,
  240.                                     class: "uk-video"
  241.                                 },
  242.                             }) }}
  243.                         {% endif %}
  244.                     </div>
  246.                     {% if pimcore_block('referencesBlock').elements %}
  247.                         <div class="uk-child-width-expand@l uk-child-width-1-6@m uk-child-width-1-3 uk-flex uk-flex-center uk-grid" uk-grid>
  248.                             {% for i in pimcore_block('referencesBlock').iterator %}
  249.                                 <div class="apk-banner-video-references">
  250.                                     {{ pimcore_image('reference', {'thumbnail' : 'partner-logo-transparent'}) }}
  251.                                 </div>
  252.                             {% endfor %}
  253.                         </div>
  254.                     {% endif %}
  255.                 </div>
  256.             </div>
  257.         </div>
  258.         
  259.         
  260.     </div>
  262. {% endif %}