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

Open in your IDE?
  1. {# ThemeWare: CMS element "Text teaser" #}
  3. {# TODO: prüfen... #}
  5. {# ---------------- START: SET VARS ---------------- #}
  7. {# ThemeWare: Set variables #}
  8. {#% set twtTextTeaser = element.translated.config %#}
  9. {% set twtTextTeaser = element.fieldConfig.elements %}
  11. {# Tab: Layout #}
  12. {% set twtTextTeaserFontFamily = twtTextTeaser.fontFamily.value %}
  13. {% set twtTextTeaserHoverEffect = twtTextTeaser.hoverEffect.value %}
  14. {% set twtTextTeaserTextShadow = twtTextTeaser.textShadow.value %}
  15. {# TODO... #}
  17. {# Tab: Advanced #}
  18. {% set twtTextTeaserCssClass = twtTextTeaser.cssClass.value %}
  20. {# ---------------- END: SET VARS ---------------- #}
  22. {# ---------------- START: SET CLASSES ---------------- #}
  24. {% set overlayClasses = ['overlay'] %}
  26. {% if twtTextTeaserHoverEffect != 'none' %}
  27.     {% if twtTextTeaserHoverEffect != "fadeOut" %}
  28.         {% set overlayClasses = ['fade-in']|merge(overlayClasses) %}
  29.     {% else %}
  30.         {% set overlayClasses = ['fade-out']|merge(overlayClasses) %}
  31.     {% endif %}
  32. {% endif %}
  35. {% set contentClasses = ['content'] %}
  37. {% if twtTextTeaserHoverEffect != 'none' %}
  38.     {% if twtTextTeaserHoverEffect == "slideIn" %}
  39.         {% set contentClasses = ['fade-in']|merge(contentClasses) %}
  40.     {% elseif twtTextTeaserHoverEffect == "slideInUp" %}
  41.         {% set contentClasses = ['fade-in-up']|merge(contentClasses) %}
  42.     {% elseif twtTextTeaserHoverEffect == "slideInRight" %}
  43.         {% set contentClasses = ['fade-in-right']|merge(contentClasses) %}
  44.     {% elseif twtTextTeaserHoverEffect == "slideInDown" %}
  45.         {% set contentClasses = ['fade-in-down']|merge(contentClasses) %}
  46.     {% elseif twtTextTeaserHoverEffect == "slideInLeft" %}
  47.         {% set contentClasses = ['fade-in-left']|merge(contentClasses) %}
  48.     {% elseif twtTextTeaserHoverEffect == "zoomIn" %}
  49.         {% set contentClasses = ['zoom-in']|merge(contentClasses) %}
  50.     {% elseif twtTextTeaserHoverEffect == "fadeOut" %}
  51.         {% set contentClasses = ['fade-out']|merge(contentClasses) %}
  52.     {#% elseif twtTextTeaserHoverEffect == null %}
  53.         {% set contentClasses = ['fade-in-right']|merge(contentClasses) %#}
  54.     {% endif %}
  55. {% endif %}
  58. {% if twtTextTeaserTextShadow == "small" %}
  59.     {% set textClasses = 'twt-shadow-sm' %}
  60. {% elseif twtTextTeaserTextShadow == "regular" %}
  61.     {% set textClasses = 'twt-shadow' %}
  62. {% elseif twtTextTeaserTextShadow == "large" %}
  63.     {% set textClasses = 'twt-shadow-lg' %}
  64. {% endif %}
  66. {# ---------------- END: SET CLASSES ---------------- #}
  68. {% block element_twt_text_teaser %}
  69.     {% set config = element.fieldConfig.elements %}
  71.     {# TODO: finalize #}
  73.     <div class="cms-element-{{ element.type }}{% if config.verticalAlign.value %} has-vertical-alignment{% endif %}{% if twtTextTeaserHoverEffect != 'none' %} is-hover{% endif %}{% if twtTextTeaserCssClass is not empty %} {{ twtTextTeaserCssClass }}{% endif %}">
  74.         {% block element_twt_text_teaser_content %}
  76.             {% if config.verticalAlign.value %}
  77.                 <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 %}">
  78.             {% endif %}
  80.             {% block element_twt_text_teaser_image_inner %}
  82.                 {# ThemeWare: Set 'Text teaser' element #}
  83.                 {% set textTeaser %}
  84.                     <div class="twt-text-teaser-container cms-content-container justify-content-{{ config.horizontalAlignment.value }} align-items-{{ config.verticalAlignment.value }}">
  85.                         {# Colored overlay (if configured) #}
  86.                         {% if config.colorOverlay.value %}
  87.                             <div class="twt-text-teaser-overlay color-overlay {{ overlayClasses|sort|join(' ') }}" style="background-color: {{ config.colorOverlayBgColor.value }};"></div>
  88.                         {% endif %}
  90.                         {# Text (mandatory) #}
  91.                         <div class="twt-text-teaser-content {{ contentClasses|sort|join(' ') }}{% if twtTextTeaserFontFamily !='base' %} twt-font-family-{{ twtTextTeaserFontFamily }}{% endif %}" style="text-align: {{ config.textAlignment.value }}; max-width: {{ config.maxWidth.value }};">
  92.                             <p class="twt-text-teaser-text text{% if textClasses %} {{ textClasses }}{% endif %}" style="color: {{ config.textColorTitle.value }};">
  93.                                 {{ element.translated.config.title.value }}
  94.                             </p>
  95.                         </div>
  96.                     </div>
  97.                 {% endset %}
  99.                 {# ThemeWare: Set image element #}
  100.                 {% set imageElement %}
  101.                     {% block element_twt_text_teaser_image_container %}
  102.                         {% if element.data.media.url %}
  103.                             <div class="twt-text-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 %}>
  104.                                 {% block element_twt_text_teaser_image_media %}
  105.                                     {% set attributes = {
  106.                                         'class': 'cms-image',
  107.                                         'alt': (element.data.media.translated.alt ?: ''),
  108.                                         'title': (element.data.media.translated.title ?: '')
  109.                                     } %}
  111.                                     {% if element.translated.config.displayMode.value == 'cover' or element.translated.config.displayMode.value == 'contain' %}
  112.                                         {% set attributes = attributes|merge({ 'data-object-fit': element.translated.config.displayMode.value }) %}
  113.                                     {% endif %}
  115.                                     {% sw_thumbnails 'cms-image-thumbnails' with {
  116.                                         media: element.data.media
  117.                                     } %}
  118.                                 {% endblock %}
  120.                                 {# ThemeWare: Load 'Text teaser' element #}
  121.                                 {{ textTeaser }}
  122.                             </div>
  123.                         {% endif %}
  124.                     {% endblock %}
  125.                 {% endset %}
  127.                 {# ThemeWare: Load elements #}
  128.                 {% if element.translated.config.url.value %}
  129.                     {# Info: Title tag = Title text (as the text is mandatory) #}
  130.                     <a href="{{ element.translated.config.url.value }}"
  131.                        title="{{ element.translated.config.title.value }}"
  132.                        class="cms-image-link"
  133.                        {% if element.translated.config.newTab.value %}target="_blank" rel="noopener"{% endif %}>
  134.                         {# ThemeWare: Load image element #}
  135.                         {{ imageElement }}
  136.                     </a>
  137.                 {% else %}
  138.                     {# ThemeWare: Load image element #}
  139.                     {{ imageElement }}
  140.                 {% endif %}
  142.             {% endblock %}
  144.             {% if config.verticalAlign.value %}
  145.                 </div>
  146.             {% endif %}
  147.         {% endblock %}
  148.     </div>
  149. {% endblock %}