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

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-page-listing.html.twig' %}
  3. {% set imageSize = ' h-full w-full' %}
  5. {% block element_page_listing_elongated_image_content %}
  6.     {% sw_thumbnails 'cms-image-thumbnails' with {
  7.         media: element.data.images.image_1_desktop,
  8.         attributes: {
  9.             'class': 'page-listing-img-desktop object-cover hidden lg:block rounded-sm' ~ corners ~ imageSize,
  10.             'alt': (element.data.images.image_1_desktop.alt ?: ''),
  11.             'title': (element.data.images.image_1_desktop.title ?: '')
  12.         }
  13.     } %}
  14.     <div class="ratio ratio_1x1 lg:hidden">
  15.         {% sw_thumbnails 'cms-image-thumbnails' with {
  16.             media: element.data.images.image_2_mobile,
  17.             attributes: {
  18.                 'class': 'page-listing-img-mobile rounded-sm',
  19.                 'alt': (element.data.images.image_2_mobile.alt ?: ''),
  20.                 'title': (element.data.images.image_2_mobile.title ?: '')
  21.             }
  22.         } %}
  23.     </div>
  24. {% endblock %}
  26. {% block element_page_listing_default_image_content %}
  27.     <div class="ratio ratio_1x1">
  28.         {% sw_thumbnails 'cms-image-thumbnails' with {
  29.             media: element.data.images.image_1_desktop,
  30.             attributes: {
  31.                 'class': 'page-listing-img w-auto object-cover rounded-sm' ~ corners ~ imageSize,
  32.                 'alt': (element.data.images.image_1_desktop.alt ?: ''),
  33.                 'title': (element.data.images.image_1_desktop.title ?: '')
  34.             }
  35.         } %}
  36.     </div>
  37. {% endblock %}
  39. {% block element_page_listing_text_content %}
  40.     <div class="{% if elongated %} absolute left-0 bottom-10 lg:pb-0 p-4 {% endif %}lg:flex lg:flex-col lg:flex-grow">
  41.         {% if title %}
  42.             <h2 class="h2 font-bold text-lg my-2 !font-display {% if elongated %}!text-white{% else %}text-black{% endif %} md:text-2xl">
  43.                 {{ title }}
  44.             </h2>
  45.         {% endif %}
  46.         {% if text %}
  47.             <div class="text-sm {% if elongated %}text-white pb-4 {% else %}text-black{% endif %}">
  48.                 {{ text }}
  49.             </div>
  50.         {% endif %}
  51.         {% if button.active %}
  52.             <a role="button"
  53.                class="{% if elongated %} btn-link {% else %}btn rounded-sm {{ button.type }}{% endif %} text-sm mt-2 lg:max-w-fit"
  54.                href="{{ button.url }}"
  55.                {% if button.newtab %}target="_blank"{% endif %}>
  56.                 {{ button.text }}
  57.                 {% if not elongated %}
  58.                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  59.                         <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
  60.                     </svg>
  61.                 {% endif %}
  62.             </a>
  63.         {% endif %}
  64.     </div>
  65. {% endblock %}