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

Open in your IDE?
  1. {% extends 'areas/row/editables.html.twig' %}
  3. {% block view %}
  4.   {% set timestamp = 'now'|date('u') %}
  6.   {% if rowBackground == "image" %}
  7.     {% set markers = rowImage.getMarker() %}
  8.     {% set markerX = '' %}
  9.     {% set markerY = '' %}
  10.     {% set break = false %}
  12.     {% for marker in markers %}
  13.       {% if not break %}
  14.         {% if marker.data == [] and marker.name == '' %}
  15.           {% set markerX = marker.left %}
  16.           {% set markerY = marker.top %}
  17.           {% set break = true %}
  18.         {% endif %}
  19.       {% endif %}
  20.     {% endfor %}
  22.     {% if markerX > 0 and markerY > 0 %}
  23.       {% set imagePosition = image_marker_position_x_y(markerX, markerY) %}
  24.     {% else %}
  25.       {% set imagePosition = 'center-center' %}
  26.     {% endif %}
  27.   {% endif %}
  29.   {% if rowWidth == 'full-width' %}
  30.     {% set containerWidth = '-fluid' %}
  31.   {% else %}
  32.     {% set containerWidth = '' %}
  33.   {% endif %}
  35.   {# {% if rowBorder == 'border' %}
  36.     {% set borderValue = 'border' %}
  37.   {% else %}
  38.     {% set borderValue = '' %}
  39.   {% endif %} #}
  41.   {# {% if contentInclude is not defined %}
  42.     {% set rowBorderSelectValue = rowBorderSelect.isChecked() %}
  43.   {% endif %} #}
  45.   {% if contentInclude is not defined %}
  46.     {% set rowGutterSelectValue = rowGutterSelect.isChecked() %}
  47.   {% endif %}
  49.   {% if rowContainerWidth is not defined %}
  50.     {% set rowContainerWidth = 'spacing-component-container-width-none' %}
  51.   {% endif %}
  53.   {% if rowBorderSelect is not defined %}
  54.     {% set rowBorderSelect = false %}
  55.   {% endif %}
  57.   {% if wysiwygBackground is not defined %}
  58.     {% set wysiwygBackground = 'none' %}
  59.   {% endif %}
  61.   {% if rowPaddingLeftRight == null or rowEffects == 'sticky' %}
  62.     {% set rowPaddingLeftRightClass = '' %}
  63.   {% else %}
  64.     {% set rowPaddingLeftRightClass = rowPaddingLeftRight %}
  65.   {% endif %}
  67.   {% if rowPaddingTopBottom == null or rowEffects == 'sticky' %}
  68.     {% set rowPaddingTopBottomClass = '' %}
  69.   {% else %}
  70.     {% set rowPaddingTopBottomClass = rowPaddingTopBottom %}
  71.   {% endif %}
  73.   {# Set rowPaddingClass. For example 'spacing-padding-top spacing-padding-bottom' #}
  74.   {# {% if rowPadding == null or rowPadding == 'spacing-padding-none' or rowBackground == "video" or rowStickyValue == true %} #}
  75.     {# {% set rowPaddingClass = '' %} #}
  76.   {# {% else %} #}
  77.     {# {% set rowPaddingClass = rowPadding ~ '-top ' ~ rowPadding ~ '-bottom' %} #}
  78.     {# {% set rowPaddingClass = rowPadding %} #}
  79.   {# {% endif %} #}
  81.   <section class="c-row js-anchor-target {{rowMargin}} {% if rowContainerWidth == 'spacing-component-container-width-none' %}  {{rowPaddingLeftRightClass}} {{rowPaddingTopBottomClass}}  background-{{rowBackground}} {% endif %}
  82.     {# Fix height if not sticky #}
  83.     {% if rowEffects != 'sticky' %}c-row__height--{{rowHeight}}{% endif %}
  84.     {% if (rowBackground == 'video' or rowBackground == 'image') and rowGradient != 'none' and not editmode %}gradient-color-{{rowShade}}{% endif %}
  86.     {# Parallax #}
  87.     {% if rowEffects == 'parallax' %}c-row__parallax{% endif %}
  88.    "
  89.     {# Background image if not sticky and background position if not parallax #}
  90.     {% if rowContainerWidth == 'spacing-component-container-width-none' %}
  92.     {% if rowBackground == "image" and rowEffects != 'sticky' %}
  93.       style="background-image: url({{ rowImage.thumbnail('content-full') }});background-repeat: no-repeat; background-size: cover;{% if rowEffects != 'parallax' %} background-position: {{imagePosition|replace({'-' : ' '})}}{% endif %}"
  94.     {% endif %}
  95.     {% endif %}
  96.     data-area-name="{{rowAnchor}}" data-target="{{timestamp}}" {% if editmode %}id="{{timestamp}}"{% endif %}
  97.   >
  99.   {# gradient #}
  100.   {% set gradient %}
  101.     {% if (rowBackground == 'video' or rowBackground == 'image') and rowGradient != 'none' %}
  102.       {% if rowGradientOpacity.number %}
  103.         {% set opacity = rowGradientOpacity.number / 100 %}
  104.       {% endif %}
  105.       {% if rowShade is not defined or rowShade is null %}
  106.         {% set rowShade = 'dark' %}
  107.       {% endif %}
  108.       <div class="gradient-{{rowGradient}} gradient-color-{{rowShade}}"{% if rowGradientOpacity.number %} style="--gradientOpacity: {{opacity}}; --gradientSize: {% if editmode %}100{% else %}{{rowGradientSize}}{% endif %}%"{% endif %}></div>
  109.     {% endif %}
  110.   {% endset %}
  112.   {% if rowBackground == "image" and rowEffects != 'sticky' %}
  113.     {{gradient}}
  114.   {% endif %}
  117.     {# video background #}
  118.      {% if rowBackground == "video" %} {# and not editmode #}
  119.       <div class="c-row__video{% if rowEffects == 'sticky' %} c-row__sticky{% endif %}">
  120.         {% if editmode %}
  121.           {# {{ dump(rowVideo.getPosterAsset()) }} #}
  122.         {% else %}
  123.           {{ rowVideo | raw }}
  124.           {{gradient}}
  125.         {% endif %}
  126.       </div>
  127.     {% endif %}
  129.     {# Sticky image background #}
  130.     {% if rowBackground == "image" and rowEffects == 'sticky' %}  {# and not editmode #}
  131.       <div class="c-row__sticky">
  132.         <div class="c-row__image" style="background-image: url({{ rowImage.thumbnail('content-full') }}); background-position: {{imagePosition|replace({'-' : ' '})}}; background-repeat: no-repeat; background-size: cover;"></div>
  133.         {{gradient}}
  134.       </div>
  135.     {% endif %}
  137.     <div class="container{{containerWidth}} {% if rowWidth == 'full-width' %}p-0{% endif %} {% if rowGutterSelectValue == false and rowWidth == 'full-width' %}overflow-hidden{% endif %}">
  138.       <div class="row justify-content-{{rowJustify}} {% if rowGutterSelectValue == true %}g-0{% endif %} {% if rowBorderSelect == true %}border-color-primary-light{% endif %} {% if rowContainerWidth == 'spacing-component-container-width' %} {{rowPaddingLeftRightClass}} {{rowPaddingTopBottomClass}} background-{{rowBackground}} m-0 {% endif %}"
  139.       {# background image same size as container #}
  140.       {% if rowBackground == "image" and rowEffects != 'sticky' %}
  141.         style="background-image: url({{ rowImage.thumbnail('content-full') }});background-repeat: no-repeat; background-size: cover;{% if rowEffects != 'parallax' %} background-position: {{imagePosition|replace({'-' : ' '})}}{% endif %}"
  142.       {% endif %}
  143.       >
  145.         {% if contentInclude is not defined %}
  146.           {% set cols = pimcore_block('gridblock', {
  147.             reload: true,
  148.             class: 'editmode__pimcore-block-button'
  149.           }) %}
  150.           {% set colStickyVisible = true %}
  151.           {% if rowGutterSelectValue == false and rowWidth == 'full-width' %}
  152.             {% set colStickyVisible = false %}
  153.           {% endif %}
  155.           {% for col in cols.iterator %}
  156.             {% if editmode %}
  157.               <div class="editmode-col col {% if rowShade == 'bright' %}gradient-text-color-bright{% endif %}" style="border: 2px dashed rgba(0,0,0, 0.3);">
  158.                 {# {% include "areas/col/view.html.twig" with {'rowBackground': rowBackground} %} #}
  159.                 {% include "areas/col/view.html.twig" with {'rowJustify': rowJustify, 'colStickyVisible': colStickyVisible} %}
  160.               </div>
  161.             {% else %}
  162.               {% include "areas/col/view.html.twig" with {'rowJustify': rowJustify, 'colStickyVisible': colStickyVisible} %}
  163.             {% endif %}
  164.           {% endfor %}
  165.         {% else %}
  166.           {% for col in cols %}
  167.               {% include 'areas/col/view.html.twig' with col %}
  168.           {% endfor %}
  169.         {% endif %}
  170.       </div>
  171.     </div>
  172.   </section>
  174.   {% if editmode %}
  175.   {# Sets col width according to selection, only for backend view #}
  176.     <script>
  177.       (function() {
  178.         const rows = document.querySelectorAll('.c-row');
  179.         const cols = document.querySelectorAll('.c-row .editmode-col');
  181.         rows.forEach((row) => {
  182.           let childRow = row.querySelector('.row');
  183.           let blockEntry = row.querySelectorAll('.pimcore_block_entry');
  184.           let block = row.querySelector('.pimcore_editable_block');
  186.           if (block && blockEntry?.length > 0) {
  187.             childRow.classList.forEach((htmlClass) => {
  188.               block.classList.add(htmlClass);
  189.             });
  190.           }
  191.         });
  193.         cols.forEach((col) => {
  194.           let childCol = col.querySelector('.c-col');
  196.           if (childCol && childCol.dataset.width) {
  197.             col.parentElement.classList.add('col-' + childCol.dataset.width);
  198.           } else if (childCol && !childCol.dataset.width) {
  199.             col.parentElement.classList.add('col');
  200.           }
  201.         });
  202.       })();
  203.     </script>
  204.   {% endif %}
  205. {% endblock %}