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

Open in your IDE?
  1. <div class="container">
  2.     {% if editmode %}
  3.         <div class="row">
  4.             <div class="col-12">
  5.                 <div class="alert alert-primary p-3" role="alert">
  6.                     <div class="row g-3 align-items-center">
  8.                         <div class="col-auto">
  9.                             <div class="me-3 d-inline-block">
  11.                                 {{ "Aantal kolommen"|trans({}, 'admin') }}
  13.                                 {{ pimcore_select("colNumber", {
  14.                                     "store": [
  15.                                         ["1", "1"],
  16.                                         ["2", "2"],
  17.                                         ["3", "3"],
  18.                                         ["4", "4"],
  19.                                         ["6", "6"]
  20.                                     ],
  21.                                     "reload" : true,
  22.                                     "defaultValue" : "1",
  23.                                     "class" : "ms-3"
  24.                                 }) }}
  26.                             </div>
  27.                         </div>
  29.                         <div class="col-auto d-flex align-items-center">
  30.                             <div class="ms-3 d-inline-block">
  31.                                 {{ pimcore_checkbox('marginBottom', {
  32.                                     'reload' : false
  33.                                 }) }}
  34.                                 {{ 'Marge onderaan'|trans({}, 'admin') }}
  36.                             </div>
  37.                         </div>
  39.                         <div class="col-auto d-flex align-items-center">
  40.                             <div class="ms-3 d-inline-block">
  41.                                 {{ pimcore_checkbox('marginTop', {
  42.                                     'reload' : false
  43.                                 }) }}
  44.                                 {{ 'Marge bovenaan'|trans({}, 'admin') }}
  46.                             </div>
  47.                         </div>
  50.                     </div>
  51.                 </div>
  52.             </div>
  53.         </div>
  54.     {% endif %}
  56.     {# // Set Colwidth #}
  57.     {% set colNumber = pimcore_select("colNumber").getData() %}
  58.     {% if colNumber == 1 %}
  59.         {% set colWidth = 'col-12 col-lg-12' %}
  60.     {% elseif colNumber == 2 %}
  61.         {% set colWidth = 'col-12 col-lg-6' %}
  62.     {% elseif colNumber == 3 %}
  63.         {% set colWidth = 'col-12 col-lg-4' %}
  64.     {% elseif colNumber == 4 %}
  65.         {% set colWidth = 'col-6 col-lg-3' %}
  66.     {% elseif colNumber == 6 %}
  67.         {% set colWidth = 'col-6 col-lg-2' %}
  68.     {% else %}
  69.         {% set colWidth = 'col-6 col-lg-12' %}
  70.     {% endif %}
  73.     <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">
  75.         {# // Make columns #}
  76.         {% for x in 1..colNumber %}
  77.             {% if editmode %}
  78.                 <div class="{{ colWidth }}">
  79.                     <div class="border border-1 border-black mb-3 p-3"
  80.                          style="background-color:{{ pimcore_input("colColor-"~x).getData() }}">
  81.                         {{ 'Achtergrondafbeelding'|trans({}, 'admin') }}
  82.                         {{ pimcore_image("bg-image-"~x, {
  83.                             "thumbnail" : "colThumb",
  84.                             "width" : 300,
  85.                             "height" : 300,
  86.                             "class" : "img-fluid"
  87.                         }) }}
  89.                         <div>
  90.                             {{ 'Shape'|trans({}, 'admin') }}
  91.                             {{ pimcore_checkbox("shape-"~x, {
  92.                                 "reload" : false,
  93.                                 "class" : 'd-inline-block p-1 w-100 border border-1 border-primary bg-white'
  94.                             }) }}
  95.                         </div>
  97.                         <div>
  98.                             {{ 'Background color'|trans({}, 'admin') }}
  99.                             {{ pimcore_input("colColor-"~x, {
  100.                                 "reload" : true,
  101.                                 "class" : 'd-inline-block p-1 w-100 border border-1 border-primary bg-white'
  102.                             }) }}
  103.                         </div>
  105.                         <div>
  106.                             {{ 'Hover color'|trans({}, 'admin') }}
  107.                             {{ pimcore_input("colHoverColor-"~x, {
  108.                                 "reload" : true,
  109.                                 "class" : 'd-inline-block p-1 w-100 border border-1 border-primary bg-white'
  110.                             }) }}
  111.                         </div>
  114.                         <div>
  115.                             {{ 'Link'|trans({}, 'admin') }}
  116.                             {{ pimcore_link("colLink-"~x) }}
  117.                         </div>
  119.                         <div>
  120.                             {{ 'Text'|trans({}, 'admin') }}
  121.                             {{ pimcore_wysiwyg("content-"~x, {
  122.                                 "height" : 200,
  123.                                 "customConfig" : "/static/ckeditor/ckeditor_config.js",
  124.                             }) }}</div>
  125.                     </div>
  126.                 </div>
  127.             {% endif %}
  130.             {% if not editmode %}
  131.                 <div class="{{ colWidth }}">
  132.                     <div class="area-col">
  133.                         <div class="area-col-inner position-relative {% if pimcore_checkbox("shape-"~x).isChecked() %}area-shape area-shape-default{% endif %}"
  134.                              style="background-color:{{ pimcore_input("colColor-"~x).getData() }};">
  136.                             {#
  137.                             {% if pimcore_link("colLink-"~x) %}
  138.                             <a href="{{ pimcore_link("colLink-"~x).getHref() }}" class="d-block h-100"
  139.                                target="{{ pimcore_link("colLink-"~x).getTarget() }}">
  140.                                 {% endif %}#}
  143.                             {% if editmode %}
  144.                                 <div class="d-block h-100">
  145.                                     {{ pimcore_image("bg-image-"~x, {
  146.                                         "thumbnail" : "colThumb",
  147.                                         "class" : "img-fluid"
  148.                                     }) }}
  149.                                 </div>
  150.                                 <img src="{{ pimcore_image("bg-image-"~x).getThumbnail("column-thumb") }}"
  151.                                      class="img-fluid">
  152.                             {% endif %}
  154.                             {% if not editmode and not pimcore_image("bg-image-"~x).isEmpty() %}
  155.                                 <div class="d-block h-100 w-100 area-col-inner-img position-absolute start-0 top-0">
  156.                                     <img src="{{ pimcore_image("bg-image-"~x).getThumbnail("column-thumb") }}"
  157.                                          class="">
  158.                                 </div>
  160.                             {% endif %}
  163.                             {#
  164.                             <div class="overlay"
  165.                                  style=" background-color:{{ pimcore_input("colHoverColor-"~x).getdata() }} ">
  166.                             </div>#}
  168.                             <div class="{#top-0 start-0 h-100 w-100#} d-flex align-items-center area-col-text p-5">
  169.                                 <div class="w-100">
  170.                                     {% if pimcore_link("colLink-"~x) %}
  171.                                         <h2 class="text-white m-0">{{ pimcore_link("colLink-"~x).getText() }}</h2>
  172.                                     {% endif %}
  174.                                     {{ pimcore_wysiwyg("content-"~x, {
  175.                                         "height" : 200
  176.                                     }) }}
  177.                                 </div>
  178.                             </div>
  179.                             {#
  180.                                                             {% if pimcore_link("colLink-"~x) %}
  181.                                                         </a>
  182.                                                         {% endif %}#}
  184.                         </div>
  186.                         {% if pimcore_checkbox("shape-"~x).isChecked() %}
  187.                             <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
  188.                                 <clipPath clipPathUnits="objectBoundingBox" id="shapeyellow">
  189.                                     <path d="M0.536,0.991 s-0.414,0.038,-0.47,-0.038 C0.013,0.879,-0.009,0.825,0.004,0.696 s0.013,-0.268,0.013,-0.376 C0.018,0.133,0.026,0.017,0.269,0.006 C0.512,-0.005,0.731,-0.001,0.854,0.023 c0.121,0.023,0.14,0.05,0.143,0.241 c0.003,0.192,0.017,0.613,-0.062,0.688 c-0.054,0.051,-0.125,0.042,-0.399,0.038"></path>
  191.                                 </clipPath>
  192.                             </svg>
  193.                         {% endif %}
  195.                     </div>
  196.                 </div>
  197.             {% endif %}
  198.         {% endfor %}
  200.     </div>
  202. </div><!--end container-->