templates/areas/apk-container-image-border/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  3. <div class="uk-container apk-container-1400">
  4.     <div uk-alert>
  5.         <h1 class="uk-h1">APK CONTAINER IMAGE BORDER</h1>
  6.     </div>
  7.     <ul uk-tab>
  8.         <li><a href="#">Configurations</a></li>
  9.         <li class="uk-active"><a href="#">Edition</a></li>
  10.     </ul>
  12.     <ul class="uk-switcher uk-margin">
  13.         <li class="apk-size-20 uk-grid-small" uk-grid>
  14.             {# Colonne 1 #}
  15.             <div class="uk-width-1-2@m" uk-margin>
  17.                 <div>Type de heading pour le titre ?</div>
  18.                 {{ pimcore_select("content-heading", {
  19.                     "store" : [
  20.                         ['h1', 'Heading 1'],
  21.                         ['h2', 'Heading 2'],
  22.                     ],
  23.                     "defaultValue" : "h2"
  24.                 }) }}
  26.                 <div><strong>Style</strong> du heading pour le titre ?</div>
  27.                 {{ pimcore_select("content-heading-style", {
  28.                     "store" : [
  29.                         ['h1', 'Heading 1'],
  30.                         ['h2', 'Heading 2'],
  31.                     ],
  32.                     "defaultValue" : "h2"
  33.                 }) }}
  35.                 <div>Couleur du contenair</div>
  36.                 {{ pimcore_select("theme-color", {
  37.                     "store" : [
  38.                         ['', 'Classique'],
  39.                         ['apk-orange', 'Orange'],
  40.                         ['apk-bleu', 'Bleu'],
  41.                         ['apk-vert', 'Vert'],
  42.                     ],
  43.                     "defaultValue" : ""
  44.                 }) }}
  45.             
  47.             </div>
  49.             {# Colonne 2 #}
  50.             <div class="uk-width-1-2@m" uk-margin>
  51.                 
  52.                 <div>Espacement en haut du block</div>
  53.                 {{ pimcore_select("margin-top", {
  54.                     "store" : [
  55.                         ['uk-padding-remove-top', 'Suppression du padding'],
  56.                         ['', 'Aucun'],
  57.                         ['uk-margin-small-top', 'Petit'],
  58.                         ['uk-margin-medium-top', 'Moyen'],
  59.                         ['uk-margin-large-top', 'Grand'],
  60.                         ['uk-margin-xlarge-top', 'Très grand'],
  61.                     ],
  62.                     "defaultValue" : ""
  63.                 }) }}
  64.     
  65.                 <div>Espacement en bas du block</div>
  66.                 {{ pimcore_select("margin-bottom", {
  67.                     "store" : [
  68.                         ['uk-padding-remove-bottom', 'Suppression du padding'],
  69.                         ['', 'Aucun'],
  70.                         ['uk-margin-small-bottom', 'Petit'],
  71.                         ['uk-margin-medium-bottom', 'Moyen'],
  72.                         ['uk-margin-large-bottom', 'Grand'],
  73.                         ['uk-margin-xlarge-bottom', 'Très grand'],
  74.                     ],
  75.                     "defaultValue" : ""
  76.                 }) }}
  77.                 
  78.             </div>
  80.         </li>
  81.     
  82.         <li class="uk-active">
  83.             <div class="uk-margin-large-bottom">
  85.                 <div>Image</div>
  86.                 {{ pimcore_image('content-image', {
  87.                     width: 300,
  88.                 }) }}
  90.                 <div>Titre</div>
  91.                 <h2 class="uk-h2">
  92.                     {{ pimcore_textarea("content-title",{
  93.                         "nl2br" : true
  94.                     }) }}
  95.                 </h2>
  96.                 
  97.                 <div>Texte</div>
  98.                 {{ pimcore_textarea("content",{
  99.                     "nl2br" : true
  100.                 }) }}
  102.                 <div>Lien</div>
  103.                 <div>
  104.                     {{ pimcore_link("content-btn", {
  105.                         "class" : "uk-button"
  106.                     }) }}
  107.                 </div>
  108.                 
  109.             </div>
  110.         </li>
  111.     </ul>
  112. </div>
  114. {% else %}
  116. <div class="apk-section-container-image-border {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}">
  118.     <div class="uk-container apk-container-1400">
  120.         {% if not pimcore_image("content-image").isEmpty() %}
  121.         <div class="apk-container-image uk-position-relative">
  122.             <div class="apk-container-content {{ pimcore_select("theme-color") }}">
  123.                 <div class="uk-grid-small" uk-grid>
  124.                     <div class="uk-width-2-3@s">
  125.                         <div class="apk-content">
  126.                         {% if not pimcore_textarea("content-title").isEmpty %}
  127.                             {% if pimcore_select("content-heading").data == "span" %}
  128.                                 <span class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  129.                                     {{ pimcore_textarea("content-title", {
  130.                                     "nl2br" : true})|raw }}
  131.                                 </span>
  132.                             {% else %}
  133.                                 {% set content_heading = pimcore_select("content-heading").getData() %}
  134.                                 <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  135.                                     {{ pimcore_textarea("content-title", {
  136.                                     "nl2br" : true})|raw }}
  137.                                 </{{ content_heading }}>
  138.                             {% endif %}
  139.                         {% endif %}
  141.                     
  142.                             <p>
  143.                             {{ pimcore_textarea("content",{
  144.                                 "nl2br" : true
  145.                             }) }}
  146.                             </p>
  147.                         
  149.                             {% if not pimcore_link("content-btn").isEmpty() %}
  150.                             <div class="uk-text-right">
  151.                                 {{ pimcore_link("content-btn", {
  152.                                     "class" : "uk-button"
  153.                                 }) }}
  154.                             </div>
  155.                             {% endif %}
  156.                         </div>
  157.                     </div>
  158.                 
  159.                     <div class="uk-width-1-3@s uk-flex-first@s">
  160.                         {{ pimcore_image("content-image").thumbnail("global-image").html()|raw }}
  161.                     </div>
  162.                 </div>
  163.             </div>
  165.             <div class="apk-border {{ pimcore_select("theme-color") }}"></div>
  167.         </div>
  168.         {% else %}
  170.         <div class="apk-container-no-image uk-position-relative">
  171.             <div class="apk-content {{ pimcore_select("theme-color") }}">
  172.                 {% if not pimcore_textarea("content-title").isEmpty %}
  173.                     {% if pimcore_select("content-heading").data == "span" %}
  174.                         <span class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  175.                             {{ pimcore_textarea("content-title", {
  176.                             "nl2br" : true})|raw }}
  177.                         </span>
  178.                     {% else %}
  179.                         {% set content_heading = pimcore_select("content-heading").getData() %}
  180.                         <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  181.                             {{ pimcore_textarea("content-title", {
  182.                             "nl2br" : true})|raw }}
  183.                         </{{ content_heading }}>
  184.                     {% endif %}
  185.                 {% endif %}
  187.                 <p>
  188.                 {{ pimcore_textarea("content",{
  189.                     "nl2br" : true
  190.                 }) }}
  191.                 </p>
  192.                 
  194.                 {% if not pimcore_link("content-btn").isEmpty() %}
  195.                     <div class="uk-text-right">
  196.                         {{ pimcore_link("content-btn", {
  197.                             "class" : "uk-button uk-button-orange"
  198.                         }) }}
  199.                     </div>
  200.                 {% endif %}
  201.             </div>
  203.             <div class="apk-border {{ pimcore_select("theme-color") }}"></div>
  205.         </div>
  206.         {% endif %}
  208.     </div>
  210. </div>
  212. {% endif %}