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

Open in your IDE?
  4. {% if editmode %}
  6. <div class="uk-container apk-container-1400">
  7.     <div uk-alert>
  8.         <h1 class="uk-h1">APK BANNER TEXT</h1>
  9.     </div>
  10.     <ul 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>
  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.                         ['h1', 'Heading 1'],
  25.                         ['h2', 'Heading 2'],
  26.                         ['h3', 'Heading 3'],
  27.                         ['h4', 'Heading 4'],
  28.                         ['h5', 'Heading 5'],
  29.                         ['h6', 'Heading 6']
  30.                     ],
  31.                     "defaultValue" : "h2"
  32.                 }) }}
  34.                 <div><strong>Style</strong> du heading pour le titre ?</div>
  35.                 {{ pimcore_select("content-heading-style", {
  36.                     "store" : [
  37.                         ['h1', 'Heading 1'],
  38.                         ['h2', 'Heading 2'],
  39.                         ['h3', 'Heading 3'],
  40.                         ['h4', 'Heading 4'],
  41.                         ['h5', 'Heading 5'],
  42.                         ['h6', 'Heading 6']
  43.                     ],
  44.                     "defaultValue" : "h2"
  45.                 }) }}
  47.                 <div><strong>Alignement</strong> du texte</div>
  48.                 {{ pimcore_select("text-alignment", {
  49.                     "store" : [
  50.                         ['uk-text-left', 'Gauche'],
  51.                         ['uk-text-right', 'Droite'],
  52.                         ['uk-text-center', 'Centré'],
  53.                     ],
  54.                     "defaultValue" : "uk-text-left"
  55.                 }) }}
  57.                 <div>Couleur du texte</div>
  58.                 {{ pimcore_select("overlay-color", {
  59.                     "store" : [
  60.                         ['uk-dark', 'Foncé'],
  61.                         ['uk-light', 'Clair']
  62.                     ],
  63.                     "defaultValue" : "uk-dark"
  64.                 }) }}
  66.             </div>
  68.             {# Colonne 2 #}
  69.             <div class="uk-width-1-2@m" uk-margin>
  70.     
  71.                 <div>Largeur du container du texte</div>
  72.                 {{ pimcore_select("text-width", {
  73.                     "store" : [
  74.                         ['apk-container-200', '200px'],
  75.                         ['apk-container-300', '300px'],
  76.                         ['apk-container-400', '400px'],
  77.                         ['apk-container-500', '500px'],
  78.                         ['apk-container-600', '600px'],
  79.                         ['apk-container-700', '700px'],
  80.                         ['apk-container-800', '800px'],
  81.                         ['apk-container-900', '900px'],
  82.                         ['apk-container-1000', '1000px'],
  83.                         ['apk-container-1100', '1100px'],
  84.                     ],
  85.                     "defaultValue" : "apk-container-600"
  86.                 }) }}
  89.                 <div>Position de l'image en cover</div>
  90.                 {{ pimcore_select("cover-position", {
  91.                     "store" : [
  92.                         ['apk-cover-top-left', 'Haut gauche'],
  93.                         ['apk-cover-top-center', 'Haut centré'],
  94.                         ['apk-cover-top-right', 'Haut droite'],
  95.                         ['apk-cover-center-left', 'Centré gauche'],
  96.                         ['apk-cover-center', 'Centré centré'],
  97.                         ['apk-cover-center-right', 'Centré droit'],
  98.                         ['apk-cover-bottom-left', 'Bas gauche'],
  99.                         ['apk-cover-bottom-center', 'Bas centré'],
  100.                         ['apk-cover-bottom-right', 'Bas droit'],
  101.                     ],
  102.                     "defaultValue" : "apk-cover-center"
  103.                 }) }}
  105.                 <div>Espacement en haut du block</div>
  106.                 {{ pimcore_select("margin-top", {
  107.                     "store" : [
  108.                         ['', 'Aucun'],
  109.                         ['uk-margin-small-top', 'Petit'],
  110.                         ['uk-margin-medium-top', 'Moyen'],
  111.                         ['uk-margin-large-top', 'Grand'],
  112.                         ['uk-margin-xlarge-top', 'Très grand'],
  113.                     ],
  114.                     "defaultValue" : ""
  115.                 }) }}
  116.     
  117.                 <div>Espacement en bas du block</div>
  118.                 {{ pimcore_select("margin-bottom", {
  119.                     "store" : [
  120.                         ['', 'Aucun'],
  121.                         ['uk-margin-small-top', 'Petit'],
  122.                         ['uk-margin-medium-top', 'Moyen'],
  123.                         ['uk-margin-large-top', 'Grand'],
  124.                         ['uk-margin-xlarge-top', 'Très grand'],
  125.                     ],
  126.                     "defaultValue" : ""
  127.                 }) }}
  128.                 
  129.             </div>
  131.         </li>
  132.     
  133.         <li class="uk-active">
  134.             <div class="uk-margin-large-bottom">
  135.                 <div class="uk-margin-small-bottom"><strong>Image de background</strong></div>
  136.                 {{ pimcore_image('bg-image') }}
  138.                 <div class="uk-margin-small-bottom"><strong>Image de background (version mobile)</strong></div>
  139.                 {{ pimcore_image('bg-image-mobile') }}
  141.                 <div class="uk-margin"><strong>Image du logo</strong></div>
  142.                 {{ pimcore_image('logo-image', {'width' : 300 }) }}
  144.                 <div class="uk-margin"><strong>Titre de la section</strong></div>
  145.                 <h2 class="uk-h2">
  146.                     {{ pimcore_textarea("content-title",{
  147.                         "nl2br" : true
  148.                     }) }}
  149.                 </h2>
  151.                 <div class="uk-margin"><strong>Contenu</strong></div>
  152.                 {{ pimcore_wysiwyg("content") }}
  154.                 <div class="uk-margin"><strong>Bouton (optionnel)</strong></div>
  155.                 <div class="actions">
  156.                     {{ pimcore_link("content-btn", {
  157.                         "class" : "uk-button"
  158.                     }) }}
  159.                     <hr>
  160.                     <dt>Google Analytics Event: Action</dt>
  161.                     <dd>{{ pimcore_input("content-btn-secondary-ga-1-1") }}</dd>
  162.                     <hr>
  163.                     <dt>Google Analytics Event: Category</dt>
  164.                     <dd>{{ pimcore_input("content-btn-secondary-ga-1-2") }}</dd>
  165.                     <hr>
  166.                     <dt>Google Analytics Event: Label</dt>
  167.                     <dd>{{ pimcore_input("content-btn-secondary-ga-1-3") }}</dd>
  168.                 </div>
  169.             </div>
  170.         </li>
  171.     </ul>
  172. </div>
  174. {% endif %}
  176. {% if not editmode %}
  178. <div class="apk-areabrick-container {{ pimcore_select("overlay-color").getData() }} {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}">
  179.     <div class="uk-cover-container uk-flex uk-flex-middle {{ pimcore_select("cover-position") }}">
  180.         {% if pimcore_image('bg-image').src %}
  181.             {#<img src="{{ base_64(app.request.getSchemeAndHttpHost ,pimcore_image('bg-image').thumbnail('full-background'))|raw }}" alt="" uk-cover>#}    
  182.             {{ pimcore_image('bg-image').thumbnail('full-background').html({'imgAttributes' : {'uk-cover' : null, 'class': 'uk-visible@m'}})|raw }}
  183.         {% endif %}
  184.         {% if pimcore_image('bg-image-mobile').src %}
  185.             {{ pimcore_image('bg-image-mobile').thumbnail('full-background').html({'imgAttributes' : {'uk-cover' : null, 'class': 'uk-hidden@m'}})|raw }}
  186.         {% endif %}
  187.         <div class="uk-container apk-container-1400">
  188.             <div class="uk-position-relative uk-height-1-1">
  190.                 <div class="uk-flex uk-flex-middle">
  191.                     <div class="{{ pimcore_select('text-width').data }}">
  193.                         {% if pimcore_image('logo-image').src %}
  194.                         <div class="apk-logo">
  195.                             {{ pimcore_image('logo-image').thumbnail('big-logo').html()|raw }}
  196.                         </div>    
  197.                         {% endif %}
  198.                         
  199.                         <div class="{{ pimcore_select("text-alignment") }}">
  200.                             
  201.                             {% if not pimcore_textarea("content-title").isEmpty %}
  202.                                 {% if pimcore_select("content-heading").data == "span" %}
  203.                                     <span class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  204.                                         {{ pimcore_textarea("content-title", {
  205.                                         "nl2br" : true})|raw }}
  206.                                     </span>
  207.                                 {% else %}
  208.                                     {% set content_heading = pimcore_select("content-heading").getData() %}
  209.                                     <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  210.                                         {{ pimcore_textarea("content-title", {
  211.                                         "nl2br" : true})|raw }}
  212.                                     </{{ content_heading }}>
  213.                                 {% endif %}
  214.                             {% endif %}
  215.                     
  216.                             <div class="apk-content">
  217.                                 {{ pimcore_wysiwyg("content") }}
  218.                             </div>
  219.                     
  220.                             {% if not pimcore_link("content-btn").isEmpty() %}
  221.                             <div class="actions">
  222.                                 {% if
  223.                                     not pimcore_input("content-btn-secondary-ga-1-1").isEmpty
  224.                                     and not pimcore_input("content-btn-secondary-ga-1-2").isEmpty 
  225.                                     and not pimcore_input("content-btn-secondary-ga-1-3").isEmpty 
  226.                                 %}
  228.                                     {{ pimcore_link("content-btn", {
  229.                                         "class" : "uk-button",
  230.                                         "onclick" : "javascript:sendGtagEvent('" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-1")) ~ "',
  231.                                             '" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-2")) ~ "',
  232.                                             '" ~ add_slashes(pimcore_input("content-btn-secondary-ga-1-3")) ~ "');"
  233.                                     }) }}
  235.                                 {% else %}
  236.                                 
  237.                                     {{ pimcore_link("content-btn", {
  238.                                         "class" : "uk-button"
  239.                                     }) }}
  240.                                 
  241.                                 {% endif %}
  242.                             </div>
  243.                             {% endif %}
  244.                         </div>
  245.                     </div>
  246.                 </div>
  247.             </div>
  248.         </div>
  249.     </div>
  250.     
  251.     
  252. </div>
  254. {% endif %}