custom/plugins/TcinnThemeWareModern/src/Resources/views/storefront/element/cms-element-twt-button-teaser.html.twig line 1

Open in your IDE?
  1. {# ThemeWare: CMS element "Button teaser" #}
  3. {# TODO: prüfen... #}
  5. {# ---------------- START: SET VARS ---------------- #}
  7. {# ThemeWare: Set variables #}
  8. {#% set twtButtonTeaser = element.translated.config %#}
  9. {% set twtButtonTeaser = element.fieldConfig.elements %}
  11. {# Tab: Layout #}
  12. {% set twtButtonTeaserHoverEffect = twtButtonTeaser.hoverEffect.value %}
  13. {# TODO... #}
  15. {# Tab: Advanced #}
  16. {% set twtButtonTeaserCssClass = twtButtonTeaser.cssClass.value %}
  18. {# ---------------- END: SET VARS ---------------- #}
  20. {# ---------------- START: SET CLASSES ---------------- #}
  22. {% set overlayClasses = ['overlay'] %}
  24. {% if twtButtonTeaserHoverEffect != 'none' %}
  25.     {% if twtButtonTeaserHoverEffect != "fadeOut" %}
  26.         {% set overlayClasses = ['fade-in']|merge(overlayClasses) %}
  27.     {% else %}
  28.         {% set overlayClasses = ['fade-out']|merge(overlayClasses) %}
  29.     {% endif %}
  30. {% endif %}
  33. {% set contentClasses = ['content'] %}
  35. {% if twtButtonTeaserHoverEffect != 'none' %}
  36.     {% if twtButtonTeaserHoverEffect == "slideIn" %}
  37.         {% set contentClasses = ['fade-in']|merge(contentClasses) %}
  38.     {% elseif twtButtonTeaserHoverEffect == "slideInUp" %}
  39.         {% set contentClasses = ['fade-in-up']|merge(contentClasses) %}
  40.     {% elseif twtButtonTeaserHoverEffect == "slideInRight" %}
  41.         {% set contentClasses = ['fade-in-right']|merge(contentClasses) %}
  42.     {% elseif twtButtonTeaserHoverEffect == "slideInDown" %}
  43.         {% set contentClasses = ['fade-in-down']|merge(contentClasses) %}
  44.     {% elseif twtButtonTeaserHoverEffect == "slideInLeft" %}
  45.         {% set contentClasses = ['fade-in-left']|merge(contentClasses) %}
  46.     {% elseif twtButtonTeaserHoverEffect == "zoomIn" %}
  47.         {% set contentClasses = ['zoom-in']|merge(contentClasses) %}
  48.     {% elseif twtButtonTeaserHoverEffect == "fadeOut" %}
  49.         {% set contentClasses = ['fade-out']|merge(contentClasses) %}
  50.     {#% elseif twtButtonTeaserHoverEffect == null %}
  51.         {% set contentClasses = ['fade-in-right']|merge(contentClasses) %#}
  52.     {% endif %}
  53. {% endif %}
  55. {# ---------------- END: SET CLASSES ---------------- #}
  57. {% block element_twt_button_teaser %}
  58.     {% set config = element.fieldConfig.elements %}
  60.     {# TODO: finalize #}
  62.     <div class="cms-element-{{ element.type }}{% if config.verticalAlign.value %} has-vertical-alignment{% endif %}{% if twtButtonTeaserHoverEffect != 'none' %} is-hover{% endif %}{% if twtButtonTeaserCssClass is not empty %} {{ twtButtonTeaserCssClass }}{% endif %}">
  63.         {% block element_twt_button_teaser_content %}
  65.             {% if config.verticalAlign.value %}
  66.                 <div class="cms-element-alignment{% if config.verticalAlign.value == "center" %} align-self-center{% elseif config.verticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  67.             {% endif %}
  69.             {% block element_twt_button_teaser_image_inner %}
  71.                 {# ThemeWare: Set 'Button teaser' element #}
  72.                 {% set buttonTeaser %}
  73.                     <div class="twt-button-teaser-container cms-content-container justify-content-{{ config.horizontalAlignment.value }} align-items-{{ config.verticalAlignment.value }}">
  74.                         {# Colored overlay (if configured) #}
  75.                         {% if config.colorOverlay.value %}
  76.                             <div class="twt-button-teaser-overlay color-overlay {{ overlayClasses|sort|join(' ') }}" style="background-color: {{ config.colorOverlayBgColor.value }};"></div>
  77.                         {% endif %}
  79.                         {# Button (mandatory) #}
  80.                         <div class="twt-button-teaser-content {{ contentClasses|sort|join(' ') }}">
  81.                             {# Info: Title tag = Button text (as the text is mandatory) #}
  82.                             <a href="{{ element.translated.config.url.value }}"
  83.                                title="{{ element.translated.config.buttonText.value }}"
  84.                                class="twt-button-teaser-button btn btn-{% if config.buttonOutline.value %}outline-{% endif %}{{ config.buttonStyle.value }}"
  85.                                {% if element.translated.config.newTab.value %}target="_blank" rel="noopener"{% endif %}>
  86.                                 {{ element.translated.config.buttonText.value }}
  87.                             </a>
  88.                         </div>
  89.                     </div>
  90.                 {% endset %}
  92.                 {# ThemeWare: Set image element #}
  93.                 {% set imageElement %}
  94.                     {% block element_twt_button_teaser_image_container %}
  95.                         {% if element.data.media.url %}
  96.                             <div class="twt-button-teaser-image-container cms-image-container is-{{ element.translated.config.displayMode.value }}" {% if element.translated.config.minHeight.value and element.translated.config.displayMode.value == "cover" %} style="min-height: {{ element.translated.config.minHeight.value }};"{% endif %}>
  97.                                 {% block element_twt_button_teaser_image_media %}
  98.                                     {% set attributes = {
  99.                                         'class': 'cms-image',
  100.                                         'alt': (element.data.media.translated.alt ?: ''),
  101.                                         'title': (element.data.media.translated.title ?: '')
  102.                                     } %}
  104.                                     {% if element.translated.config.displayMode.value == 'cover' or element.translated.config.displayMode.value == 'contain' %}
  105.                                         {% set attributes = attributes|merge({ 'data-object-fit': element.translated.config.displayMode.value }) %}
  106.                                     {% endif %}
  108.                                     {% sw_thumbnails 'cms-image-thumbnails' with {
  109.                                         media: element.data.media
  110.                                     } %}
  111.                                 {% endblock %}
  113.                                 {# ThemeWare: Load 'Button teaser' element #}
  114.                                 {{ buttonTeaser }}
  115.                             </div>
  116.                         {% endif %}
  117.                     {% endblock %}
  118.                 {% endset %}
  120.                 {# ThemeWare: Load image element #}
  121.                 {{ imageElement }}
  123.             {% endblock %}
  125.             {% if config.verticalAlign.value %}
  126.                 </div>
  127.             {% endif %}
  128.         {% endblock %}
  129.     </div>
  130. {% endblock %}