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

Open in your IDE?
  1. {% block proc_cms_card %}
  2.     {%  set config = element.translated.config %}
  4.     <div class="proc-cms-card-element {{ config.cardStyle.value }}" id="card_{{ element.id }}">
  5.         {% set displayMode = config.displayMode.value %}
  7.         {% if config.displayImage.value != "standard" %}
  8.             {% set imageDisplayMode %}
  9.                 style="object-fit: {{ config.displayImage.value }};width:100%;{% if config.minHeight.value and config.displayImage.value == "cover" %}min-height: {{ element.translated.config.minHeight.value }};{% endif %}"
  10.             {% endset %}
  11.         {% endif %}
  13.         <div class="proc-cms-card-element-inner card--{{ displayMode }}
  14.             {% if config.positionImage.value == false %} card--horizontal-right{% endif %}"
  15.             {% if config.textButtonPosition.value === 'standard' and config.backgroundContainer.value != '' %} style='background-color: {{ config.backgroundContainer.value }}'{% endif %}
  16.         >
  18.             {# simplify ID access #}
  19.             {% set cardImage = config.media.value %}
  21.             {% if(cardImage) %}
  22.                 {# fetch media as batch - optimized for performance #}
  23.                 {% set cardImageCollection = searchMedia([cardImage], context.context) %}
  25.                 {# extract single media object #}
  26.                 {% set imageItem = cardImageCollection.get(cardImage) %}
  27.             {% endif %}
  29.             {% if imageItem %}
  30.                 <div class="proc-cms-card-element-image text-center
  31.                     cms-image-container is-{{ config.displayImage.value }}"
  32.                     {% if config.minHeight.value and config.displayImage.value == "cover" %}
  33.                         style="min-height: {{ element.translated.config.minHeight.value }};"
  34.                     {% endif %}
  35.                     {% if config.textButtonPosition.value === 'standard' and config.backgroundContainer.value != '' %} style='background-color: {{ config.backgroundContainer.value }}'{% endif %}
  36.                 >
  37.                     {% if config.url.value %}
  38.                         <a href="{{ config.url.value }}"
  39.                            class="cms-image-link"
  40.                            {% if config.newTab.value %}target="_blank" rel="noopener"{% endif %}>
  41.                             <img class="mx-auto" src="{{ imageItem.url }}" title="{{ imageItem.translated.title }}"
  42.                                  alt="{{ imageItem.translated.alt }}"
  43.                                 {{ imageDisplayMode }}
  44.                             >
  45.                         </a>
  46.                     {% else %}
  47.                         <img class="mx-auto" src="{{ imageItem.url }}" title="{{ imageItem.translated.title }}"
  48.                              alt="{{ imageItem.translated.alt }}"
  49.                                 {{ imageDisplayMode }}
  50.                         >
  51.                     {% endif %}
  52.                 </div>
  53.             {% endif %}
  55.             <div class="proc-cms-card-element-content{% if config.textButtonPosition.value != 'standard' %} proc-cms-card-element-content-row {{ config.textButtonPosition.value }}{% endif %}
  56.                 {% if config.backgroundContainer.value != '' %} p-4" style='background-color: {{ config.backgroundContainer.value }}'{% else %}"{% endif %}>
  57.                 <div class="proc-cms-card-element-content-text{% if config.url.value != '' and config.buttonText.value != '' and config.textButtonPosition.value === 'standard' %} mb-4{% endif %}
  58.                     {% if config.textButtonPosition.value != 'standard' %} proc-cms-card-element-content-row {{ config.textButtonPosition.value }}{% endif %}"
  59.                     {% if config.textButtonPosition.value === 'cmsCardTextRight' %}style="order: 2;"{% endif %}
  60.                 >
  61.                 {{ config.text.value|raw }}
  62.                 </div>
  64.                 {% if config.url.value != '' and config.buttonText.value != '' %}
  65.                     {% block sw_cms_element_proc_cms_card_button %}
  66.                         {% if config.buttonType.value != "" %}
  67.                             <div class="cms-element-card-button{% if config.buttonPosition.value %} d-flex {{ config.buttonPosition.value }}{% endif %}
  68.                             {% if config.textButtonPosition.value != 'standard' and config.buttonAlignment.value != '' %} {{ config.buttonAlignment.value }}{% endif %}"
  69.                             >
  70.                         {% endif %}
  71.                         <a href="{{ config.url.value }}" target="{% if config.linkTarget.value == '' %}_self{% else %}{{ config.linkTarget.value }}{% endif %}"
  72.                            class="{% if config.buttonType.value %}btn {{ config.buttonType.value }}{% endif %}">
  73.                             {{ config.buttonText.value|raw }}
  74.                         </a>
  75.                         {% if config.buttonType.value != "" %}</div>{% endif %}
  76.                     {% endblock %}
  77.                 {% endif %}
  78.             </div>
  79.         </div>
  80.     </div>
  81. {% endblock %}