custom/plugins/CogiCmsLayouts/src/Resources/views/storefront/element/cms-element-cogi-text-on-image.html.twig line 1

Open in your IDE?
  1. {% block element_text_on_image %}
  2.     {%  set config = element.fieldConfig.elements %}
  4.     <div class="cms-element-{{ element.type }}{% if config.verticalAlign.value %} has-vertical-alignment{% endif %}{% if config.hoverZoom.value %} has-hover-zoom{% endif %} {% if config.cssClass.value %}{{ config.cssClass.value|sw_sanitize }}{% endif %}">
  6.         {% block element_text_on_image_alignment %}
  8.             {% if config.verticalAlign.value %}
  9.                 <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 %}">
  10.             {% endif %}
  12.             {% block element_text_on_image_inner %}
  13.                 {% set imageElement %}
  14.                     {% block element_text_on_image_container %}
  15.                         <div class="cms-text-on-image-container is-{{ element.translated.config.displayMode.value }}"
  16.                              style="{% if element.translated.config.minHeight.value and element.translated.config.displayMode.value == "cover" %}min-height: {{ element.translated.config.minHeight.value }};{% endif %}
  17.                              {% if element.translated.config.background.value %}background-color: {{ element.translated.config.background.value }};{% endif %}">
  19.                             {% if element.data.image.media.url %}
  21.                                 <div class="cms-text-on-image-content-image text-center">
  23.                                     {% block element_text_on_image_media %}
  24.                                         {% set attributes = {
  25.                                             'class': 'cms-text-on-image-image',
  26.                                             'alt': (element.data.image.media.translated.alt ?: ''),
  27.                                             'title': (element.data.image.media.translated.title ?: '')
  28.                                         } %}
  30.                                         {% if element.translated.config.displayMode.value == 'cover' or element.translated.config.displayMode.value == 'contain' %}
  31.                                             {% set attributes = attributes|merge({ 'data-object-fit': element.translated.config.displayMode.value }) %}
  32.                                         {% endif %}
  34.                                         {% if not element.translated.config.noImage.value %}
  35.                                             {% sw_thumbnails 'cms-text-on-image-thumbnails' with {
  36.                                                 media: element.data.image.media
  37.                                             } %}
  38.                                         {% endif %}
  39.                                     {% endblock %}
  41.                                 </div>
  43.                             {% endif %}
  45.                             {% block element_text_on_image_content_overlay %}
  46.                                 {% if element.data.overlay.media.url %}
  48.                                     {% set vA = config.overlayVerticalAlign.value ?: 'center' %}
  49.                                     {% set hA = config.overlayHorizontalAlign.value ?: 'center' %}
  50.                                     {% set vAm = config.overlayVerticalAlignManual.value %}
  51.                                     {% set hAm = config.overlayHorizontalAlignManual.value %}
  52.                                     {% if vA == 'manual' %}{% set vA = vAm %}{% endif %}
  53.                                     {% if hA == 'manual' %}{% set hA = hAm %}{% endif %}
  55.                                     <div class="cms-text-on-image-content-overlay">
  56.                                         {% set attributes = {
  57.                                             'class': 'cms-text-on-image-overlay',
  58.                                             'alt': (element.data.overlay.media.translated.alt ?: ''),
  59.                                             'title': (element.data.overlay.media.translated.title ?: ''),
  60.                                             'style': 'object-position:'~hA~' '~vA~';'
  61.                                         } %}
  62.                                         {% sw_thumbnails 'cms-text-on-image-thumbnails' with {
  63.                                             media: element.data.overlay.media
  64.                                         } %}
  65.                                     </div>
  66.                                 {% endif %}
  67.                             {% endblock %}
  69.                             {% block element_text_on_image_content %}
  70.                                 <div class="cms-text-on-image-content" {% if config.tilePadding.value %}style="padding:{{ config.tilePadding.value|sw_sanitize }};"{% endif %}>
  71.                                     {% if element.translated.config.contentVerticalAlign.value %}
  72.                                         <div class="cms-element-alignment{% if element.translated.config.contentVerticalAlign.value == "center" %} align-self-center{% elseif element.translated.config.contentVerticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  73.                                     {% endif %}
  75.                                     {% block element_text_on_image_content_inner %}
  76.                                         <div class="cms-text-on-image-content-inner" style="{% if config.textPadding.value %}padding:{{ config.textPadding.value|sw_sanitize }};{% endif %}{% if config.textBackground.value %}background-color:{{ config.textBackground.value|sw_sanitize }};{% endif %}">
  77.                                             {{ element.translated.config.content.value|raw }}
  78.                                         </div>
  79.                                     {% endblock %}
  81.                                     {% if element.translated.config.contentVerticalAlign.value %}
  82.                                         </div>
  83.                                     {% endif %}
  84.                                 </div>
  85.                             {% endblock %}
  87.                         </div>
  88.                     {% endblock %}
  89.                 {% endset %}
  91.                 {% if element.translated.config.url.value %}
  92.                     <a href="{{ element.translated.config.url.value }}"
  93.                        class="cms-text-on-image-link"
  94.                        {% if element.translated.config.newTab.value %}target="_blank"{% endif %}>
  95.                         {{ imageElement }}
  96.                     </a>
  97.                 {% else %}
  98.                     {{ imageElement }}
  99.                 {% endif %}
  100.             {% endblock %}
  102.             {% if config.verticalAlign.value %}
  103.                 </div>
  104.             {% endif %}
  106.         {% endblock %}
  107.     </div>
  108. {% endblock %}