custom/static-plugins/NdVoorwindenTheme/src/Resources/views/storefront/element/cms-element-image.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-image.html.twig' %}
  2. {% block element_image_container %}
  3.     {% if element.config.imageRatio.value == 'aspect-square' %}
  4.         {% set image_ratio =  'ratio_1x1' %}
  5.     {% elseif element.config.imageRatio.value == 'aspect-video' %}
  6.         {% set image_ratio =  'ratio_16x9' %}
  7.     {% else %}
  8.         {% set image_ratio =  'ratio_3x4' %}
  9.     {% endif %}
  10.     <div class="cms-image-container relative ratio {{ image_ratio }}">
  11.         {% block element_image_media %}
  12.             {% set attributes = {
  13.                 'alt': (element.data.media.translated.alt ?: ''),
  14.                 'title': (element.data.media.translated.title ?: '')
  15.             } %}
  17.             {% if element.translated.config.displayMode.value == 'cover' or element.translated.config.displayMode.value == 'contain' %}
  18.                 {% set attributes = attributes|merge({ 'data-object-fit': element.translated.config.displayMode.value }) %}
  19.             {% endif %}
  20.             {% if element.config.imageText.value %}
  22.             {% endif %}
  23.             {% sw_thumbnails 'cms-image-thumbnails' with {
  24.                 media: element.data.media,
  25.                 attributes: {
  26.                     'class': 'rounded-sm'
  27.                 }
  28.             } %}
  29.         {% endblock %}
  30.         <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full text-center">
  31.             <p class="font-bold font-inter uppercase tracking-wider {% if element.config.imageTextColor.value %} {{ element.config.imageTextColor.value }}{% endif %} {% if element.config.imageTextSize.value %} {{ element.config.imageTextSize.value }} {% endif %}">{{ element.config.imageText.value }}</p>
  32.         </div>
  33.     </div>
  34. {% endblock %}