custom/static-plugins/NdTheme/src/Resources/views/storefront/element/cms-element-page-listing.html.twig line 1

Open in your IDE?
  1. {% block element_page_listing %}
  2.     {% set elongated = element.config.background.value %}
  3.     {% set title = element.config.title.value %}
  4.     {% set text = element.config.text.value %}
  5.     {% set button = element.config.button.value %}
  7.     {% set imageSize = ' h-full' %}
  9.     {% if element.config.borders.value.left and element.config.borders.value.right %}
  10.         {% set corners = ' rounded-t-[272px] ' %}
  11.     {% elseif element.config.borders.value.left %}
  12.         {% set corners = ' rounded-tl-[272px] ' %}
  13.     {% elseif element.config.borders.value.right %}
  14.         {% set corners = ' rounded-tr-[272px] ' %}
  15.     {% endif %}
  19.     <article data-element="{{ element.type }}" class="listing-area listing-area-{{ element.slot }} relative {% if not elongated %}lg:flex lg:flex-col{% endif %}">
  20.         {% if elongated %}
  21.             {% block element_page_listing_elongated_image_content %}
  22.                 {% sw_thumbnails 'cms-image-thumbnails' with {
  23.                     media: element.data.images.image_1_desktop,
  24.                     attributes: {
  25.                         'class': 'page-listing-img-desktop object-cover hidden lg:block' ~ corners ~ imageSize,
  26.                         'alt': (element.data.images.image_1_desktop.alt ?: ''),
  27.                         'title': (element.data.images.image_1_desktop.title ?: '')
  28.                     }
  29.                 } %}
  30.                 <div class="ratio ratio_1x1 lg:hidden">
  31.                     {% sw_thumbnails 'cms-image-thumbnails' with {
  32.                         media: element.data.images.image_2_mobile,
  33.                         attributes: {
  34.                             'class': 'page-listing-img-mobile',
  35.                             'alt': (element.data.images.image_2_mobile.alt ?: ''),
  36.                             'title': (element.data.images.image_2_mobile.title ?: '')
  37.                         }
  38.                     } %}
  39.                 </div>
  40.             {% endblock %}
  41.         {% elseif not elongated %}
  42.             {% block element_page_listing_default_image_content %}
  43.                 <div class="ratio {% if block.type == 'triple-page-listing' %}ratio_1x1{% else %}ratio_3x4{% endif %}">
  44.                     {% sw_thumbnails 'cms-image-thumbnails' with {
  45.                         media: element.data.images.image_1_desktop,
  46.                         attributes: {
  47.                             'class': 'page-listing-img w-auto object-cover' ~ corners ~ imageSize,
  48.                             'alt': (element.data.images.image_1_desktop.alt ?: ''),
  49.                             'title': (element.data.images.image_1_desktop.title ?: '')
  50.                         }
  51.                     } %}
  52.                 </div>
  53.             {% endblock %}
  55.         {% endif %}
  56.         {% block element_page_listing_text_content %}
  57.             <div class="{% if elongated %}-translate-y-full px-3 pb-3 w-full lg:absolute lg:left-1/2 lg:-translate-x-1/2 lg:bottom-10 lg:pb-0 lg:px-10 lg:translate-y-0 {% else %}mt-10 lg:flex lg:flex-col lg:flex-grow{% endif %}">
  58.                 {% if title %}
  59.                     <h2 class="h2 font-light {% if elongated %}text-white{% else %}text-black{% endif %}">
  60.                         {{ title }}
  61.                     </h2>
  62.                 {% endif %}
  63.                 {% if text %}
  64.                     <div class="font-light text-base {% if elongated %}text-white{% else %}text-black mt-4 lg:mb-10{% endif %}">
  65.                         {{ text }}
  66.                     </div>
  67.                 {% endif %}
  68.                 {% if button.active %}
  69.                     <a role="button"
  70.                        class="{% if elongated %} btn-link mt-4 text-white text-xs md:text-base{% else %}btn mt-10 lg:mt-auto {{ button.type }}{% endif %}"
  71.                        href="{{ button.url }}"
  72.                        {% if button.newtab %}target="_blank"{% endif %}>
  73.                         {{ button.text }}
  74.                     </a>
  75.                 {% endif %}
  76.             </div>
  77.         {% endblock %}
  78.     </article>
  79. {% endblock %}