templates/areas/col/view.html.twig line 1

Open in your IDE?
  1. {% extends 'areas/col/options.html.twig' %}
  2. {% block view %}
  3.   {% if colBackground == "image" and colImage %}
  4.     {% set markers = colImage.getMarker() %}
  5.     {% set markerX = '' %}
  6.     {% set markerY = '' %}
  7.     {% set break = false %}
  8.     {% for marker in markers %}
  9.       {% if not break %}
  10.         {% if marker.data == [] and marker.name == '' %}
  11.           {% set markerX = marker.left %}
  12.           {% set markerY = marker.top %}
  13.           {% set break = true %}
  14.         {% endif %}
  15.       {% endif %}
  16.     {% endfor %}
  17.     {% if markerX > 0 and markerY > 0 %}
  18.       {% set imagePosition = image_marker_position_x_y(markerX, markerY) %}
  19.     {% else %}
  20.       {% set imagePosition = 'center-center' %}
  21.     {% endif %}
  22.   {% endif %}
  23.   {% if contentInclude is not defined %}
  24.     {% set colSizeLgValue = colSizeLgSelect.getData() %}
  25.     {% set colSizeMdValue = colSizeMdSelect.getData() %}
  26.     {% set colSizeSmValue = colSizeSmSelect.getData() %}
  27.     {% set colOpacityValue = colOpacity.getData() %}
  28.     {% set colGradientOpacityValue = colGradientOpacity.getData() %}
  29.     {% set colMarginSelectValue = colMarginSelect.getData() %}
  30.   {% endif %}
  31.   {% if colSizeLgValue == '12' %}
  32.     {% set thumbnailSize = 'col-12' %}
  33.   {% elseif colSizeLgValue == '11' %}
  34.     {% set thumbnailSize = 'col-11' %}
  35.   {% elseif colSizeLgValue == '10' %}
  36.     {% set thumbnailSize = 'col-10' %}
  37.   {% elseif colSizeLgValue == '9' %}
  38.     {% set thumbnailSize = 'col-9' %}
  39.   {% elseif colSizeLgValue == '8' %}
  40.     {% set thumbnailSize = 'col-8' %}
  41.   {% elseif colSizeLgValue == '7' %}
  42.     {% set thumbnailSize = 'col-7' %}
  43.   {% elseif colSizeLgValue == '6' and colHeightSelect.text == '' %}
  44.     {% set thumbnailSize = 'col-6' %}
  45.   {% elseif colSizeLgValue == '6' and colHeightSelect.text > '49' %}
  46.     {% set thumbnailSize = 'col-9' %}
  47.   {% elseif colSizeLgValue == '5' %}
  48.     {% set thumbnailSize = 'col-5' %}
  49.   {% elseif colSizeLgValue == '4' %}
  50.     {% set thumbnailSize = 'col-4' %}
  51.   {% elseif colSizeLgValue == '3' and colHeightSelect.text == '' %}
  52.     {% set thumbnailSize = 'col-3' %}
  53.   {% elseif colSizeLgValue == '3' and colHeightSelect.text > '49' %}
  54.     {% set thumbnailSize = 'col-6' %}
  55.   {% else %}
  56.     {% set thumbnailSize = 'col-auto' %}
  57.   {% endif %}
  58.   {% set marginAlign = '' %}
  59.   {% if colCreateSpacerSelect.isChecked() == true %}
  60.     {% set colWidthSm = 100 %}
  61.     {% set colWidthMd = 100 %}
  62.     {% set colWidthLg = 100 %}
  63.     {% if colSizeSmValue != 'auto' %}
  64.       {% set colWidthSm = (100 / 12) * (12 - colSizeSmValue) %}
  65.     {% endif %}
  66.     {% if colSizeMdValue != 'auto' %}
  67.       {% set colWidthMd = (100 / 12) * (12 - colSizeMdValue) %}
  68.     {% endif %}
  69.     {%  if colSizeLgValue != 'auto' %}
  70.       {% set colWidthLg = (100 / 12) * (12 - colSizeLgValue) %}
  71.     {% endif %}
  72.     {% set marginAlign %}
  73.       --colMarginSm: {{colWidthSm}}%;
  74.       --colMarginMd: {{colWidthMd}}%;
  75.       --colMarginLg: {{colWidthLg}}%;
  76.     {% endset %}
  77.   {% endif %}
  78.   {% if colPaddingLeftRightSelect == null or colStickySelect.isChecked() %}
  79.     {% set colPaddingLeftRightClass = '' %}
  80.   {% else %}
  81.     {% set colPaddingLeftRightClass = colPaddingLeftRightSelect %}
  82.   {% endif %}
  83.   {% if colPaddingTopBottomSelect == null or colStickySelect.isChecked() %}
  84.     {% set colPaddingTopBottomClass = '' %}
  85.   {% else %}
  86.     {% set colPaddingTopBottomClass = colPaddingTopBottomSelect %}
  87.   {% endif %}
  88.   {#% if colInnerTopBottomSelect == null or colStickySelect.isChecked() %}
  89.     {% set colInnerTopBottomClass = '' %}
  90.   {% else %}
  91.     {% set colInnerTopBottomClass = colInnerTopBottomSelect %}
  92.   {% endif %#}
  93.   {% set gradientHtml %}
  94.     {# gradient #}
  95.     {% if (colBackground == 'video' or colBackground == 'image') and colGradientAlignment != 'none' and not editmode %}
  96.       {% if colGradientOpacityValue %}
  97.         {% set opacity = colGradientOpacityValue / 100 %}
  98.       {% endif %}
  99.       {% if colGradientColorSelect is not defined or colGradientColorSelect is null %}
  100.         {% set colGradientColorSelect = 'dark' %}
  101.       {% endif %}
  102.       <div class="gradient-{{colGradientAlignment}} gradient-color-{{colGradientColorSelect}} "{% if colGradientOpacity.number %} style="--gradientOpacity: {{opacity}}; --gradientSize: {{colGradientSize}}%;"{% endif %}></div>
  103.     {% endif %}
  104.   {% endset %}
  105.   <div
  106.     {% if editmode %}
  107.       data-width="{% if colSizeLgValue != 'auto' %}{{colSizeLgValue}}{% elseif colSizeMdValue != 'auto' %}{{colSizeMdValue}}{% elseif colSizeSmValue != 'auto' %}{{colSizeSmValue}}{% endif %}"
  108.     {% endif %}
  109.     class="c-col {{ colBehaveOffset }} {{colMarginSelectValue}}
  110.     {% if colStickySelect.isChecked() != true %}c-col__height--{{colHeightSelect}}{% endif %}
  111.     {# Alignment #}
  112.     align-self-{{colAlign}}
  113.     {# sticky #}
  114.     {% if colStickySelect.isChecked() == true and not editmode %}c-col__sticky{% endif %}
  115.     {# not equal hight #}
  116.     {% if colNotEqualHightSelect.isChecked() == true %}c-col__not-equal{% endif %}
  117.     {# grid #}
  118.     {% if not editmode %}
  119.       col-sm{% if colSizeSmValue != 'auto' %}-{{colSizeSmValue}}{% endif %}
  120.       col-md-{% if colSizeMdValue != 'auto' %}{{colSizeMdValue}}{% endif %}
  121.       col-lg-{% if colSizeLgValue != 'auto' %}{{colSizeLgValue}}{% endif %}
  122.     {% endif %}
  123.     {# gradient #}
  124.     {% if colStickySelect.isChecked() == true %}
  125.       gradient
  126.     {% endif %}
  127.     {% if colBackground == 'none' %}
  128.       background-{{colBackground}}
  129.     {% endif %}
  130.     "
  131.     {# spacer #}
  132.     {% if colCreateSpacerSelect.isChecked() == true and not editmode %}
  133.       style="{{marginAlign}}"
  134.     {% endif %}
  135.   >
  136.     {% set contentBlock %}
  137.       {% if contentInclude is not defined %}
  138.         {{ pimcore_areablock('colblock', {
  139.             'reload': true,
  140.             "allowed": ["wysiwyg", "image", "video", "separator", "accordion", "slider", "map", "html", "filter", "contact", "magazine", "angular-load-offer", "job", "loginbox", "downloadlist", "formular", "password-reset", "password-change", "angulartable", "angularbuttons", "angularkeygen", "angularform", "angularaccordion", "first-login", "first-login-password", "angularmessage", "angularbutton-group"],
  141.             "params": {
  142.               "colSize": colSizeLgValue
  143.             },
  144.             "group": {
  145.               "Standard": ["wysiwyg", "image", "video", "separator", "accordion", "slider", "map", "html", "formular"],
  146.               "Datenobjekte": ["filter", "contact", "magazine", "job", "loginbox", "downloadlist", "password-reset", "password-change", "first-login", "first-login-password"],
  147.               "Erweitert": ["angulartable", "angularbuttons", "angularform", "angularaccordion", "angularkeygen", "angular-load-offer", "angularmessage", "angularbutton-group"]
  148.             }
  149.           })
  150.         }}
  151.       {% else %}
  152.         {% for componentVar in componentVars %}
  153.           {% include 'areas/' ~ componentVar['componentName'] ~ '/view.html.twig' with componentVar %}
  154.         {% endfor %}
  155.       {% endif %}
  156.     {% endset %}
  157.     {% if colBackground != 'none' %}
  158.       {% if colBackground == "video" and not editmode %} {# and not editmode #}
  159.         <div class="c-col__video{% if colStickySelect.isChecked() == true %} c-col__sticky{% endif %}">
  160.           {% if editmode %}
  161.           {# {{ colVideo | raw }} #}
  162.           {% else %}
  163.             {{ colVideo | raw }}
  164.             {{gradientHtml | raw}}
  165.           {% endif %}
  166.         </div>
  167.       {% endif %}
  168.       {# Sticky image background #}
  169.       {% if colBackground == "image" and colStickySelect.isChecked() == true and colImage is defined and colImage is not null %}  {# and not editmode #}
  170.         <div class="c-col__sticky">
  171.           <div class="c-col__image" style="background-image: url({{ colImage.getThumbnail(thumbnailSize) }}); background-position: {{imagePosition|replace({'-' : ' '})}}"></div>
  172.           {{gradientHtml | raw}}
  173.         </div>
  174.       {% endif %}
  175.       <div class="c-col__wrapper {% if colBackground == 'border' %}border-color-primary-light{% else %}background-{{colBackground}}{% endif %} justify-content-{{colAlignContent}} {{colPaddingLeftRightClass}} {{colPaddingTopBottomClass}} {#{colInnerTopBottomClass}#}"
  176.       style="{% if colBackground == "image" and colStickySelect.isChecked() != true and colImage %}
  177.       background-image: url({{ colImage.getThumbnail(thumbnailSize) }}); background-position: {{imagePosition|replace({'-' : ' '})}};{% endif %}
  178.       {% if colOpacityValue %}
  179.         {% set opacity = colOpacityValue / 100 %}
  180.         --background-opacity: {{opacity}};
  181.       {% endif %}
  182.       "
  183.       >
  184.         {{gradientHtml | raw}}
  185.         {{contentBlock}}
  186.       </div>
  187.     {% else %}
  188.       {{contentBlock}}
  189.     {% endif %}
  190.     {# Border
  191.     {% if colBorderSelect.isChecked() == true %}
  192.       <div class="c-col__wrapper justify-content-{{colAlignContent}} {{colPaddingLeftRightClass}} {{colInnerTopBottomClass}} border-color-primary-light">
  193.         <div class="c-col {{ colBehaveOffset }} {{colMarginSelectValue}} align-self-{{colAlign}}">
  194.           {{contentBlock}}
  195.         </div>
  196.       </div>
  197.     {% endif %}#}
  198.   </div>
  199. {% endblock %}