templates/areas/wysiwyg-columns/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  2.     <div class="row">
  3.         <div class="col-12">
  4.             <div class="alert alert-info p-3" role="alert">
  5.                 <div class="row g-3 align-items-center">
  7.                     <div class="col-auto d-flex align-items-center">
  8.                         <div class="me-3 d-inline-block">
  10.                             {{ "Aantal kolommen"|trans({}, 'admin') }}
  12.                             {{ pimcore_select("colNumber", {
  13.                                 "store": [
  14.                                     ["1", "1"],
  15.                                     ["2", "2"],
  16.                                     ["3", "3"],
  17.                                     ["4", "4"],
  18.                                     ["6", "6"]
  19.                                 ],
  20.                                 "reload" : true,
  21.                                 "defaultValue" : "1",
  22.                                 "class" : "ms-3"
  23.                             }) }}
  25.                         </div>
  26.                     </div>
  28.                     <div class="col-auto d-flex align-items-center">
  29.                         <div class="ms-3 d-inline-block">
  30.                             {{ pimcore_checkbox('marginBottom', {
  31.                                 'reload' : false
  32.                             }) }}
  33.                             {{ 'Marge onderaan'|trans({}, 'admin') }}
  35.                         </div>
  36.                     </div>
  38.                     <div class="col-auto d-flex align-items-center">
  39.                         <div class="ms-3 d-inline-block">
  40.                             {{ pimcore_checkbox('marginTop', {
  41.                                 'reload' : false
  42.                             }) }}
  43.                             {{ 'Marge bovenaan'|trans({}, 'admin') }}
  45.                         </div>
  46.                     </div>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </div>
  53. {% endif %}
  55.     {# // Set Colwidth #}
  56.     {% set colNumber = pimcore_select("colNumber").getData() %}
  57.     {% if colNumber == 1 %}
  58.         {% set colWidth = 'col-12 col-lg-12' %}
  59.     {% elseif colNumber == 2 %}
  60.         {% set colWidth = 'col-12 col-lg-6' %}
  61.     {% elseif colNumber == 3 %}
  62.         {% set colWidth = 'col-12 col-lg-4' %}
  63.     {% elseif colNumber == 4 %}
  64.         {% set colWidth = 'col-6 col-lg-3' %}
  65.     {% elseif colNumber == 6 %}
  66.         {% set colWidth = 'col-6 col-lg-2' %}
  67.     {% else %}
  68.         {% set colWidth = 'col-6 col-lg-12' %}
  69.     {% endif %}
  72. <div class="row {% if pimcore_checkbox('marginBottom').isChecked() %}mb-5{% endif %} {% if pimcore_checkbox('marginTop').isChecked() %}mt-5{% endif %} gy-3 gy-lg-0 justify-content-center">
  74.     {# // Make columns #}
  75.     {% for x in 1..colNumber %}
  76.         {% if editmode %}
  77.             <div class="{{ colWidth }}">
  78.                 <div class="border border-1 border-black mb-3 p-3"
  79.                      style="background-color:#{{ pimcore_color_picker('color_picker-'~x).getData() }}">
  80.                     {{ 'Achtergrondafbeelding'|trans({}, 'admin') }}
  81.                     {{ pimcore_image("bg-image-"~x, {
  82.                         "thumbnail" : "column-thumb",
  83.                         "width" : 300,
  84.                         "height" : 300,
  85.                         "class" : "img-fluid"
  86.                     }) }}
  88.                     <div>
  89.                         {{ 'Background color'|trans({}, 'admin') }}
  90.                         {{ pimcore_color_picker('color_picker-'~x,{defaultValue: 'eb5e1b',"reload" : true})}}
  91.                     </div>
  93.                     {#
  94.                     <div>
  95.                         {{ 'Hover color'|trans({}, 'admin') }}
  96.                         {{ pimcore_color_picker("colHoverColor-"~x,{defaultValue: 'eb5e1b',"reload" : true})}}
  97.                     </div> #}
  100.                     <div>
  101.                         {{ 'Link'|trans({}, 'admin') }}
  102.                         {{ pimcore_link("colLink-"~x) }}
  103.                     </div>
  105.                     <div>
  106.                         {{ 'Text'|trans({}, 'admin') }}
  107.                         {{ pimcore_wysiwyg("content-"~x, {
  108.                             "height" : 200,
  109.                             "customConfig" : "/static/ckeditor/ckeditor_config.js",
  110.                         }) }}</div>
  111.                 </div>
  112.             </div>
  113.         {% endif %}
  116.         {% if not editmode %}
  117.             <div class="{{ colWidth }}">
  118.                 <div class="area-col">
  119.                     <div class="area-col-inner position-relative"
  120.                          style="background-color:#{{ pimcore_color_picker("color_picker-"~x).getData() }};">
  122.                         {#
  123.                         {% if pimcore_link("colLink-"~x) %}
  124.                         <a href="{{ pimcore_link("colLink-"~x).getHref() }}" class="d-block h-100"
  125.                            target="{{ pimcore_link("colLink-"~x).getTarget() }}">
  126.                             {% endif %}#}
  129.                         {% if editmode %}
  130.                             <div class="d-block h-100">
  131.                                 {{ pimcore_image("bg-image-"~x, {
  132.                                     "thumbnail" : "column-thumb",
  133.                                     "class" : "img-fluid"
  134.                                 }) }}
  135.                             </div>
  136.                             <img src="{{ pimcore_image("bg-image-"~x).getThumbnail("column-thumb") }}"
  137.                                  class="img-fluid">
  138.                         {% endif %}
  140.                         {% if not editmode and not pimcore_image("bg-image-"~x).isEmpty() %}
  141.                             <div class="d-block h-100 w-100 area-col-inner-img position-absolute start-0 top-0">
  142.                                 <img src="{{ pimcore_image("bg-image-"~x).getThumbnail("column-thumb") }}"
  143.                                      class="">
  144.                             </div>
  146.                         {% endif %}
  149.                         <div class="d-flex align-items-center area-col-text p-5">
  150.                             <div class="w-100">
  151.                                 {% if pimcore_link("colLink-"~x) %}
  152.                                     <h2 class="text-white m-0">{{ pimcore_link("colLink-"~x).getText() }}</h2>
  153.                                 {% endif %}
  155.                                 {{ pimcore_wysiwyg("content-"~x, {
  156.                                     "height" : 200
  157.                                 }) }}
  158.                             </div>
  159.                         </div>
  160.                         {#
  161.                                                         {% if pimcore_link("colLink-"~x) %}
  162.                                                     </a>
  163.                                                     {% endif %}#}
  165.                     </div>
  167.                 </div>
  168.             </div>
  169.         {% endif %}
  170.     {% endfor %}
  172. </div>