templates/areas/apk-title-content/view.html.twig line 1

Open in your IDE?
  2. {% if editmode %}
  4. <div class="uk-container apk-container-1400 uk-margin-medium">
  5.     <h2 class="uk-h2">TITLE + CONTENT</h2>
  6.     <ul class="uk-tab" uk-tab>
  7.         <li><a href="#">Configurations</a></li>
  8.         <li class="uk-active"><a href="#">Content Edit</a></li>
  9.     </ul>
  11.     <ul class="uk-switcher uk-margin">
  12.         <li>
  13.             <div>Type de heading pour le titre ?</div>
  14.             {{ pimcore_select("content-heading", {
  15.                 "store" : [
  16.                     ['span', 'span'],
  17.                     ['h2', 'Heading 2'],
  18.                     ['h3', 'Heading 3'],
  19.                     ['h4', 'Heading 4'],
  20.                     ['h5', 'Heading 5'],
  21.                     ['h6', 'Heading 6']
  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.                     ['h2', 'Heading 2'],
  30.                     ['h3', 'Heading 3'],
  31.                     ['h4', 'Heading 4'],
  32.                     ['h5', 'Heading 5'],
  33.                     ['h6', 'Heading 6']
  34.                 ],
  35.                 "defaultValue" : "h2"
  36.             }) }}
  37.             
  38.             <div><strong>Alignement</strong> du titre</div>
  39.             {{ pimcore_select("text-align", {
  40.                 "store" : [
  41.                     ['uk-text-center', 'Centr??'],
  42.                     ['uk-text-left', 'Gauche'],
  43.                     ['uk-text-right', 'Droite']
  44.                 ],
  45.                 "defaultValue" : "uk-text-left"
  46.             }) }}
  48.             <div>Taille du container</div>
  49.             {{ pimcore_select("container-width", {
  50.                 "store" : [
  51.                     ['apk-container-1400', '1400px (default)'],
  52.                     ['apk-container-1300', '1300px'],
  53.                     ['apk-container-1200', '1200px'],
  54.                     ['apk-container-1100', '1100px'],
  55.                     ['apk-container-1000', '1000px'],
  56.                     ['apk-container-900', '900px'],
  57.                     ['apk-container-800', '800px'],
  58.                 ],
  59.                 "defaultValue" : "apk-container-1400"
  60.             }) }}
  62.             <div>Espacement en haut du block</div>
  63.             {{ pimcore_select("margin-top", {
  64.                 "store" : [
  65.                     ['uk-padding-remove-top', 'Suppression du padding'],
  66.                     ['', 'Aucun'],
  67.                     ['uk-margin-small-top', 'Petit'],
  68.                     ['uk-margin-medium-top', 'Moyen'],
  69.                     ['uk-margin-large-top', 'Grand'],
  70.                     ['uk-margin-xlarge-top', 'Tr??s grand'],
  71.                 ],
  72.                 "defaultValue" : ""
  73.             }) }}
  75.             <div>Espacement en bas du block</div>
  76.             {{ pimcore_select("margin-bottom", {
  77.                 "store" : [
  78.                     ['uk-padding-remove-bottom', 'Suppression du padding'],
  79.                     ['', 'Aucun'],
  80.                     ['uk-margin-small-bottom', 'Petit'],
  81.                     ['uk-margin-medium-bottom', 'Moyen'],
  82.                     ['uk-margin-large-bottom', 'Grand'],
  83.                     ['uk-margin-xlarge-bottom', 'Tr??s grand'],
  84.                 ],
  85.                 "defaultValue" : ""
  86.             }) }}
  88.         </li>
  89.     
  90.         <li class="uk-active">
  91.             <div class="uk-margin-large-bottom">
  92.                 <b>Repeater</b>
  93.                 {% for i in pimcore_block('block').iterator %}
  94.                 <div class="apk-content">
  95.                     <div class="uk-dark uk-alert" uk-alert>
  96.                         <h2 class="uk-h2">
  97.                             {{ pimcore_textarea("content-title",{
  98.                                 "nl2br" : true,
  99.                                 "placeholder" : "Titre"
  100.                             }) }}
  101.                         </h2>
  102.                         <div><span class="uk-h4">Contenu</span></div>
  103.                         {% for i in pimcore_block('contentBlock').iterator %}
  104.                             <div class="uk-alert uk-alert-default" uk-alert>
  105.                                 <div class="uk-margin"><b>sous-titre</b></div>
  106.                                 {{ pimcore_input("content-subtitle") }}
  107.                                 <div class="uk-margin"><b>texte</b></div>
  108.                                 {{ pimcore_wysiwyg("content") }}
  109.                             </div>
  110.                         {% endfor %}
  111.                     </div>
  112.                 </div>
  113.                 {% endfor %}
  114.             </div>
  115.             <div class="uk-alert uk-alert-primary" uk-alert>
  116.                 <div class="uk-margin-top uk-margin-bottom uk-text-center">
  117.                     {{ pimcore_link('demo-link', {'class' : 'uk-button uk-button-primary'}) }}
  118.                 </div>
  119.             </div>
  120.         </li>
  121.     </ul>
  122. </div>
  124. {% endif %}
  125. {% set content_heading = pimcore_select("content-heading").getData() ?: 'h2' %}
  126. {% if content_heading == 'h1' %}
  127.     {% set content_heading = 'h2' %}
  128. {% endif %}
  129. {% set contentHeadingStyle = pimcore_select("content-heading-style").getData() %}
  130. {% if not editmode %}
  132. <div class="apk-areabrick-container {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}">
  133.     <div class="{{ pimcore_select("text-align") }}" uk-height-match="target: .content; row: false">
  134.         
  135.         {% for i in pimcore_block('block').iterator %}
  136.         <div class="apk-grid-container">
  137.             <div class="apk-grid-container-inner">
  138.                 <div class="uk-container {{ pimcore_select("container-width") }}">
  139.                     <div class="uk-grid uk-grid-collapse" uk-grid>
  140.                         <div class="uk-width-1-3@m uk-flex uk-flex-center@m uk-flex-left uk-flex-middle">
  141.                             <div class="title">
  142.                             {% if not pimcore_textarea("content-title").isEmpty() %}
  143.                                 {% if content_heading == 'span' %}
  144.                                     <span class="uk-h2">
  145.                                         {{ pimcore_textarea("content-title", {
  146.                                         "nl2br" : true})|raw }}
  147.                                     </span>
  148.                                 {% else %}
  149.                                     <{{ content_heading }} class="uk-{{ contentHeadingStyle }}">
  150.                                         {{ pimcore_textarea("content-title", {
  151.                                         "nl2br" : true})|raw }}
  152.                                     </{{ content_heading }}>
  153.                                 {% endif %}
  154.                             {% endif %}
  155.                             </div>
  156.                         </div>
  157.                         <div class="uk-width-2-3@m">
  158.                             <div class="content">
  159.                                 <div>
  160.                                     {% for i in pimcore_block('contentBlock').iterator %}
  161.                                     <div class="subtitle">
  162.                                         {{ pimcore_input("content-subtitle") }}
  163.                                     </div>
  164.                                     {{ pimcore_wysiwyg("content") }}
  165.                                 {% endfor %}
  166.                                 </div>
  167.                             </div>
  168.                         </div>
  169.                     </div>
  170.                 </div>
  171.             </div>
  172.         </div>
  173.         {% endfor %}
  174.     </div>
  175.     <div class="apk-action">
  176.         {{ pimcore_link('demo-link', {'class' : 'uk-button uk-button-primary'}) }}
  177.     </div>
  179. </div>
  181. {% endif %}