custom/plugins/zenitPlatformHorizon/src/Resources/views/storefront/element/cms-element-zen-teaser.html.twig line 1

Open in your IDE?
  1. {% block element_zen_teaser %}
  2.     {% set config = element.fieldConfig.elements %}
  4.     {% set customClasses = config.customClasses.value %}
  6.     {% set elemClasses = [] %}
  7.     {% set elemClasses = ['hover-text-' ~ config.textHover.value]|merge(elemClasses) %}
  8.     {% set elemClasses = ['hover-image-' ~ config.imageHover.value]|merge(elemClasses) %}
  10.     {% set textClasses = [] %}
  11.     {% set textClasses = ['zen-font-family-' ~ config.fontFamily.value]|merge(textClasses) %}
  13.     {% set animationClasses = [] %}
  14.     {% if config.animationIn.value != 'none' %}
  15.         {% set animationClasses = ['animation-in-' ~ config.animationIn.value]|merge(animationClasses) %}
  16.     {% endif %}
  17.     {% if config.animationOut.value != 'none' %}
  18.         {% set animationClasses = ['animation-out-' ~ config.animationOut.value]|merge(animationClasses) %}
  19.     {% endif %}
  21.     {% set elemStyles = { } %}
  22.     {% if config.imageBorderRadius.value %}
  23.         {% set elemStyles = elemStyles|merge({ 'border-radius': config.imageBorderRadiusTopLeft.value ~ ' ' ~ config.imageBorderRadiusTopRight.value ~ ' ' ~ config.imageBorderRadiusBottomRight.value ~ ' ' ~ config.imageBorderRadiusBottomLeft.value }) %}
  24.     {% endif %}
  26.     {% set imgStyles = { } %}
  27.     {% if config.imageBorderRadius.value %}
  28.         {% set imgStyles = imgStyles|merge({ 'border-radius': config.imageBorderRadiusTopLeft.value ~ ' ' ~ config.imageBorderRadiusTopRight.value ~ ' ' ~ config.imageBorderRadiusBottomRight.value ~ ' ' ~ config.imageBorderRadiusBottomLeft.value }) %}
  29.     {% endif %}
  31.     {% if config.overlay.value %}
  32.         {% set overlayStyles = {
  33.             'background-color': (config.overlayColor.value ?: 'transparent'),
  34.             'opacity': (config.overlayOpacity.value ?: '0%'),
  35.         } %}
  36.         {% if config.imageBorderRadius.value %}
  37.             {% set overlayStyles = overlayStyles|merge({ 'border-radius': config.imageBorderRadiusTopLeft.value ~ ' ' ~ config.imageBorderRadiusTopRight.value ~ ' ' ~ config.imageBorderRadiusBottomRight.value ~ ' ' ~ config.imageBorderRadiusBottomLeft.value }) %}
  38.         {% endif %}
  39.     {% endif %}
  41.     {% set textContainerStyles = {
  42.         'align-items': (config.verticalTextAlign.value ?: 'flex-start'),
  43.         'justify-content': (config.horizontalTextAlign.value ?: 'flex-start'),
  44.     } %}
  46.     {% set textStyles = { } %}
  47.     {% if config.textBorderRadius.value %}
  48.         {% set textStyles = textStyles|merge({ 'border-radius': config.textBorderRadiusTopLeft.value ~ ' ' ~ config.textBorderRadiusTopRight.value ~ ' ' ~ config.textBorderRadiusBottomRight.value ~ ' ' ~ config.textBorderRadiusBottomLeft.value }) %}
  49.     {% endif %}
  50.     {% if config.textPaddings.value %}
  51.         {% set textStyles = textStyles|merge({ 'padding': config.textPaddingTop.value ~ ' ' ~ config.textPaddingRight.value ~ ' ' ~ config.textPaddingBottom.value ~ ' ' ~ config.textPaddingLeft.value }) %}
  52.     {% endif %}
  53.     {% if config.textMargins.value %}
  54.         {% set textStyles = textStyles|merge({ 'margin': config.textMarginTop.value ~ ' ' ~ config.textMarginRight.value ~ ' ' ~ config.textMarginBottom.value ~ ' ' ~ config.textMarginLeft.value }) %}
  55.     {% endif %}
  56.     {% if config.textAlign.value %}
  57.         {% set textStyles = textStyles|merge({ 'text-align': config.textAlign.value }) %}
  58.     {% endif %}
  59.     {% if config.fontSize.value %}
  60.         {% set textStyles = textStyles|merge({ 'font-size': config.fontSize.value }) %}
  61.     {% endif %}
  62.     {% if config.fontWeight.value %}
  63.         {% set textStyles = textStyles|merge({ 'font-weight': config.fontWeight.value }) %}
  64.     {% endif %}
  65.     {% if config.color.value %}
  66.         {% set textStyles = textStyles|merge({ 'color': config.color.value }) %}
  67.     {% endif %}
  68.     {% if config.backgroundColor.value %}
  69.         {% set textStyles = textStyles|merge({ 'background-color': config.backgroundColor.value }) %}
  70.     {% endif %}
  71.     {% if config.textMinWidth.value %}
  72.         {% set textStyles = textStyles|merge({ 'width': config.textMinWidth.value }) %}
  73.     {% endif %}
  74.     {% if config.textMaxWidth.value %}
  75.         {% set textStyles = textStyles|merge({ 'max-width': config.textMaxWidth.value }) %}
  76.     {% endif %}
  78.     <style>
  79.         {% if elemStyles %}
  80.             .cms-element-{{ element.type }}-{{ element.id }} {
  81.                 {% for property, value in elemStyles %}
  82.                     {{ property }}: {{ value }};
  83.                 {% endfor %}
  84.             }
  85.         {% endif %}
  87.         {% if imgStyles %}
  88.             .cms-element-{{ element.type }}-{{ element.id }} .cms-teaser-image {
  89.                 {% for property, value in imgStyles %}
  90.                     {{ property }}: {{ value }};
  91.                 {% endfor %}
  92.             }
  93.         {% endif %}
  95.         {% if overlayStyles %}
  96.             .cms-element-{{ element.type }}-{{ element.id }} .cms-teaser-overlay {
  97.                 {% for property, value in overlayStyles %}
  98.                     {{ property }}: {{ value }};
  99.                 {% endfor %}
  100.             }
  101.         {% endif %}
  103.         {% if textContainerStyles %}
  104.             .cms-element-{{ element.type }}-{{ element.id }} .cms-teaser-text-container {
  105.                 {% for property, value in textContainerStyles %}
  106.                     {{ property }}: {{ value }};
  107.                 {% endfor %}
  108.             }
  109.         {% endif %}
  111.         {% if textStyles %}
  112.             .cms-element-{{ element.type }}-{{ element.id }} .cms-teaser-text {
  113.                 {% for property, value in textStyles %}
  114.                     {{ property }}: {{ value }};
  115.                 {% endfor %}
  116.             }
  117.         {% endif %}
  119.         .cms-element-{{ element.type }}-{{ element.id }} .icon-cms-teaser {
  120.             width: {{ config.fontSize.value }};
  121.             height: {{ config.fontSize.value }};
  122.             color: {{ config.color.value }};
  123.         }
  125.         .cms-element-{{ element.type }}-{{ element.id }}.hover-text-distance-arrow .cms-teaser-text-value {
  126.             padding-right: {{ config.fontSize.value }};
  127.         }
  129.         .cms-element-{{ element.type }}-{{ element.id }}.hover-text-distance-arrow:hover .cms-teaser-text-value {
  130.             padding-right: calc( {{ config.fontSize.value }} + 10px );
  131.         }
  133.         .cms-element-{{ element.type }}-{{ element.id }}.hover-text-distance-arrow .icon-cms-teaser {
  134.             left: calc(100% - {{ config.fontSize.value }} - {{ config.textPaddingRight.value }})
  135.         }
  137.         .cms-element-{{ element.type }}-{{ element.id }}.hover-text-show-arrow :hover .cms-teaser-text-value {
  138.             padding-right: {{ config.fontSize.value }};
  139.         }
  141.         .cms-element-{{ element.type }}-{{ element.id }}.hover-text-show-arrow:hover .icon-cms-teaser {
  142.             left: calc(100% - {{ config.fontSize.value }} - {{ config.textPaddingRight.value }})
  143.         }
  144.     </style>
  146.     {% block element_zen_teaser_element %}
  147.         <div class="cms-element-{{ element.type }} cms-element-{{ element.type }}-{{ element.id }}{% if config.verticalImageAlign.value %} has-vertical-alignment{% endif %} {{ elemClasses|sort|join(' ') }} {{ customClasses }}">
  148.             {% block element_zen_teaser_alignment %}
  149.                 {% if config.verticalImageAlign.value %}
  150.                     <div class="cms-element-alignment{% if config.verticalImageAlign.value == "center" %} align-self-center{% elseif config.verticalImageAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  151.                 {% endif %}
  152.                 {% block element_zen_teaser_inner %}
  153.                     {% set imageElement %}
  154.                         {% block element_zen_teaser_container %}
  155.                             {% if element.data.media.url %}
  156.                                 <div class="cms-teaser-image-container is-{{ element.translated.config.displayMode.value }}"
  157.                                     {% if element.translated.config.minHeight.value and element.translated.config.displayMode.value == "cover" %} style="min-height: {{ element.translated.config.minHeight.value }};"{% endif %}>
  158.                                     {% block element_zen_teaser_media %}
  159.                                         {% set attributes = {
  160.                                             'class': 'cms-teaser-image',
  161.                                             'alt': (element.data.media.translated.alt ?: ''),
  162.                                             'title': (element.data.media.translated.title ?: '')
  163.                                         } %}
  165.                                         {% if element.translated.config.displayMode.value == 'cover' or element.translated.config.displayMode.value == 'contain' %}
  166.                                             {% set attributes = attributes|merge({ 'data-object-fit': element.translated.config.displayMode.value }) %}
  167.                                         {% endif %}
  169.                                         {% sw_thumbnails 'cms-image-thumbnails' with {
  170.                                             media: element.data.media
  171.                                         } %}
  172.                                     {% endblock %}
  173.                                 </div>
  174.                             {% endif %}
  176.                             <div class="cms-teaser-content-container {{ animationClasses|sort|join(' ') }}"
  177.                                  {% if config.animationIn.value != 'none' or config.animationOut.value != 'none' %}data-animation="true"{% endif %}
  178.                             >
  179.                                 {% if config.overlay.value %}
  180.                                     <div class="cms-teaser-overlay"></div>
  181.                                 {% endif %}
  183.                                 {% if config.text.value %}
  184.                                     {% set content = config.text.value|raw %}
  186.                                     <div class="cms-teaser-text-container">
  187.                                         <span class="cms-teaser-text {{ textClasses|sort|join(' ') }}">
  188.                                             <span class="cms-teaser-text-value">
  189.                                                 {% if config('zenitPlatformHorizon.config.twigStringLoaderExtension') %}
  190.                                                     {% sw_include '@zenitPlatformHorizon/storefront/utilities/zen-template-from-string.html.twig' with {
  191.                                                         content: content
  192.                                                     } only %}
  193.                                                 {% else %}
  194.                                                     {{ content|raw }}
  195.                                                 {% endif %}
  196.                                             </span>
  197.                                             {% if config.textHover.value == 'show-arrow' or config.textHover.value == 'distance-arrow' %}
  198.                                                 {% sw_icon 'arrow-medium-right' style { 'pack': 'solid', 'class': 'cms-teaser' } %}
  199.                                             {% endif %}
  200.                                         </span>
  201.                                     </div>
  202.                                 {% endif %}
  203.                             </div>
  205.                         {% endblock %}
  206.                     {% endset %}
  208.                     {% if element.translated.config.url.value %}
  209.                         <a href="{{ element.translated.config.url.value }}"
  210.                            class="cms-teaser-image-inner cms-teaser-image-link"
  211.                            {% if element.translated.config.newTab.value %}target="_blank" rel="noopener"{% endif %}>
  212.                             {{ imageElement }}
  213.                         </a>
  214.                     {% else %}
  215.                         <div class="cms-teaser-image-inner cms-teaser-image-no-link">
  216.                             {{ imageElement }}
  217.                         </div>
  218.                     {% endif %}
  219.                 {% endblock %}
  220.                 {% if config.verticalImageAlign.value %}
  221.                     </div>
  222.                 {% endif %}
  223.             {% endblock %}
  224.         </div>
  225.     {% endblock %}
  227. {% endblock %}