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

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-twt-button-teaser.html.twig' %}
  3. {% block element_twt_button_teaser_image_inner %}
  5.     {# ThemeWare: Set 'Button teaser' element #}
  6.     {% set buttonTeaser %}
  7.     <div
  8.         class="twt-button-teaser-container cms-content-container justify-content-{{ config.horizontalAlignment.value }} align-items-{{ config.verticalAlignment.value }}">
  9.         {# Colored overlay (if configured) #}
  10.         {% if config.colorOverlay.value %}
  11.             <div class="twt-button-teaser-overlay color-overlay {{ overlayClasses|sort|join(' ') }}" style="background-color: {{ config.colorOverlayBgColor.value }};"></div>
  12.         {% endif %}
  14.         {# Button (mandatory) #}
  15.         <div
  16.             class="twt-button-teaser-content {{ contentClasses|sort|join(' ') }}" style="z-index:1;">
  17.             {# Info: Title tag = Button text (as the text is mandatory) #}
  18.             <a href="{{ element.translated.config.url.value }}" title="{{ element.translated.config.buttonText.value }}" class="twt-button-teaser-button btn btn-{% if config.buttonOutline.value %}outline-{% endif %}{{ config.buttonStyle.value }}" {% if element.translated.config.newTab.value %} target="_blank" rel="noopener" {% endif %}>
  19.                 {{ element.translated.config.buttonText.value }}
  20.             </a>
  21.         </div>
  22.     </div>
  23.     {% endset %}
  25.     {# ThemeWare: Set image element #}
  26.     {% set imageElement %}
  27.     {% block element_twt_button_teaser_image_container %}
  28.         {% if element.data.media.url %}
  29.             <div
  30.                 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 %}>
  31.                 {# ThemeWare: Load 'Button teaser' element #}
  32.                 {{ buttonTeaser }}
  34.                 {% block element_twt_button_teaser_image_media %}
  35.                     {% set attributes = {
  36.                         'class': 'cms-image',
  37.                         'alt': (element.data.media.translated.alt ?: ''),
  38.                         'title': (element.data.media.translated.title ?: '')
  39.                     } %}
  41.                     {% if element.translated.config.displayMode.value == 'cover' or element.translated.config.displayMode.value == 'contain' %}
  42.                         {% set attributes = attributes|merge({ 'data-object-fit': element.translated.config.displayMode.value }) %}
  43.                     {% endif %}
  44.                     <a href="{{ element.translated.config.url.value }}" title="{{ element.translated.config.buttonText.value }}" {% if element.translated.config.newTab.value %} target="_blank" rel="noopener" {% endif %}>
  45.                         {% sw_thumbnails 'cms-image-thumbnails' with {
  46.                             media: element.data.media
  47.                         } %}
  48.                     </a>
  49.                 {% endblock %}
  52.             </div>
  53.         {% endif %}
  54.     {% endblock %}
  55.     {% endset %}
  57.     {# ThemeWare: Load image element #}
  58.     {{ imageElement }}
  60. {% endblock %}