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

Open in your IDE?
  4. {% if editmode %}
  6. <div class="uk-container">
  7.     <ul uk-tab>
  8.         <li><a href="#">Configurations</a></li>
  9.         <li class="uk-active"><a href="#">Content Edit</a></li>
  10.     </ul>
  12.     <ul class="uk-switcher uk-margin">
  13.         <li>
  14.             <div>Répartition de la grille</div>
  15.             {{ pimcore_select("content-grid-rules", {
  16.                 "store" : [
  17.                     ['grid-type-1', '1/2 | 1/2'],
  18.                     ['grid-type-2', '2/5 | 3/5'],
  19.                     ['grid-type-3', '1/3 | 2/3'],
  20.                     ['grid-type-4', '2/3 | 1/3'],
  21.                     ['grid-type-5', 'auto | expand'],
  22.                     ['grid-type-6', 'expand | auto'],
  23.                     ['grid-type-7', '3/5 | 2/5'],
  24.                 ],
  25.                 "defaultValue" : "grid-type-1"
  26.             }) }}
  28.             <div>Type de heading pour le titre ?</div>
  29.             {{ pimcore_select("content-heading", {
  30.                 "store" : [
  31.                     ['h1', 'Heading 1'],
  32.                     ['h2', 'Heading 2'],
  33.                     ['h3', 'Heading 3'],
  34.                     ['h4', 'Heading 4'],
  35.                     ['h5', 'Heading 5'],
  36.                     ['h6', 'Heading 6']
  37.                 ],
  38.                 "defaultValue" : "h2"
  39.             }) }}
  41.             <div><strong>Style</strong> du heading pour le titre ?</div>
  42.             {{ pimcore_select("content-heading-style", {
  43.                 "store" : [
  44.                     ['h1', 'Heading 1'],
  45.                     ['h2', 'Heading 2'],
  46.                     ['h3', 'Heading 3'],
  47.                     ['h4', 'Heading 4'],
  48.                     ['h5', 'Heading 5'],
  49.                     ['h6', 'Heading 6']
  50.                 ],
  51.                 "defaultValue" : "h2"
  52.             }) }}
  53.             
  54.             <div><strong>Sous-lignage pour le titre ?</strong></div>
  55.             {{ pimcore_select("content-heading-underlined", {
  56.                 "store" : [
  57.                     ['', 'non'],
  58.                     ['apk-underlined', 'bleu'],
  59.                     ['apk-underlined apk-underlined-orange2', 'orange']
  60.                 ],
  61.                 "defaultValue" : ""
  62.             }) }}
  64.             <div><strong>Background de couleur sous l'image ?</strong></div>
  65.             {{ pimcore_select("image-background", {
  66.                 "store" : [
  67.                     ['', 'non'],
  68.                     ['apk-image-cover', 'bleu'],
  69.                     ['apk-image-cover apk-image-cover-orange2', 'orange']
  70.                 ],
  71.                 "defaultValue" : ""
  72.             }) }}
  75.             <div>Ancre (optionnel)</div>
  76.             {{ pimcore_input("id-ancre") }}
  78.         </li>
  80.         {% endif %}
  81.     
  82.             {% set content_grid_value = pimcore_select("content-grid-rules").getData() %}
  83.             {% if content_grid_value == 'grid-type-1' %}
  84.                 {% set grid_left_class = 'uk-width-1-2@m' %}
  85.                 {% set grid_right_class = 'uk-width-1-2@m' %}
  86.             {% elseif content_grid_value == 'grid-type-2' %}
  87.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-2-5@m' %}
  88.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-3-5@m' %}
  89.             {% elseif content_grid_value == 'grid-type-3' %}
  90.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-1-3@m' %}
  91.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-2-3@m' %}
  92.             {% elseif content_grid_value == 'grid-type-4' %}
  93.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-2-3@m' %}
  94.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-1-3@m' %}
  95.             {% elseif content_grid_value == 'grid-type-5' %}
  96.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-auto@m' %}
  97.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-expand@m' %}
  98.             {% elseif content_grid_value == 'grid-type-6' %}
  99.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-expand@m' %}
  100.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-auto@m' %}
  101.             {% elseif content_grid_value == 'grid-type-7' %}
  102.                 {% set grid_left_class = 'uk-width-1-2@s uk-width-3-5@m' %}
  103.                 {% set grid_right_class = 'uk-width-1-2@s uk-width-2-5@m' %}
  104.             {% endif %}
  106.         {% if editmode %}
  107.     
  108.         <li class="uk-active">
  109.             <div class="uk-grid-large uk-margin-large-bottom uk-grid" uk-grid>
  110.                 <div class="{{ grid_right_class }} apk-content">
  111.                     <h2 class="uk-h2">
  112.                         {{ pimcore_textarea("content-title",{
  113.                             "nl2br" : true
  114.                         }) }}
  115.                     </h2>
  117.                     {{ pimcore_wysiwyg("content") }}
  118.                     <div class="actions">
  119.                         {{ pimcore_link("content-btn", {
  120.                             "class" : "uk-link"
  121.                         }) }}
  122.                     </div>
  123.                 </div>
  124.                 <div class="{{ grid_left_class }} apk-media uk-flex-last uk-flex-first@m">
  125.                     Image pour lightbox (laisser vide si pas nécessaire)
  126.                     {{ pimcore_relation("content-figure-lightbox", {
  127.                         "types" : ["asset"],
  128.                         "subtypes" : {
  129.                             "asset" : ["image"]
  130.                         }
  131.                     }) }}
  132.                     <hr />
  133.                     <figure>
  134.                     {{ pimcore_image("content-figure") }}
  135.                     </figure>
  136.                 </div>
  137.             </div>
  138.         </li>
  139.     </ul>
  140. </div>
  142. {% endif %}
  144. {% if not editmode %}
  146. <div class="apk-areabrick-container {{ pimcore_select("bg-color").getData() }} {% if pimcore_select("bg-color").getData() != '' %} uk-light {% endif %}">
  147.     <div id="{{ pimcore_input("id-ancre").getData() }}" class="uk-container">
  148.         <div class="uk-grid-large  uk-grid" uk-grid>
  149.             <div class="{{ grid_left_class }}">
  150.                 <div class="apk-media {{ pimcore_select("image-background") }}">
  151.                     {% if not pimcore_relation("content-figure-lightbox").isEmpty() %}
  152.                         <figure class="has-lightbox" uk-lightbox uk-scrollspy="cls: uk-animation-slide-left-medium;">
  153.                             <a href="{{ pimcore_relation("content-figure-lightbox") }}" data-caption="{{ pimcore_image("content-figure").getAlt() }}">
  154.                                 <div class="apk-media-overlay uk-flex uk-flex-center uk-flex-middle">
  155.                                     <span class="apk-media-overlay--view">+</span>
  156.                                 </div>
  157.                                 {{ pimcore_image("content-figure",{
  158.                                     "thumbnail" : "area-wysiwyg-image"
  159.                                 }) }}
  160.                             </a>
  161.                         </figure>
  162.                     {% else %}
  163.                         <figure uk-scrollspy="cls: uk-animation-slide-left-medium;">
  164.                             <img src="{{ pimcore_image("content-figure").getThumbnail("area-wysiwyg-image") }}" alt="{{ pimcore_image("content-figure").getAlt() }}" />
  165.                         </figure>
  166.                     {% endif %}
  167.                 </div>
  168.             </div>
  169.             <div class="{{ grid_right_class }}">
  171.                 {% if not pimcore_textarea("content-title").isEmpty %}
  172.                     {% if pimcore_select("content-heading").isEmpty() %}
  173.                         <span class="uk-h2 {{ pimcore_select("content-heading-underlined").getData() }}">
  174.                             {{ pimcore_textarea("content-title", {
  175.                             "nl2br" : true})|raw }}
  176.                         </span>
  177.                     {% else %}
  178.                         {% set content_heading = pimcore_select("content-heading").getData() %}
  179.                         <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }} {{ pimcore_select("content-heading-underlined").getData() }}">
  180.                             {{ pimcore_textarea("content-title", {
  181.                             "nl2br" : true})|raw }}
  182.                         </{{ content_heading }}>
  183.                     {% endif %}
  184.                 {% endif %}
  186.                 {{ pimcore_wysiwyg("content") }}
  188.                 {% if not pimcore_link("content-btn").isEmpty() %}
  189.                     <div class="actions">
  190.                         {{ pimcore_link("content-btn", {
  191.                             "class" : "uk-link"
  192.                         }) }}
  193.                     </div>
  194.                 {% endif %}
  196.             </div>
  197.         </div>
  198.     </div>
  199.     
  200. </div>
  202. {% endif %}