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>
  49.                     <div>Largeur du container</div>
  50.                         {{ pimcore_select("container-width", {
  51.                             "store" : [
  52.                                 ['apk-container-800', '800px'],
  53.                                 ['apk-container-900', '900px'],
  54.                                 ['apk-container-1000', '1000px'],
  55.                                 ['apk-container-1200', '1200px'],
  56.                                 ['apk-container-1400', '1400px']
  57.                             ],
  58.                             "defaultValue" : "apk-container-1400"
  59.                         }) }}
  61.                     <div>Largeur du container de la video</div>
  62.                         {{ pimcore_select("video-width", {
  63.                             "store" : [
  64.                                 ['apk-container-800', '800px'],
  65.                                 ['apk-container-900', '900px'],
  66.                                 ['apk-container-1000', '1000px'],
  67.                                 ['apk-container-1200', '1200px'],
  68.                                 ['apk-container-1400', '1400px']
  69.                             ],
  70.                             "defaultValue" : "apk-container-1400"
  71.                         }) }}
  72.                 </div>
  74.                 <div>
  75.                     <h3><strong>Mise en page du texte</strong></h3>
  77.                     <div>
  78.                         <strong>Type</strong> de heading pour le titre ?
  79.                         <br>
  80.                         {{ pimcore_select("content-heading", {
  81.                             "store" : [
  82.                                 ['span', 'span'],
  83.                                 ['h1', 'Heading 1'],
  84.                                 ['h2', 'Heading 2'],
  85.                                 ['h3', 'Heading 3'],
  86.                                 ['h4', 'Heading 4'],
  87.                                 ['h5', 'Heading 5'],
  88.                                 ['h6', 'Heading 6']
  89.                             ],
  90.                             "defaultValue" : "h2"
  91.                         }) }}
  92.                     </div>
  94.                     <div>
  95.                         <strong>Style</strong> du heading pour le titre ?
  96.                         <br>
  97.                         {{ pimcore_select("content-heading-style", {
  98.                             "store" : [
  99.                                 ['h1', 'Heading 1'],
  100.                                 ['h2', 'Heading 2'],
  101.                                 ['h3', 'Heading 3'],
  102.                                 ['h4', 'Heading 4'],
  103.                                 ['h5', 'Heading 5'],
  104.                                 ['h6', 'Heading 6']
  105.                             ],
  106.                             "defaultValue" : "h2"
  107.                         }) }}
  108.                     </div>
  110.                     <div>
  111.                         <strong>Couleur</strong> du background global
  112.                         <br>
  113.                         {{ pimcore_select("bg-color-global", {
  114.                             "store" : [
  115.                                 ['white','blanc'],
  116.                                 ['black','noir']
  117.                             ],
  118.                             "defaultValue" : "blanc"
  119.                         }) }}
  120.                     </div>
  122.                     <div>
  123.                         <strong>Alignement</strong> du titre
  124.                         <br>
  125.                         {{ pimcore_select("title-align", {
  126.                             "store" : [
  127.                                 ['uk-text-left', 'Gauche'],
  128.                                 ['uk-text-center', 'Centré'],
  129.                                 ['uk-text-right', 'Droite']
  130.                             ],
  131.                             "defaultValue" : "uk-text-left"
  132.                         }) }}
  133.                     </div>
  135.                     <div>
  136.                         <strong>Bordure</strong> en dessus du titre ?
  137.                         <br>
  138.                         {{ pimcore_select("title-border", {
  139.                             "store" : [
  140.                                 ['', 'non'],
  141.                                 ['apk-border', 'oui']
  142.                             ],
  143.                             "defaultValue" : ""
  144.                         }) }}
  145.                     </div>
  147.                     <div>
  148.                         <strong>Alignement</strong> du texte
  149.                         <br>
  150.                         {{ pimcore_select("text-align", {
  151.                             "store" : [
  152.                                 ['uk-text-center', 'Centré'],
  153.                                 ['uk-text-left', 'Gauche'],
  154.                                 ['uk-text-right', 'Droite']
  155.                             ],
  156.                             "defaultValue" : "uk-text-left"
  157.                         }) }}
  158.                     </div>
  160.                     <div>
  161.                         <strong>Titre séparé</strong> du texte ?
  162.                         <br>
  163.                         {{ pimcore_select("text-separation", {
  164.                             "store" : [
  165.                                 ['separated', 'Oui'],
  166.                                 ['grouped', 'Non']
  167.                             ],
  168.                             "defaultValue" : "separated"
  169.                         }) }}
  170.                     </div>
  172.                     <div>
  173.                         <strong>Alignement</strong> du bouton
  174.                         <br>
  175.                         {{ pimcore_select("button-align", {
  176.                             "store" : [
  177.                                 ['uk-text-center', 'Centré'],
  178.                                 ['uk-text-left', 'Gauche'],
  179.                                 ['uk-text-right', 'Droite']
  180.                             ],
  181.                             "defaultValue" : "uk-text-center"
  182.                         }) }}
  183.                     </div>
  184.                 </div>
  185.             
  186.                 <div>
  187.                     <h3><strong>Gestion des espaces</strong></h3>
  188.                     <div>
  189.                         Espacement en <strong>haut</strong> du block
  190.                         <br>
  191.                         {{ pimcore_select("margin-top", {
  192.                             "store" : [
  193.                                 ['uk-padding-remove-top', 'Suppression du padding'],
  194.                                 ['', 'Aucun'],
  195.                                 ['uk-margin-small-top', 'Petit'],
  196.                                 ['uk-margin-medium-top', 'Moyen'],
  197.                                 ['uk-margin-large-top', 'Grand'],
  198.                                 ['uk-margin-xlarge-top', 'Très grand'],
  199.                             ],
  200.                             "defaultValue" : ""
  201.                         }) }}
  202.                     </div>
  204.                     <div>
  205.                         Espacement en <strong>bas</strong> du block
  206.                         <br>
  207.                         {{ pimcore_select("margin-bottom", {
  208.                             "store" : [
  209.                                 ['uk-padding-remove-bottom', 'Suppression du padding'],
  210.                                 ['', 'Aucun'],
  211.                                 ['uk-margin-small-bottom', 'Petit'],
  212.                                 ['uk-margin-medium-bottom', 'Moyen'],
  213.                                 ['uk-margin-large-bottom', 'Grand'],
  214.                                 ['uk-margin-xlarge-bottom', 'Très grand'],
  215.                             ],
  216.                             "defaultValue" : ""
  217.                         }) }}
  218.                     </div>
  220.                     <div>
  221.                         Espacement en <strong>haut</strong> du wysiwyg
  222.                         <br>
  223.                         {{ pimcore_select("margin-cotent-top", {
  224.                             "store" : [
  225.                                 ['', 'Aucun'],
  226.                                 ['uk-margin-small-top', 'Petit'],
  227.                                 ['uk-margin-medium-top', 'Moyen'],
  228.                                 ['uk-margin-large-top', 'Grand'],
  229.                                 ['uk-margin-xlarge-top', 'Très grand'],
  230.                             ],
  231.                             "defaultValue" : "uk-margin-medium-top"
  232.                         }) }}
  233.                     </div>
  236.                     <div>
  237.                         Espacement en <strong>bas</strong> du wysiwyg
  238.                         <br>
  239.                         {{ pimcore_select("margin-content-bottom", {
  240.                             "store" : [
  241.                                 ['', 'Aucun'],
  242.                                 ['uk-margin-small-bottom', 'Petit'],
  243.                                 ['uk-margin-medium-bottom', 'Moyen'],
  244.                                 ['uk-margin-large-bottom', 'Grand'],
  245.                                 ['uk-margin-xlarge-bottom', 'Très grand'],
  246.                             ],
  247.                             "defaultValue" : ""
  248.                         }) }}
  249.                     </div>
  250.                 </div>
  252.             </div>
  253.         </li>
  255.         {% endif %}
  256.             {% set imgTextPosition = pimcore_select("image-text-position").data %}
  257.             {% if imgTextPosition == 'img-left' %}
  258.                 {% set ImgTextPositionCode = 'uk-flex-first@m' %}
  259.             {% else %}
  260.                 {% set ImgTextPositionCode = '' %}
  261.             {% endif %}
  262.     
  263.             {% set content_grid_value = pimcore_select("content-grid-rules").getData() %}
  264.             {% if content_grid_value == 'grid-type-0' %}
  265.                 {% set grid_left_class = 'uk-width-1-1' %}
  266.                 {% set grid_right_class = 'uk-width-1-1' %}
  267.             {% elseif content_grid_value == 'grid-type-1' %}
  268.                 {% set grid_left_class = 'uk-width-1-2@m' %}
  269.                 {% set grid_right_class = 'uk-width-1-2@m' %}
  270.             {% elseif content_grid_value == 'grid-type-2' %}
  271.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-2-5@m' %}
  272.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-3-5@m' %}
  273.             {% elseif content_grid_value == 'grid-type-3' %}
  274.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-1-3@m' %}
  275.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-2-3@m' %}
  276.             {% elseif content_grid_value == 'grid-type-4' %}
  277.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-2-3@m' %}
  278.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-1-3@m' %}
  279.             {% elseif content_grid_value == 'grid-type-5' %}
  280.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-auto@m' %}
  281.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-expand@m' %}
  282.             {% elseif content_grid_value == 'grid-type-6' %}
  283.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-expand@m' %}
  284.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-auto@m' %}
  285.             {% elseif content_grid_value == 'grid-type-7' %}
  286.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-3-5@m' %}
  287.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-2-5@m' %}
  288.             {% endif %}
  290.         {% if editmode %}
  291.     
  292.         <li class="uk-active">
  293.             <div>
  295.                 {% if pimcore_select("text-separation").data == "separated" %}
  296.                     <div class="{{ pimcore_select("title-align").data }}">
  297.                         <span class="uk-h2">Titre</span>
  298.                         <h2 class="uk-h2">
  299.                             {{ pimcore_textarea("content-title",{
  300.                                 "nl2br" : true
  301.                             }) }}
  302.                         </h2>
  303.                     </div>
  304.                 {% endif %}
  305.                 <div class="uk-grid-large uk-margin-large-bottom" uk-grid>
  306.                     <div class="{{ grid_left_class }} apk-media">
  307.                         <span class="uk-h2">Image (optionnel)</span>
  308.                         {{ pimcore_image("content-figure") }}
  309.                         <hr>
  310.                         <span class="uk-h2">Vidéo (optionnel)</span>
  311.                         {{ pimcore_video('content-video', {
  312.                             width: 700,
  313.                             height: 400
  314.                         }) }}
  315.                         <span class="uk-h4">Image à afficher pour la vidéo</span>
  316.                         {{ pimcore_image("content-background-image") }}
  318.                         <div class="actions uk-margin-top">
  319.                             <span class="uk-h2">Lien (optionnel)</span>
  320.                             {{ pimcore_link("content-btn") }}
  321.                         </div>
  322.                     </div>
  323.                     <div class="{{ grid_right_class }} apk-content">
  324.                         {% if pimcore_select("text-separation").data != "separated" %}
  325.                         <div class="{{ pimcore_select("title-align").data }}">
  326.                             <h2 class="uk-h2">
  327.                                 <span class="uk-h2">Titre</span>
  328.                                 {{ pimcore_textarea("content-title",{
  329.                                     "nl2br" : true
  330.                                 }) }}
  331.                             </h2>
  332.                         </div>
  333.                         {% endif %}
  334.                         <span class="uk-h2">Texte</span>
  335.                         <div class="{{ pimcore_select("text-align").data }}">
  336.                             {{ pimcore_wysiwyg("content") }}
  337.                         </div>
  338.                     </div>
  339.                 </div>
  341.                 <span class="uk-h2">Texte sous contenu</span>
  342.                     <div class="{{ pimcore_select("text-align").data }}">
  343.                         {{ pimcore_wysiwyg("content-bottom") }}
  344.                     </div>
  345.             </div>
  346.         </li>
  347.     </ul>
  348. </div>
  350. {% endif %}
  352. {% if not editmode %}
  354.     {% if ( not pimcore_image("content-figure").isEmpty() ) or ( not pimcore_video("content-video").isEmpty() ) %}
  355.     <div class="apk-areabrick-container {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }} {{ pimcore_select("bg-color-global") }}">
  356.         <div class="uk-container {{ pimcore_select("container-width") }}">
  357.             {% if pimcore_select("text-separation").data == "separated" %}
  358.                 <div class="{{ pimcore_select("title-align") }} uk-margin-medium-bottom {{ pimcore_select("title-border")}}">
  359.                     {% if not pimcore_textarea("content-title").isEmpty %}
  360.                         {% if pimcore_select("content-heading").getData() == 'span' %}
  361.                             <span class="uk-h2">
  362.                                 {{ pimcore_textarea("content-title", {
  363.                                 "nl2br" : true})|raw }}
  364.                             </span>
  365.                         {% else %}
  366.                             {% set content_heading = pimcore_select("content-heading").getData() %}
  367.                             <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  368.                                 {{ pimcore_textarea("content-title", {
  369.                                 "nl2br" : true})|raw }}
  370.                             </{{ content_heading }}>
  371.                         {% endif %}
  372.                     {% endif %}
  373.                 </div>
  374.             {% endif %}
  375.             <div class="uk-grid-large" uk-grid>
  376.                 <div class="{{ grid_right_class }}">
  377.                     <div>
  378.                         {% if pimcore_select("text-separation").data != "separated" %}
  379.                         <div class="{{ pimcore_select("title-align") }} uk-margin-medium-bottom {{ pimcore_select("title-border")}}">
  380.                             {% if not pimcore_textarea("content-title").isEmpty %}
  381.                                 {% if pimcore_select("content-heading").getData() == 'span' %}
  382.                                     <span class="uk-h2">
  383.                                         {{ pimcore_textarea("content-title", {
  384.                                         "nl2br" : true})|raw }}
  385.                                     </span>
  386.                                 {% else %}
  387.                                     {% set content_heading = pimcore_select("content-heading").getData() %}
  388.                                     <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  389.                                         {{ pimcore_textarea("content-title", {
  390.                                         "nl2br" : true})|raw }}
  391.                                     </{{ content_heading }}>
  392.                                 {% endif %}
  393.                             {% endif %}
  394.                         </div>
  395.                         {% endif %}
  396.                         <div class="{{ pimcore_select("text-align") }} uk-container apk-wysiwyg-content-link">
  397.                             {{ pimcore_wysiwyg("content") }}
  398.                         </div>
  399.                         <div class="{{ pimcore_select("button-align").data }}">
  400.                             {{ pimcore_link("content-btn", {"class" : "uk-button"}) }}
  401.                         </div>
  402.                     </div>
  403.                 </div>
  404.                 {% if not pimcore_video("content-video").isEmpty() %}
  405.                     <div class="{{ grid_left_class }} {{ ImgTextPositionCode }} apk-media uk-text-center">
  406.                         <div>
  408.                             {% if pimcore_link("content-btn").href %}
  409.                                 <a href="{{ pimcore_link("content-btn").href }}" target="{{ pimcore_link("content-btn").target }}">
  410.                             {% endif %}
  412.                             {% if not pimcore_video("content-video").isEmpty() %}
  414.                                 {% if pimcore_image("content-background-image").src() %}
  416.                                 <div class="uk-container {{ pimcore_select("video-width") }}">
  417.                                     <div data-caption="{{ pimcore_image('content-background-image').getAlt() }}" class="uk-height-1-1" uk-toggle="target: #modal-media-youtube;">
  418.                                         <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">
  419.                                             
  420.                                             <img src="{{ pimcore_image("content-background-image").getThumbnail('global-image') }}" class="" alt=""/>
  421.                                             
  422.                                             <div class="uk-overlay-primary uk-position-cover">
  423.                                                 <div class="uk-position-center">
  424.                                                     <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>
  425.                                                 </div>
  426.                                             </div>
  427.                                         </figure>
  428.                                     </div>
  429.                                     <div id="modal-media-youtube" class="uk-flex-top" uk-modal>
  430.                                         <div class="uk-modal-dialog uk-margin-auto-vertical">
  431.                                         
  432.                                             <button class="uk-modal-close-outside" type="button" uk-close></button>
  433.                                             
  434.                                             {{ pimcore_video("content-video", { 
  435.                                                 width : 1920,
  436.                                                 height: 1080
  437.                                             }) }}
  438.                                                     
  439.                                         </div>
  440.                                     </div>
  441.                                 </div>
  443.                                 {% else %}
  445.                                 <div class="uk-container {{ pimcore_select("video-width") }}">
  446.                                     <div class="uk-position-relative apk-video">
  447.                                         <div class="aspect-ratio">
  448.                                             {{ pimcore_video('content-video') }}
  449.                                         </div>
  450.                                     </div>
  451.                                 </div>
  452.                                     
  453.                                 {% endif %}
  455.                             {% else %}
  457.                                 {{ pimcore_image("content-figure").thumbnail("global-image").html()|raw }}
  459.                             {% endif %}
  460.                             
  461.                             {% if pimcore_link("content-btn").href %}
  462.                                 </a>
  463.                             {% endif %}
  465.                         </div>
  466.                     </div>
  467.                 {% endif %}
  468.             </div>
  470.             <div class="{{ pimcore_select("text-align").data }} {{ pimcore_select("margin-content-bottom") }} {{ pimcore_select("margin-content-top") }}">
  471.                 {{ pimcore_wysiwyg("content-bottom") }}
  472.             </div>
  474.         </div>   
  475.     </div>
  477.     {% else %}
  479.     <div class="apk-areabrick-container {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }} {{ pimcore_select("bg-color-global") }}">
  480.         <div class="uk-container {{ pimcore_select("container-width") }}">
  482.             {% if pimcore_select("text-separation").data == "separated" %}
  483.                 <div class="uk-grid-large" uk-grid>
  484.                     <div class="{{ grid_right_class }}">
  485.                         <div class="{{ pimcore_select("title-align") }} {{ pimcore_select("title-border")}}">
  486.                             {% if not pimcore_textarea("content-title").isEmpty %}
  487.                                 {% if pimcore_select("content-heading").getData() == 'span' %}
  488.                                     <span class="uk-h2">
  489.                                         {{ pimcore_textarea("content-title", {
  490.                                         "nl2br" : true})|raw }}
  491.                                     </span>
  492.                                 {% else %}
  493.                                     {% set content_heading = pimcore_select("content-heading").getData() %}
  494.                                     <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  495.                                         {{ pimcore_textarea("content-title", {
  496.                                         "nl2br" : true})|raw }}
  497.                                     </{{ content_heading }}>
  498.                                 {% endif %}
  499.                             {% endif %}
  500.                         </div>
  501.                     </div>
  502.                     <div class="{{ grid_left_class }} {{ ImgTextPositionCode }} {{ pimcore_select("text-align") }}">
  503.                         {{ pimcore_wysiwyg("content") }}
  504.                         <div class="{{ pimcore_select("button-align").data }}">
  505.                             {{ pimcore_link("content-btn", {"class" : "uk-button"}) }}
  506.                         </div>
  507.                     </div>
  508.                 </div>
  509.             {% else %}
  511.             <div>
  512.                 <div class="{{ pimcore_select("title-align") }} {{ pimcore_select("title-border")}}">
  513.                     {% if not pimcore_textarea("content-title").isEmpty %}
  514.                         {% if pimcore_select("content-heading").getData() == 'span' %}
  515.                             <span class="uk-h2">
  516.                                 {{ pimcore_textarea("content-title", {
  517.                                 "nl2br" : true})|raw }}
  518.                             </span>
  519.                         {% else %}
  520.                             {% set content_heading = pimcore_select("content-heading").getData() %}
  521.                             <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  522.                                 {{ pimcore_textarea("content-title", {
  523.                                 "nl2br" : true})|raw }}
  524.                             </{{ content_heading }}>
  525.                         {% endif %}
  526.                     {% endif %}
  527.                 </div>
  528.                 <div class="{{ pimcore_select("text-align") }} uk-container apk-wysiwyg-content-link">
  529.                     {{ pimcore_wysiwyg("content") }}
  530.                     <div class="{{ pimcore_select("button-align").data }}">
  531.                         {{ pimcore_link("content-btn", {"class" : "uk-button "}) }}
  532.                     </div>
  533.                 </div>
  534.             </div>
  536.             {% endif %}
  538.             <div class="{{ pimcore_select("text-align").data }} {{ pimcore_select("margin-content-bottom") }} {{ pimcore_select("margin-content-top") }}">
  539.                 {{ pimcore_wysiwyg("content-bottom") }}
  540.             </div>
  541.           
  542.         </div>   
  543.     </div>
  544.     {% endif %}
  547. {% endif %}