templates/areas/apk-wysiwyg-image/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 wysiwyg image</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>Répartition de la grille Image/texte</div>
  16.             {{ pimcore_select("content-grid-rules", {
  17.                 "store" : [
  18.                     ['grid-type-1', '1/2 | 1/2'],
  19.                     ['grid-type-2', '2/5 | 3/5'],
  20.                     ['grid-type-3', '1/3 | 2/3'],
  21.                     ['grid-type-4', '2/3 | 1/3'],
  22.                     ['grid-type-5', 'auto | expand'],
  23.                     ['grid-type-6', 'expand | auto'],
  24.                     ['grid-type-7', '3/5 | 2/5'],
  25.                 ],
  26.                 "defaultValue" : "grid-type-1"
  27.             }) }}
  29.             <div>Type de heading pour le titre ?</div>
  30.             {{ pimcore_select("content-heading", {
  31.                 "store" : [
  32.                     ['span', 'span'],
  33.                     ['h1', 'Heading 1'],
  34.                     ['h2', 'Heading 2'],
  35.                     ['h3', 'Heading 3'],
  36.                     ['h4', 'Heading 4'],
  37.                     ['h5', 'Heading 5'],
  38.                     ['h6', 'Heading 6']
  39.                 ],
  40.                 "defaultValue" : "h2"
  41.             }) }}
  43.             <div><strong>Style</strong> du heading pour le titre ?</div>
  44.             {{ pimcore_select("content-heading-style", {
  45.                 "store" : [
  46.                     ['h1', 'Heading 1'],
  47.                     ['h2', 'Heading 2'],
  48.                     ['h3', 'Heading 3'],
  49.                     ['h4', 'Heading 4'],
  50.                     ['h5', 'Heading 5'],
  51.                     ['h6', 'Heading 6']
  52.                 ],
  53.                 "defaultValue" : "h2"
  54.             }) }}
  56.             <div>Position de l'image et du texte</div>
  57.             {{ pimcore_select("image-text-position", {
  58.                 "store" : [
  59.                     ['img-left', 'Image à gauche / texte à droite'],
  60.                     ['img-right', 'Image à droite / texte à gauche']
  61.                 ],
  62.                 "defaultValue" : "img-left"
  63.             }) }}
  65.             <div><strong>Alignement</strong> du titre</div>
  66.             {{ pimcore_select("title-align", {
  67.                 "store" : [
  68.                     ['uk-text-left', 'Gauche'],
  69.                     ['uk-text-center', 'Centré'],
  70.                     ['uk-text-right', 'Droite']
  71.                 ],
  72.                 "defaultValue" : "uk-text-left"
  73.             }) }}
  75.             <div><strong>Alignement</strong> du texte</div>
  76.             {{ pimcore_select("text-align", {
  77.                 "store" : [
  78.                     ['uk-text-center', 'Centré'],
  79.                     ['uk-text-left', 'Gauche'],
  80.                     ['uk-text-right', 'Droite']
  81.                 ],
  82.                 "defaultValue" : "uk-text-center"
  83.             }) }}
  85.             <div>Titre séparé du texte ?</div>
  86.             {{ pimcore_select("text-separation", {
  87.                 "store" : [
  88.                     ['separated', 'Oui'],
  89.                     ['grouped', 'Non']
  90.                 ],
  91.                 "defaultValue" : "separated"
  92.             }) }}
  94.             <div><strong>Couleur</strong> du background</div>
  95.             {{ pimcore_select("bg-color", {
  96.                 "store" : [
  97.                     ['uk-light', 'Noir'],
  98.                     ['uk-dark', 'Blanc']
  99.                 ],
  100.                 "defaultValue" : "uk-light"
  101.             }) }}
  103.             <div>Couleur du bouton</div>
  104.             {{ pimcore_select("button-color", {
  105.                 "store" : [
  106.                     ['is-black', 'Noir'],
  107.                     ['is-white', 'Blanc'],
  108.                     ['is-orange', 'Orange']
  109.                 ],
  110.                 "defaultValue" : "is-black"
  111.             }) }}
  112.             
  114.         </li>
  116.         {% endif %}
  117.             {% set imgTextPosition = pimcore_select("image-text-position").data %}
  118.             {% if imgTextPosition == 'img-left' %}
  119.                 {% set ImgTextPositionCode = 'uk-flex-first@m' %}
  120.             {% else %}
  121.                 {% set ImgTextPositionCode = '' %}
  122.             {% endif %}
  123.     
  124.             {% set content_grid_value = pimcore_select("content-grid-rules").getData() %}
  125.             {% if content_grid_value == 'grid-type-1' %}
  126.                 {% set grid_left_class = 'uk-width-1-2@m' %}
  127.                 {% set grid_right_class = 'uk-width-1-2@m' %}
  128.             {% elseif content_grid_value == 'grid-type-2' %}
  129.                 {% set grid_left_class = 'uk-width-2-5@m' %}
  130.                 {% set grid_right_class = 'uk-width-3-5@m' %}
  131.             {% elseif content_grid_value == 'grid-type-3' %}
  132.                 {% set grid_left_class = 'uk-width-1-3@m' %}
  133.                 {% set grid_right_class = 'uk-width-2-3@m' %}
  134.             {% elseif content_grid_value == 'grid-type-4' %}
  135.                 {% set grid_left_class = 'uk-width-2-3@m' %}
  136.                 {% set grid_right_class = 'uk-width-1-3@m' %}
  137.             {% elseif content_grid_value == 'grid-type-5' %}
  138.                 {% set grid_left_class = 'uk-width-auto@m' %}
  139.                 {% set grid_right_class = 'uk-width-expand@m' %}
  140.             {% elseif content_grid_value == 'grid-type-6' %}
  141.                 {% set grid_left_class = 'uk-width-expand@m' %}
  142.                 {% set grid_right_class = 'uk-width-auto@m' %}
  143.             {% elseif content_grid_value == 'grid-type-7' %}
  144.                 {% set grid_left_class = 'uk-width-3-5@m' %}
  145.                 {% set grid_right_class = 'uk-width-2-5@m' %}
  146.             {% endif %}
  148.         {% if editmode %}
  149.     
  150.         <li class="uk-active">
  151.             <div class="{{ pimcore_select("bg-color").data }}">
  153.                 {% if pimcore_select("text-separation").data == "separated" %}
  154.                     <div class="{{ pimcore_select("title-align").data }}">
  155.                         <h2 class="uk-h2">
  156.                             {{ pimcore_textarea("content-title",{
  157.                                 "nl2br" : true
  158.                             }) }}
  159.                         </h2>
  160.                     </div>
  161.                 {% endif %}
  162.                 <div class="uk-grid-large uk-margin-large-bottom uk-grid" uk-grid>
  163.                     <div class="{{ grid_left_class }} apk-media">
  164.                         {{ pimcore_image("content-figure") }}
  165.                         <div class="actions uk-margin-top">
  166.                             <span class="uk-h4">Lien (optionnel)</span>
  167.                             {{ pimcore_link("content-btn") }}
  168.                         </div>
  169.                     </div>
  170.                     <div class="{{ grid_right_class }} apk-content">
  171.                         {% if pimcore_select("text-separation").data != "separated" %}
  172.                         <div class="{{ pimcore_select("title-align").data }}">
  173.                             <h2 class="uk-h2">
  174.                                 {{ pimcore_textarea("content-title",{
  175.                                     "nl2br" : true
  176.                                 }) }}
  177.                             </h2>
  178.                         </div>
  179.                         {% endif %}
  180.                         <div class="{{ pimcore_select("text-align").data }}">
  181.                             {{ pimcore_wysiwyg("content") }}
  182.                         </div>
  183.                     </div>
  184.                 </div>
  185.             </div>
  186.         </li>
  187.     </ul>
  188. </div>
  190. {% endif %}
  192. {% set buttonColor = pimcore_select("button-color").data %}
  194. {% if not editmode %}
  196. <div class="apk-areabrick-container {{ pimcore_select("bg-color").data }}">
  197.     <div class="uk-container apk-container-1400">
  198.         {% if pimcore_select("text-separation").data == "separated" %}
  199.             <div class="{{ pimcore_select("title-align") }}">
  200.                 {% if not pimcore_textarea("content-title").isEmpty %}
  201.                     {% if pimcore_select("content-heading").getData() == 'span' %}
  202.                         <span class="uk-h2">
  203.                             {{ pimcore_textarea("content-title", {
  204.                             "nl2br" : true})|raw }}
  205.                         </span>
  206.                     {% else %}
  207.                         {% set content_heading = pimcore_select("content-heading").getData() %}
  208.                         <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  209.                             {{ pimcore_textarea("content-title", {
  210.                             "nl2br" : true})|raw }}
  211.                         </{{ content_heading }}>
  212.                     {% endif %}
  213.                 {% endif %}
  214.             </div>
  215.         {% endif %}
  216.         <div class="uk-grid-medium uk-margin-medium-top uk-grid" uk-grid>
  217.             <div class="{{ grid_right_class }} uk-flex uk-flex-middle">
  218.                 <div>
  219.                     {% if pimcore_select("text-separation").data != "separated" %}
  220.                     <div class="{{ pimcore_select("title-align") }}">
  221.                         {% if not pimcore_textarea("content-title").isEmpty %}
  222.                             {% if pimcore_select("content-heading").getData() == 'span' %}
  223.                                 <span class="uk-h2">
  224.                                     {{ pimcore_textarea("content-title", {
  225.                                     "nl2br" : true})|raw }}
  226.                                 </span>
  227.                             {% else %}
  228.                                 {% set content_heading = pimcore_select("content-heading").getData() %}
  229.                                 <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  230.                                     {{ pimcore_textarea("content-title", {
  231.                                     "nl2br" : true})|raw }}
  232.                                 </{{ content_heading }}>
  233.                             {% endif %}
  234.                         {% endif %}
  235.                     </div>
  236.                     {% endif %}
  237.                     <div class="{{ pimcore_select("text-align") }}">
  239.                         {{ pimcore_wysiwyg("content") }}
  241.                     </div>
  242.                 </div>
  243.             </div>
  244.             <div class="{{ grid_left_class }} {{ ImgTextPositionCode }} apk-media uk-text-center">
  245.                 {% if not pimcore_image("content-figure").isEmpty() %}
  246.                 <div class="uk-position-relative">
  248.                     {% if pimcore_link("content-btn").href %}
  249.                         <a href="{{ pimcore_link("content-btn").href }}" target="{{ pimcore_link("content-btn").target }}">
  250.                     {% endif %}
  252.                     {{ pimcore_image("content-figure").thumbnail("area-wysiwyg-image").html()|raw }}
  254.                     {% if pimcore_link("content-btn").text %}
  255.                         <div class="uk-position-center uk-position-middle">
  256.                             <div class="apk-media-link uk-text-uppercase {{ buttonColor }}">
  257.                                 {{ pimcore_link("content-btn").text }}
  258.                             </div>
  259.                         </div>
  260.                     {% endif %}
  261.                     
  262.                     {% if pimcore_link("content-btn").href %}
  263.                         </a>
  264.                     {% endif %}
  265.                     
  266.                 {% endif %}
  268.                 </div>
  269.             </div>
  270.         </div>
  271.     </div>
  272.     
  273. </div>
  275. {% endif %}