templates/areas/apk-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-center"
  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.                 }) }}
  65.                 
  66.                 <div>Position du texte</div>
  67.                 {{ pimcore_select("overlay-position", {
  68.                     "store" : [
  69.                         ['uk-position-top-left', 'Haut gauche'],
  70.                         ['uk-position-top-center', 'Haut centré'],
  71.                         ['uk-position-top-right', 'Haut droite'],
  72.                         ['uk-position-center-left', 'Centré gauche'],
  73.                         ['uk-position-center', 'Centré centré'],
  74.                         ['uk-position-center-right', 'Centré droit'],
  75.                         ['uk-position-bottom-left', 'Bas gauche'],
  76.                         ['uk-position-bottom-center', 'Bas centré'],
  77.                         ['uk-position-bottom-right', 'Bas droit'],
  78.                     ],
  79.                     "defaultValue" : "uk-position-top-center"
  80.                 }) }}
  82.                 <div>Espacement du texte par rapport aux bordures</div>
  83.                 {{ pimcore_select("overlay-spacing", {
  84.                     "store" : [
  85.                         ['uk-position', 'Collé'],
  86.                         ['uk-position-small', 'Petit'],
  87.                         ['uk-position-medium', 'Moyen'],
  88.                         ['uk-position-large', 'Grand'],
  89.                     ],
  90.                     "defaultValue" : "uk-position-small"
  91.                 }) }}
  93.             </div>
  95.             {# Colonne 2 #}
  96.             <div class="uk-width-1-2@m" uk-margin>
  98.                 <div>Largeur du container du texte</div>
  99.                 {{ pimcore_select("text-width", {
  100.                     "store" : [
  101.                         ['apk-container-200', '200px'],
  102.                         ['apk-container-300', '300px'],
  103.                         ['apk-container-400', '400px'],
  104.                         ['apk-container-500', '500px'],
  105.                         ['apk-container-600', '600px'],
  106.                         ['apk-container-700', '700px'],
  107.                         ['apk-container-800', '800px'],
  108.                         ['apk-container-900', '900px'],
  109.                         ['apk-container-1000', '1000px'],
  110.                         ['apk-container-1100', '1100px'],
  111.                     ],
  112.                     "defaultValue" : "apk-container-600"
  113.                 }) }}
  114.     
  115.                 <div>Hauteur du background</div>
  116.                 {{ pimcore_select("banner-height", {
  117.                     "store" : [
  118.                         ['apk-height-200', '200px'],
  119.                         ['apk-height-300', '300px'],
  120.                         ['apk-height-400', '400px'],
  121.                         ['apk-height-500', '500px'],
  122.                         ['apk-height-600', '600px'],
  123.                         ['apk-height-700', '700px'],
  124.                         ['apk-height-800', '800px'],
  125.                         ['apk-height-900', '900px'],
  126.                         ['apk-height-1000', '1000px'],
  127.                         ['apk-height-100vh', 'Hauteur de l\'écran'],
  128.                     ],
  129.                     "defaultValue" : "apk-height-600"
  130.                 }) }}
  131.                 
  132.                 <div>Position de l'image en cover</div>
  133.                 {{ pimcore_select("cover-position", {
  134.                     "store" : [
  135.                         ['apk-cover-top-left', 'Haut gauche'],
  136.                         ['apk-cover-top-center', 'Haut centré'],
  137.                         ['apk-cover-top-right', 'Haut droite'],
  138.                         ['apk-cover-center-left', 'Centré gauche'],
  139.                         ['apk-cover-center', 'Centré centré'],
  140.                         ['apk-cover-center-right', 'Centré droit'],
  141.                         ['apk-cover-bottom-left', 'Bas gauche'],
  142.                         ['apk-cover-bottom-center', 'Bas centré'],
  143.                         ['apk-cover-bottom-right', 'Bas droit'],
  144.                     ],
  145.                     "defaultValue" : "apk-cover-center"
  146.                 }) }}
  147.                 
  148.                 <div>Espacement en haut du block</div>
  149.                 {{ pimcore_select("margin-top", {
  150.                     "store" : [
  151.                         ['uk-padding-remove-top', 'Suppression du padding'],
  152.                         ['', 'Aucun'],
  153.                         ['uk-margin-small-top', 'Petit'],
  154.                         ['uk-margin-medium-top', 'Moyen'],
  155.                         ['uk-margin-large-top', 'Grand'],
  156.                         ['uk-margin-xlarge-top', 'Très grand'],
  157.                     ],
  158.                     "defaultValue" : ""
  159.                 }) }}
  160.     
  161.                 <div>Espacement en bas du block</div>
  162.                 {{ pimcore_select("margin-bottom", {
  163.                     "store" : [
  164.                         ['uk-padding-remove-bottom', 'Suppression du padding'],
  165.                         ['', 'Aucun'],
  166.                         ['uk-margin-small-bottom', 'Petit'],
  167.                         ['uk-margin-medium-bottom', 'Moyen'],
  168.                         ['uk-margin-large-bottom', 'Grand'],
  169.                         ['uk-margin-xlarge-bottom', 'Très grand'],
  170.                     ],
  171.                     "defaultValue" : ""
  172.                 }) }}
  173.                 
  174.             </div>
  176.         </li>
  177.     
  178.         <li class="uk-active">
  179.             <div class="uk-margin-large-bottom">
  181.                 {{ pimcore_image('bg-image') }}
  183.                 <div class="apk-content">
  184.                     <h2 class="uk-h2">
  185.                         {{ pimcore_textarea("content-title",{
  186.                             "nl2br" : true
  187.                         }) }}
  188.                     </h2>
  190.                     
  191.                     {{ pimcore_wysiwyg("content") }}
  193.                     <div class="actions">
  194.                         {{ pimcore_link("content-btn", {
  195.                             "class" : "uk-button"
  196.                         }) }}
  197.                     </div>
  198.                 </div>
  199.             </div>
  200.         </li>
  201.     </ul>
  202. </div>
  204. {% endif %}
  206. {% if not editmode %}
  208. <div class="apk-areabrick-container {{ pimcore_select("overlay-color").getData() }} {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}">
  209.     <div class="uk-cover-container {{ pimcore_select("banner-height") }}">
  210.         {% if pimcore_image('bg-image').src %}
  211.             {{ pimcore_image('bg-image').thumbnail('full-background').html({'imgAttributes' : {'uk-cover' : null}})|raw }}    
  212.         {% endif %}
  213.         <div class="{{ pimcore_select("overlay-position") }} {{ pimcore_select("overlay-spacing") }}">
  214.             <div class="uk-container apk-container-700">
  215.                 <div class="{{ pimcore_select("text-alignment") }}">
  216.                     
  217.                 {% if not pimcore_textarea("content-title").isEmpty %}
  218.                     {% if pimcore_select("content-heading").data == "span" %}
  219.                         <span class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  220.                             {{ pimcore_textarea("content-title", {
  221.                             "nl2br" : true})|raw }}
  222.                         </span>
  223.                     {% else %}
  224.                         {% set content_heading = pimcore_select("content-heading").getData() %}
  225.                         <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  226.                             {{ pimcore_textarea("content-title", {
  227.                             "nl2br" : true})|raw }}
  228.                         </{{ content_heading }}>
  229.                     {% endif %}
  230.                 {% endif %}
  231.         
  232.                 <div class="apk-content">
  233.                     {{ pimcore_wysiwyg("content") }}
  234.                 </div>
  235.                 
  236.         
  237.                 {% if not pimcore_link("content-btn").isEmpty() %}
  238.                     <div class="actions">
  239.                         {{ pimcore_link("content-btn", {
  240.                             "class" : "uk-button"
  241.                         }) }}
  242.                     </div>
  243.                 {% endif %}
  244.                 </div>
  245.         
  246.             </div>
  247.         </div>
  248.     </div>
  249.     
  250.     
  251. </div>
  253. {% endif %}