custom/plugins/UandiCustomCmsElements/src/Resources/views/storefront/element/cms-element-highlight-card.html.twig line 1

Open in your IDE?
  1. {% set config = element.translated.config %}
  3. {% block element_highlight_card %}
  4.     <div class="cms-element-{{ element.type }}">
  5.         <div class="card 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 %}">
  6.             <div class="card-body" style="{% if not config.onlyTextPadding.value %}{{ element.data.padding }}{% endif %}">
  7.                 {% set image %}
  8.                     <div class="card-image">
  9.                         {% block element_highlight_card_image_alignment %}
  10.                             {% if config.imgVerticalAlign.value %}
  11.                                 <div class="cms-element-alignment{% if config.imgVerticalAlign.value == "center" %} align-self-center{% elseif config.imgVerticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  12.                             {% endif %}
  13.                             {% block element_highlight_card_image_inner %}
  14.                                 {% set imageElement %}
  15.                                     {% block element_highlight_card_image_container %}
  16.                                         {% if element.data.media.url %}
  17.                                             <div class="cms-image-container is-{{ config.displayMode.value }}"
  18.                                                 {% if config.minHeight.value and config.displayMode.value == "cover" %} style="min-height: {{ config.minHeight.value }};"{% endif %}>
  19.                                                 {% block element_highlight_card_image_media %}
  20.                                                     {% set attributes = {
  21.                                                         'class': 'cms-image',
  22.                                                         'alt': (element.data.media.translated.alt ?: ''),
  23.                                                         'title': (element.data.media.translated.title ?: '')
  24.                                                     } %}
  26.                                                     {% if config.displayMode.value == 'cover' or config.displayMode.value == 'contain' %}
  27.                                                         {% set attributes = attributes|merge({ 'data-object-fit': config.displayMode.value }) %}
  28.                                                     {% endif %}
  30.                                                     {% sw_thumbnails 'cms-highlight-card-thumbnails' with {
  31.                                                         media: element.data.media
  32.                                                     } %}
  33.                                                 {% endblock %}
  34.                                             </div>
  35.                                         {% endif %}
  36.                                     {% endblock %}
  37.                                 {% endset %}
  39.                                 {% if config.url.value %}
  40.                                     <a href="{{ config.url.value }}"
  41.                                        class="cms-image-link"
  42.                                        {% if config.newTab.value %}target="_blank" rel="noopener"{% endif %}>
  43.                                         {{ imageElement }}
  44.                                     </a>
  45.                                 {% else %}
  46.                                     {{ imageElement }}
  47.                                 {% endif %}
  48.                             {% endblock %}
  49.                             {% if config.imgVerticalAlign.value %}
  50.                                 </div>
  51.                             {% endif %}
  52.                         {% endblock %}
  53.                     </div>
  54.                 {% endset %}
  56.                 {% if config.imgFirst.value %}
  57.                     {{ image }}
  58.                 {% endif %}
  60.                 <div class="card-text" style="{% if config.onlyTextPadding.value %}{{ element.data.padding }}{% endif %}">
  61.                     {% block element_highglight_card_text_alignment %}
  62.                         {% if config.textVerticalAlign.value %}
  63.                             <div class="cms-element-alignment{% if config.textVerticalAlign.value == "center" %} align-self-center{% elseif config.textVerticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  64.                         {% endif %}
  65.                         {% block element_text_inner %}
  66.                             {{ element.data.content|raw }}
  67.                         {% endblock %}
  68.                         {% if config.textVerticalAlign.value %}
  69.                             </div>
  70.                         {% endif %}
  71.                     {% endblock %}
  72.                 </div>
  74.                 {% if not config.imgFirst.value %}
  75.                     {{ image }}
  76.                 {% endif %}
  77.             </div>
  78.         </div>
  79.     </div>
  80. {% endblock %}