templates/areas/apk-wysiwyg-global/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"><strong>Section wysiwyg</strong></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 class="uk-grid-small uk-child-width-1-3@m" uk-grid>
  16.                 <div>
  17.                     <h3><strong>Grille et alignement</strong></h3>
  18.                     
  19.                     <div>
  20.                         <strong>Répartition</strong> de la grille Image/texte
  21.                         <br>
  22.                         {{ pimcore_select("content-grid-rules", {
  23.                             "store" : [
  24.                                 ['grid-type-0', '1/1 | 1/1'],
  25.                                 ['grid-type-1', '1/2 | 1/2'],
  26.                                 ['grid-type-2', '2/5 | 3/5'],
  27.                                 ['grid-type-3', '1/3 | 2/3'],
  28.                                 ['grid-type-4', '2/3 | 1/3'],
  29.                                 ['grid-type-5', 'auto | expand'],
  30.                                 ['grid-type-6', 'expand | auto'],
  31.                                 ['grid-type-7', '3/5 | 2/5'],
  32.                             ],
  33.                             "defaultValue" : "grid-type-1"
  34.                         }) }}
  35.                     </div>
  37.                     <div>
  38.                         <strong>Position</strong> de l'image et du texte
  39.                         <br>
  40.                         {{ pimcore_select("image-text-position", {
  41.                             "store" : [
  42.                                 ['img-left', 'Image à gauche / texte à droite'],
  43.                                 ['img-right', 'Image à droite / texte à gauche']
  44.                             ],
  45.                             "defaultValue" : "img-left"
  46.                         }) }}
  47.                     </div>
  48.                 </div>
  50.                 <div>
  51.                     <h3><strong>Mise en page du texte</strong></h3>
  53.                     <div>
  54.                         <strong>Type</strong> de heading pour le titre ?
  55.                         <br>
  56.                         {{ pimcore_select("content-heading", {
  57.                             "store" : [
  58.                                 ['span', 'span'],
  59.                                 ['h1', 'Heading 1'],
  60.                                 ['h2', 'Heading 2'],
  61.                                 ['h3', 'Heading 3'],
  62.                                 ['h4', 'Heading 4'],
  63.                                 ['h5', 'Heading 5'],
  64.                                 ['h6', 'Heading 6']
  65.                             ],
  66.                             "defaultValue" : "h2"
  67.                         }) }}
  68.                     </div>
  70.                     <div>
  71.                         <strong>Style</strong> du heading pour le titre ?
  72.                         <br>
  73.                         {{ pimcore_select("content-heading-style", {
  74.                             "store" : [
  75.                                 ['h1', 'Heading 1'],
  76.                                 ['h2', 'Heading 2'],
  77.                                 ['h3', 'Heading 3'],
  78.                                 ['h4', 'Heading 4'],
  79.                                 ['h5', 'Heading 5'],
  80.                                 ['h6', 'Heading 6']
  81.                             ],
  82.                             "defaultValue" : "h2"
  83.                         }) }}
  84.                     </div>
  86.                     <div>
  87.                         <strong>Couleur</strong> du background global
  88.                         <br>
  89.                         {{ pimcore_select("bg-color-global", {
  90.                             "store" : [
  91.                                 ['white','blanc'],
  92.                                 ['gray','gris']
  93.                             ],
  94.                             "defaultValue" : "blanc"
  95.                         }) }}
  96.                     </div>
  98.                     <div>
  99.                         <strong>Image de pierres</strong> en background
  100.                         <br>
  101.                         {{ pimcore_select("stone-bg", {
  102.                             "store" : [
  103.                                 ['apk-stone-bg','oui'],
  104.                                 ['','non']
  105.                             ],
  106.                             "defaultValue" : "non"
  107.                         }) }}
  108.                     </div>
  110.                     <div>
  111.                         <strong>Alignement</strong> du titre
  112.                         <br>
  113.                         {{ pimcore_select("title-align", {
  114.                             "store" : [
  115.                                 ['uk-text-left', 'Gauche'],
  116.                                 ['uk-text-center', 'Centré'],
  117.                                 ['uk-text-right', 'Droite']
  118.                             ],
  119.                             "defaultValue" : "uk-text-left"
  120.                         }) }}
  121.                     </div>
  123.                     <div>
  124.                         <strong>Alignement</strong> du texte
  125.                         <br>
  126.                         {{ pimcore_select("text-align", {
  127.                             "store" : [
  128.                                 ['uk-text-center', 'Centré'],
  129.                                 ['uk-text-left', 'Gauche'],
  130.                                 ['uk-text-right', 'Droite']
  131.                             ],
  132.                             "defaultValue" : "uk-text-left"
  133.                         }) }}
  134.                     </div>
  136.                     <div>
  137.                         <strong>Titre séparé</strong> du texte ?
  138.                         <br>
  139.                         {{ pimcore_select("text-separation", {
  140.                             "store" : [
  141.                                 ['separated', 'Oui'],
  142.                                 ['grouped', 'Non']
  143.                             ],
  144.                             "defaultValue" : "separated"
  145.                         }) }}
  146.                     </div>
  148.                     <div>
  149.                         <strong>Alignement</strong> du bouton
  150.                         <br>
  151.                         {{ pimcore_select("button-align", {
  152.                             "store" : [
  153.                                 ['uk-text-center', 'Centré'],
  154.                                 ['uk-text-left', 'Gauche'],
  155.                                 ['uk-text-right', 'Droite']
  156.                             ],
  157.                             "defaultValue" : "uk-text-center"
  158.                         }) }}
  159.                     </div>
  160.                 </div>
  161.             
  162.                 <div>
  163.                     <h3><strong>Gestion des espaces</strong></h3>
  164.                     <div>
  165.                         Espacement en <strong>haut</strong> du block
  166.                         <br>
  167.                         {{ pimcore_select("margin-top", {
  168.                             "store" : [
  169.                                 ['uk-padding-remove-top', 'Suppression du padding'],
  170.                                 ['', 'Aucun'],
  171.                                 ['uk-margin-small-top', 'Petit'],
  172.                                 ['uk-margin-medium-top', 'Moyen'],
  173.                                 ['uk-margin-large-top', 'Grand'],
  174.                                 ['uk-margin-xlarge-top', 'Très grand'],
  175.                             ],
  176.                             "defaultValue" : ""
  177.                         }) }}
  178.                     </div>
  180.                     <div>
  181.                         Espacement en <strong>bas</strong> du block
  182.                         <br>
  183.                         {{ pimcore_select("margin-bottom", {
  184.                             "store" : [
  185.                                 ['uk-padding-remove-bottom', 'Suppression du padding'],
  186.                                 ['', 'Aucun'],
  187.                                 ['uk-margin-small-bottom', 'Petit'],
  188.                                 ['uk-margin-medium-bottom', 'Moyen'],
  189.                                 ['uk-margin-large-bottom', 'Grand'],
  190.                                 ['uk-margin-xlarge-bottom', 'Très grand'],
  191.                             ],
  192.                             "defaultValue" : ""
  193.                         }) }}
  194.                     </div>
  196.                     <div>
  197.                         <strong>Padding</strong>
  198.                         <br>
  199.                         {{ pimcore_select("padding", {
  200.                             "store" : [
  201.                                 ['apk-padding-remove', 'Aucun'],
  202.                                 ['', 'Normal'],
  203.                                 ['apk-padding-large', 'Large']
  204.                             ],
  205.                             "defaultValue" : ""
  206.                         }) }}
  207.                     </div>
  208.                 </div>
  210.             </div>
  211.         </li>
  213.         {% endif %}
  214.             {% set imgTextPosition = pimcore_select("image-text-position").data %}
  215.             {% if imgTextPosition == 'img-left' %}
  216.                 {% set ImgTextPositionCode = 'uk-flex-first@m' %}
  217.             {% else %}
  218.                 {% set ImgTextPositionCode = '' %}
  219.             {% endif %}
  220.     
  221.             {% set content_grid_value = pimcore_select("content-grid-rules").getData() %}
  222.             {% if content_grid_value == 'grid-type-0' %}
  223.                 {% set grid_left_class = 'uk-width-1-1' %}
  224.                 {% set grid_right_class = 'uk-width-1-1' %}
  225.             {% elseif content_grid_value == 'grid-type-1' %}
  226.                 {% set grid_left_class = 'uk-width-1-2@m' %}
  227.                 {% set grid_right_class = 'uk-width-1-2@m' %}
  228.             {% elseif content_grid_value == 'grid-type-2' %}
  229.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-2-5@m' %}
  230.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-3-5@m' %}
  231.             {% elseif content_grid_value == 'grid-type-3' %}
  232.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-1-3@m' %}
  233.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-2-3@m' %}
  234.             {% elseif content_grid_value == 'grid-type-4' %}
  235.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-2-3@m' %}
  236.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-1-3@m' %}
  237.             {% elseif content_grid_value == 'grid-type-5' %}
  238.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-auto@m' %}
  239.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-expand@m' %}
  240.             {% elseif content_grid_value == 'grid-type-6' %}
  241.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-expand@m' %}
  242.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-auto@m' %}
  243.             {% elseif content_grid_value == 'grid-type-7' %}
  244.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-3-5@m' %}
  245.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-2-5@m' %}
  246.             {% endif %}
  248.         {% if editmode %}
  249.     
  250.         <li class="uk-active">
  251.             <div>
  253.                 {% if pimcore_select("text-separation").data == "separated" %}
  254.                     <div class="{{ pimcore_select("title-align").data }}">
  255.                         <span class="uk-h2">Titre</span>
  256.                         <h2 class="uk-h2">
  257.                             {{ pimcore_textarea("content-title",{
  258.                                 "nl2br" : true
  259.                             }) }}
  260.                         </h2>
  261.                     </div>
  262.                 {% endif %}
  263.                 <div class="uk-grid-large uk-margin-large-bottom" uk-grid>
  264.                     <div class="{{ grid_left_class }} apk-media">
  265.                         <span class="uk-h2">Image (optionnel)</span>
  266.                         {{ pimcore_image("content-figure") }}
  267.                         <hr>
  268.                         <span class="uk-h2">Vidéo (optionnel)</span>
  269.                         {{ pimcore_video('content-video', {
  270.                             width: 700,
  271.                             height: 400
  272.                         }) }}
  273.                         <span class="uk-h4">Image à afficher pour la vidéo</span>
  274.                         {{ pimcore_image("content-background-image") }}
  276.                         <div class="actions uk-margin-top">
  277.                             <span class="uk-h2">Lien (optionnel)</span>
  278.                             {{ pimcore_link("content-btn") }}
  279.                         </div>
  280.                     </div>
  281.                     <div class="{{ grid_right_class }} apk-content">
  282.                         {% if pimcore_select("text-separation").data != "separated" %}
  283.                         <div class="{{ pimcore_select("title-align").data }}">
  284.                             <h2 class="uk-h2">
  285.                                 <span class="uk-h2">Titre</span>
  286.                                 {{ pimcore_textarea("content-title",{
  287.                                     "nl2br" : true
  288.                                 }) }}
  289.                             </h2>
  290.                         </div>
  291.                         {% endif %}
  292.                         <span class="uk-h2">Texte</span>
  293.                         <div class="{{ pimcore_select("text-align").data }}">
  294.                             {{ pimcore_wysiwyg("content") }}
  295.                         </div>
  296.                         <span class="uk-h2">Iframe</span>
  297.                         {{ pimcore_textarea('map') }}
  298.                     </div>
  299.                 </div>
  301.                 <span class="uk-h2">Texte sous contenu</span>
  302.                     <div class="{{ pimcore_select("text-align").data }}">
  303.                         {{ pimcore_wysiwyg("content-bottom") }}
  304.                     </div>
  305.             </div>
  306.         </li>
  307.     </ul>
  308. </div>
  310. {% endif %}
  312. {% if not editmode %}
  314.     {% if ( not pimcore_image("content-figure").isEmpty() ) or ( not pimcore_video("content-video").isEmpty() ) %}
  315.     <div class="apk-areabrick-container {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}  {{ pimcore_select("bg-color-global") }}">
  316.         <div class="{{ pimcore_select("stone-bg") }}">
  317.             <div class="uk-container apk-container-1400 {{ pimcore_select("padding")}}">
  318.                 {% if pimcore_select("text-separation").data == "separated" %}
  319.                     <div class="{{ pimcore_select("title-align") }} uk-margin-medium-bottom">
  320.                         {% if not pimcore_textarea("content-title").isEmpty %}
  321.                             {% if pimcore_select("content-heading").getData() == 'span' %}
  322.                                 <span class="uk-h2">
  323.                                     {{ pimcore_textarea("content-title", {
  324.                                     "nl2br" : true})|raw }}
  325.                                 </span>
  326.                             {% else %}
  327.                                 {% set content_heading = pimcore_select("content-heading").getData() %}
  328.                                 <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  329.                                     {{ pimcore_textarea("content-title", {
  330.                                     "nl2br" : true})|raw }}
  331.                                 </{{ content_heading }}>
  332.                             {% endif %}
  333.                         {% endif %}
  334.                     </div>
  335.                 {% endif %}
  336.                 <div class="uk-grid-medium" uk-grid>
  337.                     <div class="{{ grid_right_class }}">
  338.                         <div>
  339.                             {% if pimcore_select("text-separation").data != "separated" %}
  340.                             <div class="{{ pimcore_select("title-align") }} uk-margin-medium-bottom">
  341.                                 {% if not pimcore_textarea("content-title").isEmpty %}
  342.                                     {% if pimcore_select("content-heading").getData() == 'span' %}
  343.                                         <span class="uk-h2">
  344.                                             {{ pimcore_textarea("content-title", {
  345.                                             "nl2br" : true})|raw }}
  346.                                         </span>
  347.                                     {% else %}
  348.                                         {% set content_heading = pimcore_select("content-heading").getData() %}
  349.                                         <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  350.                                             {{ pimcore_textarea("content-title", {
  351.                                             "nl2br" : true})|raw }}
  352.                                         </{{ content_heading }}>
  353.                                     {% endif %}
  354.                                 {% endif %}
  355.                             </div>
  356.                             {% endif %}
  357.                             <div class="{{ pimcore_select("text-align") }} apk-wysiwyg-content-link">
  358.                                 {{ pimcore_wysiwyg("content") }}
  360.                                 {{ pimcore_textarea('map', { 'htmlspecialchars' : false }) }}
  361.                             </div>
  362.                             <div class="{{ pimcore_select("button-align").data }}">
  363.                                 {{ pimcore_link("content-btn", {"class" : "uk-button uk-button-primary"}) }}
  364.                             </div>
  365.                         </div>
  366.                     </div>
  367.                     <div class="{{ grid_left_class }} {{ ImgTextPositionCode }} apk-media uk-text-center">
  368.                         <div>
  370.                             {% if not pimcore_video("content-video").isEmpty() %} 
  372.                                 <div data-caption="{{ pimcore_image('content-background-image').getAlt() }}" class="uk-height-1-1" uk-toggle="target: #modal-media-youtube;">
  373.                                     <figure class="uk-dark uk-position-relative uk-height-1-1" style="background: url('{{ pimcore_image("content-background-image").thumbnail('global-image') }}') 50% 50% / cover">
  374.                                         
  375.                                         <img src="{{ pimcore_image("content-background-image").getThumbnail('global-image') }}" class="" alt=""/>
  376.                                         
  377.                                         <div class="uk-overlay-primary uk-position-cover">
  378.                                             <div class="uk-position-center">
  379.                                                 <svg width="80" height="80" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="play-circle"><polygon fill="none" stroke="currentColor" stroke-width="1.1" points="8.5 7 13.5 10 8.5 13"></polygon><circle fill="none" stroke="currentColor" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>
  380.                                             </div>
  381.                                         </div>
  382.                                     </figure>
  383.                                 </div>
  384.                                 <div id="modal-media-youtube" class="uk-flex-top" uk-modal>
  385.                                     <div class="uk-modal-dialog uk-margin-auto-vertical">
  386.                                     
  387.                                         <button class="uk-modal-close-outside" type="button" uk-close></button>
  388.                                         
  389.                                         {{ pimcore_video("content-video", { 
  390.                                             width : 1920,
  391.                                             height: 1080
  392.                                         }) }}
  393.                                                 
  394.                                     </div>
  395.                                 </div>
  397.                             {% else %}
  399.                                 {{ pimcore_image("content-figure").thumbnail("global-image").html()|raw }}
  401.                             {% endif %}
  403.                         </div>
  404.                     </div>
  405.                 </div>
  407.                 {% if pimcore_wysiwyg("content-bottom").isEmpty() %}
  408.                 {% else %}
  409.                 <div class="{{ pimcore_select("text-align").data }} uk-margin-medium-top">
  410.                     {{ pimcore_wysiwyg("content-bottom") }}
  411.                 </div>
  412.                 {% endif %}
  414.             </div>
  415.         </div>  
  416.     </div>
  418.     {% else %}
  420.     <div class="apk-areabrick-container {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}  {{ pimcore_select("bg-color-global") }}">
  421.         <div class="{{ pimcore_select("stone-bg") }}">
  422.             <div class="uk-container apk-container-1400 {{ pimcore_select("padding")}}">
  423.                 {% if pimcore_select("text-separation").data == "separated" %}
  424.                     <div class="uk-grid-medium" uk-grid>
  425.                         <div class="{{ grid_right_class }}">
  426.                             <div class="{{ pimcore_select("title-align") }}">
  427.                                 {% if not pimcore_textarea("content-title").isEmpty %}
  428.                                     {% if pimcore_select("content-heading").getData() == 'span' %}
  429.                                         <span class="uk-h2">
  430.                                             {{ pimcore_textarea("content-title", {
  431.                                             "nl2br" : true})|raw }}
  432.                                         </span>
  433.                                     {% else %}
  434.                                         {% set content_heading = pimcore_select("content-heading").getData() %}
  435.                                         <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  436.                                             {{ pimcore_textarea("content-title", {
  437.                                             "nl2br" : true})|raw }}
  438.                                         </{{ content_heading }}>
  439.                                     {% endif %}
  440.                                 {% endif %}
  441.                             </div>
  442.                         </div>
  443.                         <div class="{{ grid_left_class }} {{ ImgTextPositionCode }} {{ pimcore_select("text-align") }}">
  444.                             {{ pimcore_wysiwyg("content") }}
  446.                             {{ pimcore_textarea('map', { 'htmlspecialchars' : false }) }}
  447.                             <div class="{{ pimcore_select("button-align").data }}">
  448.                                 {{ pimcore_link("content-btn", {"class" : "uk-button uk-button-primary"}) }}
  449.                             </div>
  450.                         </div>
  451.                     </div>
  452.                 {% else %}
  454.                 <div>
  455.                     <div class="{{ pimcore_select("title-align") }}">
  456.                         {% if not pimcore_textarea("content-title").isEmpty %}
  457.                             {% if pimcore_select("content-heading").getData() == 'span' %}
  458.                                 <span class="uk-h2">
  459.                                     {{ pimcore_textarea("content-title", {
  460.                                     "nl2br" : true})|raw }}
  461.                                 </span>
  462.                             {% else %}
  463.                                 {% set content_heading = pimcore_select("content-heading").getData() %}
  464.                                 <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  465.                                     {{ pimcore_textarea("content-title", {
  466.                                     "nl2br" : true})|raw }}
  467.                                 </{{ content_heading }}>
  468.                             {% endif %}
  469.                         {% endif %}
  470.                     </div>
  471.                     <div class="{{ pimcore_select("text-align") }} apk-wysiwyg-content-link">
  472.                         {{ pimcore_wysiwyg("content") }}
  474.                         {{ pimcore_textarea('map', { 'htmlspecialchars' : false }) }}
  475.                         <div class="{{ pimcore_select("button-align").data }}">
  476.                             {{ pimcore_link("content-btn", {"class" : "uk-button uk-button-primary"}) }}
  477.                         </div>
  478.                     </div>
  479.                 </div>
  481.                 {% endif %}
  483.                 {% if pimcore_wysiwyg("content-bottom").isEmpty() %}
  484.                 {% else %}
  485.                 <div class="{{ pimcore_select("text-align").data }} uk-margin-medium-top">
  486.                     {{ pimcore_wysiwyg("content-bottom") }}
  487.                 </div>
  488.                 {% endif %}
  489.             
  490.             </div>
  491.         </div>  
  492.     </div>
  493.     {% endif %}
  496. {% endif %}