templates/areas/apk-wysiwyg-global/view.html.twig line 1

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