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

Open in your IDE?
  4. {% if editmode %}
  6. <div class="uk-container apk-container-1400 uk-margin-medium">
  7.     <h2 class="uk-h2">Section banner + text + button</h2>
  8.     <ul uk-tab>
  9.         <li><a href="#">Configurations</a></li>
  10.         <li class="uk-active"><a href="#">Content Edit</a></li>
  11.     </ul>
  13.     <ul class="uk-switcher uk-margin">
  14.         <li>
  15.             <div>Type de heading pour le titre ?</div>
  16.             {{ pimcore_select("content-heading", {
  17.                 "store" : [
  18.                     ['span', 'span'],
  19.                     ['h1', 'Heading 1'],
  20.                     ['h2', 'Heading 2'],
  21.                     ['h3', 'Heading 3'],
  22.                     ['h4', 'Heading 4'],
  23.                     ['h5', 'Heading 5'],
  24.                     ['h6', 'Heading 6']
  25.                 ],
  26.                 "defaultValue" : "h2"
  27.             }) }}
  29.             <div><strong>Style</strong> du heading pour le titre ?</div>
  30.             {{ pimcore_select("content-heading-style", {
  31.                 "store" : [
  32.                     ['h1', 'Heading 1'],
  33.                     ['h2', 'Heading 2'],
  34.                     ['h3', 'Heading 3'],
  35.                     ['h4', 'Heading 4'],
  36.                     ['h5', 'Heading 5'],
  37.                     ['h6', 'Heading 6']
  38.                 ],
  39.                 "defaultValue" : "h2"
  40.             }) }}
  41.             
  42.             <div><strong>Position</strong> des textes</div>
  43.             {{ pimcore_select("text-position", {
  44.                 "store" : [
  45.                     ['uk-position-bottom-left', 'Bas gauche'],
  46.                     ['uk-position-bottom-center', 'Bas centré'],
  47.                     ['uk-position-bottom-right', 'Bas droit'],
  48.                     ['uk-position-center', 'Centré centré']
  49.                 ],
  50.                 "defaultValue" : "uk-position-bottom-left"
  51.             }) }}
  53.             <div>Couleur du texte</div>
  54.             {{ pimcore_select("text-color", {
  55.                 "store" : [
  56.                     ['uk-light', 'Blanc'],
  57.                     ['uk-dark', 'Noir'],
  58.                 ],
  59.                 "defaultValue" : "uk-light"
  60.             }) }}
  62.             <div>Couleur du bouton</div>
  63.             {{ pimcore_select("button-color", {
  64.                 "store" : [
  65.                     ['uk-button-black', 'Noir'],
  66.                     ['uk-button-white', 'Blanc'],
  67.                     ['', 'Orange']
  68.                 ],
  69.                 "defaultValue" : "uk-button-black"
  70.             }) }}
  71.             
  72.         </li>
  73.     
  74.         <li class="uk-active">
  75.             <div class="uk-margin-large-bottom">
  76.                 <div class="apk-content">
  77.                     <span class="uk-h4">Image en background (desktop)</span>
  78.                     {{ pimcore_image('bg-image') }}
  79.                     <span class="uk-h4">Image en background (mobile)</span>
  80.                     {{ pimcore_image('bg-image-mobile', {'width' : 600}) }}
  81.                     <h2 class="uk-h2">
  82.                         {{ pimcore_textarea("content-title",{
  83.                             "nl2br" : true,
  84.                             "placeholder" : "Titre (optionnel)"
  85.                         }) }}
  86.                     </h2>
  87.                     <div class="actions uk-margin-top">
  88.                         <span class="uk-h4">Lien (optionnel)</span>
  89.                         <div>
  90.                             {{ pimcore_link("content-btn", {
  91.                                 "class" : "uk-button"
  92.                             }) }}
  93.                         </div>
  94.                     </div>
  95.                 </div>
  96.             </div>
  97.         </li>
  98.     </ul>
  99. </div>
  101. {% else %}
  104. {% set buttonColor = pimcore_select("button-color").data %}
  106. {% set position = pimcore_select("text-position").data %}
  107. {% if position == "uk-position-bottom-left" %}
  108.     {% set alignment = "uk-text-left" %}
  109. {% elseif position == "uk-position-bottom-center" %}
  110.     {% set alignment = "uk-text-center" %}
  111. {% elseif position == "uk-position-bottom-right" %}
  112.     {% set alignment = "uk-text-right" %}
  113. {% endif %}
  115. <div class="apk-areabrick-container {{ pimcore_select("text-color") }}">
  116.     <div class="uk-container apk-container-1400">
  117.         <div class="apk-media">
  119.             {% set imgMobile = false %}
  120.             {% if not pimcore_image('bg-image-mobile').isEmpty %}
  121.                 {% set imgMobile = true %}
  122.             {% endif %}
  123.             
  124.             {% if pimcore_image('bg-image').src %}
  125.                 {{ pimcore_image('bg-image').thumbnail('background-image').html({'imgAttributes' : {'class' : (imgMobile ? 'image-desktop uk-visible@s' : '')}})|raw }}    
  126.             {% endif %}
  127.             
  128.             {% if imgMobile %}
  129.                 {% if pimcore_image('bg-image-mobile').src %}
  130.                     {{ pimcore_image('bg-image-mobile').thumbnail('background-image-mobile').html({'imgAttributes' : {'class' : 'image-mobile  uk-hidden@s'}})|raw }}    
  131.                 {% endif %}
  132.             {% endif %}
  134.             <div class="uk-height-1-1">
  135.                 <div class="uk-position-relative uk-height-1-1">
  137.                     <div class="apk-position {{ pimcore_select("text-position") }}">
  138.                         <div class="apk-content">
  140.                             {% if not pimcore_textarea("content-title").isEmpty %}
  141.                                 {% if pimcore_select("content-heading").getData() == 'span' %}
  142.                                     <span class="uk-h2">
  143.                                         {{ pimcore_textarea("content-title", {
  144.                                         "nl2br" : true})|raw }}
  145.                                     </span>
  146.                                 {% else %}
  147.                                     {% set content_heading = pimcore_select("content-heading").getData() %}
  148.                                     <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  149.                                         {{ pimcore_textarea("content-title", {
  150.                                         "nl2br" : true})|raw }}
  151.                                     </{{ content_heading }}>
  152.                                 {% endif %}
  153.                             {% endif %}
  155.                             {% if not pimcore_link("content-btn").isEmpty() %}
  156.                                 <div class="apk-actions">
  157.                                     {{ pimcore_link("content-btn", {
  158.                                         "class" : "uk-button uk-button-large " ~ buttonColor
  159.                                     }) }}
  160.                                 </div>
  161.                             {% endif %}
  163.                         </div>
  164.                     </div>
  165.                 </div>
  166.             </div>
  167.         </div>
  168.     </div>
  169. </div>
  170. {% endif %}